Browse: Home » SEO

SEO

【SEO】GoogleBotにAjaxページを知らせる方法。

angularなどで作成したページは検索エンジンになかなか認識されにくいので多少細工を施してやる必要がある。
方法としてはハッシュフラグメントをURLに付加する方法と、メタタグにて知らせる方法がある。

1, ハッシュフラグメントで知らせる。

AjaxページのURLに「#!」を付加する。

例）


http://example.com/index.html#!

GoogleBotはURL中に「#!」を見つけると、そこを「?_escaped_fragment_=」に置換して再アクセスしてくる。
なのでサーバー再度は「_escaped_fragment_」のパラメーターがあるかないかで返却するHTMLを切り替えてやればOK。

2, メタタグにて知らせる。

1, のような「#!」を使わずにAjaxページであることを知らせたい場合は、head内に下記のメタタグを追加してやる。

<meta name="fragment" content="!">

GoogleBotはこのメタタグを発見すると、1, と同様、URLの末端に?_escaped_fragment_=を付加して再アクセスしてくる。
サーバー再度は同じく、上述のパラメーター有無をキーに処理を切り替えてやればOK。

 

2014/09/04 _onichannn , ,

【Angular.js】のSEO対策。

angular製のアプリをgoogleに正しく取得してもらうためには、下記記事の通り、ヘッダー内に多少の細工を施す必要がある。

まずは、このページがダイナミックアプリケーションであることを伝えるために、下記metaタグを追加する。

<meta name="fragment" content="!">

次にJavascriptnのwindowオブジェクトに下記変数を定義。

window.prerenderReady = false;

最後にビューのレンダリングが完了した際に上記変数をtrueにしてやる。

window.prerenderReady = true;

window.prerenderReadyに関しては記述の必要性に関して下記のページが参考になる。

http://scotch.io/tutorials/javascript/angularjs-seo-with-prerender-io

window.prerenderReadyのセクションに

There is a high probability that you will not need to include this snippet, but the option is there if you need it.

のような記述が見受けられる。
これは「この記述は必要じゃない可能性が高いけれども、もし必要であるならばオプションとして用意されているよ」って意味なのかな？
兎に角これで動的なタイトルであっても、Google先生は正しく補足してくれるようになる模様。
今後も要調査項目かな。

 

2014/08/12 _onichannn , , ,

【SEO】SEOを意識したパンクズリストの記述方法。

パンクズリストを作成するときに、下記の点に留意するとgoogleの検索結果に綺麗に反映される。

1, ul（リストタグ）を使用する

2, microdata形式の構造化マークアップを適用する

■構造化マークアップのやり方

1, liタグ内に「itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”」を記述

2, aタグ内に「itemprop=”url”」を記述。※現在見ている場所もaタグで囲うこと。

3, アンカーテキスト部分をspanで囲んで「itemprop=”title”」の属性を付与する

下記例。

<ul id="bread-crumb-list;>
  <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a itemprop="url" href="http://www.example.com/"><span itemprop="title">TOP</span></a>&nbsp;&gt;&nbsp;
  </li>
  <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a itemprop="url" href="http://www.example.com/category/"><span itemprop="title">カテゴリー</span></a>&nbsp;&gt;&nbsp;
  </li>
  <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a itemprop="url" href="http://www.example.com/category/article"><span itemprop="title">記事</span></a>
  </li>
</ul>

 

2014/04/27 _onichannn , , ,