ajax、SEO、誰が魚と熊の掌を兼ねることができないと言います
ユーザー体験が浸透するにつれて、ますます多くのシステムが単一ページ構造(SPA)を採用している.言うまでもなく、単一ページシステムの体験がよく、消費流量が少なく、グローバルリフレッシュを必要としない.しかし、検索エンジンにはあまり情報をつかむことができず、SEOには友好的ではありません.例えば、
検索エンジンは
www.demo.com/index.htmlというページの内容は、
取得できませんでした
www..demo.com/index.html#user
www..demo.com/index.html#detail
などのページの内容は、検索エンジンが#の後ろの内容を管理しないため、データが失われ、サイトのランキングに不利になります.
ではurlアドレスを変更しながらajaxのページ取得を両立させる方法はありますか?
html 5の新しいAPI pushStateを利用すると、この問題をうまく解決できます.
コードを見てみましょう
検索エンジンは
www.demo.com/index.htmlというページの内容は、
取得できませんでした
www..demo.com/index.html#user
www..demo.com/index.html#detail
などのページの内容は、検索エンジンが#の後ろの内容を管理しないため、データが失われ、サイトのランキングに不利になります.
ではurlアドレスを変更しながらajaxのページ取得を両立させる方法はありますか?
html 5の新しいAPI pushStateを利用すると、この問題をうまく解決できます.
コードを見てみましょう
<ul id="nav">
<li><a href="#user">user</a></li>
<li><a href="#detail">detail</a></li>
</ul>
<div id="container">
</div>
<script>
var ul = document.querySelector('#nav'),
container = document.querySelector('#container');</code></pre>
<pre><code class="language-html"> //
var setContainer = function (url) {
//ajax template
container.innerHTML = 'ajax ' + url;
};
ul.addEventListener('click', function (e) {
var target = e.target;
if (target.nodeName !== 'A') {
return;
}
var url = target.hash.replace('#', '');
history.pushState(url, null, url); // A ， url
setContainer(url);
e.preventDefault();
e.stopPropagation();
});</code></pre>
<pre><code class="language-html"> // /
window.addEventListener('popstate', function (e) {
setContainer(e.state);
});
</script>
</code></pre>
</div>
<div>
pushState ， url， ， ajax ， ， ， url ， 。
</div>
<div>
# ， url ， ，
</div>
<div>
<br/>
</div>
<div>
<pre><code>
<ul id="nav">
<li><a href="#user">user</a></li>
<li><a href="#detail">detail</a></li>
</ul>
<div id="container">
</div>
</code></pre>
<br/>
<br/>
</div>
<div>
<span/>
</div>
</div>
</div>
</div>
</div>