FC2のブログテンプレートで<li>タグを使用している「パンくずリスト」を構造化データマークアップに変更する方法について覚書。
「パンくずリスト」を構造化データマークアップに変更することでGoogle先生にその記事がどんな記事なのかわかりやすく紹介(検索エンジンに解析しやすく)することができます。
また、検索結果の表示がリッチスニペットになることで目につきやすくなることでSEO効果も期待できます。
今回はFC2ブログのテンプレートをカスタマイズして「パンくずリスト」を構造化データマークアップに変更する方法を紹介します。
パンくずのリストについて
ブログの各個別記事にはたいてい「パンくずリスト」なるものが設置されているかと思います。
この「パンくずリスト」とは、個別記事が所属するカテゴリを基にした階層構造を表示するように設定さていると思います。
例えば、私のブログの記事のパンくずリストはこんな感じです。
上記の例で言えば、「ホーム(このブログ)」で「データベース」の「ORACLE」の「ORACLE:ORACLEのフリークライアントソフト「Instant Client」のセットアップ方法」について書かれた記事ですという意味を示しています。
このパンくずリストを構造化データマークアップに変更することで検索エンジンにとっても同じように理解しやすく(解析しやすく)させることができます。
パンくずリストを構造化データマークアップにすることによる利点について
検索エンジンが記事の解析を容易に行えるようになる
パンくずリストを構造化データマークアップに変更すると検索エンジンに対して、「この記事はこんな事について書かれた記事です」をいう紹介してあげることができます。
簡単に言うと検索エンジンに記事の自己紹介をするといった感じでしょうか。
検索結果のリッチスニペット表示について
Googleの検索結果の表示がリッチスニペットになることで検索者から目につきやすくなり、クリック率を高める効果があります。
普通のパンくずリストを使用している場合の検索結果の例
パンくずリストを構造化データマークアップにした場合の検索結果の例
FC2ブログのテンプレートのパンくずリストを構造化データマークアップに変更する方法
FC2ブログのテンプレートのパンくずリストを構造化データマークアップに変更する方法を以下に記載します。
テンプレートのバックアップ
テンプレートを変更する前に必ずバックアップを取っておきましょう。
FC2ブログの管理画面から[テンプレートの設定]を開いて現在使用しているテンプレート(赤い旗が付いている)の"複製"をクリックしてコピーを取っておけば良いです。
もし変更する際に何か間違ってテンプレートが変になってしまったら複製したテンプレートのオプションをオンにして[適用]をクリックすればコピーした時点のテンプレートが使用されるので変更前の状態に戻すことができます。
パンくずリストのhtml部分を変更する
では実際にテンプレートのパンくずリストを変更します。
変更前のパンくずリスト
以下は私が使用しているテンプレートのパンくずリスト部分を示すhtmlです。
パンくずリストは、<ul><li>～</li></ul>タグと各カテゴリのリンク、カテゴリ名、記事のタイトルを表すブログ変数により作成されています。
<div class="pankuzu">
<ul>
<li><a href="/" title="ホーム">ホーム</a></li>
<li>»</li>
<li><a href="<%topentry_parent_category_link>" title="<%topentry_parent_category> カテゴリ記事一覧"><%topentry_parent_category></a></li>
<li>»</li><li><a href="<%topentry_category_link>" title="<%topentry_category> カテゴリ記事一覧"><%topentry_category></a></li>
<li>»</li>
<li><%sub_title></li>
</ul>
</div>私のブログではカテゴリが2階層になっています。
上記のhtmlで使用されているテンプレート変数と変数の内容を参考までに記載しておきます。
| テンプレート変数 | 表示される内容 |
|---|---|
| <%topentry_parent_category_link> | 親カテゴリURL |
| <%topentry_parent_category> | 親カテゴリ名 |
| <%topentry_category_link> | 子カテゴリURL |
| <%topentry_category> | 子カテゴリ名 |
| <%sub_title> | 個別記事タイトル |
変更後のパンくずリスト
テンプレートのパンくずリスト部分のhtmlを構造化データマークアップに変更したのが以下のhtmlです。
<div class="pankuzu">
<ul >
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a itemprop="url" href="http://vba-geek.jp/" title="ホーム">
<span itemprop="title">ホーム</span></a></li>
<li>»</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="<%topentry_parent_category_link>" title="<%topentry_parent_category> カテゴリ記事一覧" itemprop="url">
<span itemprop="title"><%topentry_parent_category></span></a></li>
<li>»</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="<%topentry_category_link>" title="<%topentry_category> カテゴリ記事一覧" itemprop="url">
<span itemprop="title"><%topentry_category></span></a></li>
<li>»</li>
<li><%sub_title></li>
</ul>
</div>html内の「http://data-vocabulary.org/Breadcrumb」はそのまま記述してください。
また、"ホーム"を示すURLは(上記例では、https://selifelog.com/)、自身のブログのホームのURLに変更してください。
使用しているテンプレートによって異なると思いますので、自分が使っているテンプレートとよく見比べた上で必要な変更を行ってください。
テンプレートの変更が終了したら保存して適当な個別記事ページを開いて変更したことによりページの表示がおかしくなっていないか確認して下さい。
変更したパンくずリストが正しい構造化データマークアップになっているか確認する方法
変更したパンくずリストが正しい構造化データマークアップになっているかどうかを確認することができますのでその確認方法を以下に記載します。
Googleの構造化データマークアップ確認サイトをブラウザで開きます。
サイトが開いたら[URL]を取得をクリックします。
自分のブログの個別記事(どれでも構いません)のURLを入力して[取得して検証]をクリックします。
構造化データマークアップが正しければ[結果]に「問題ありません」と表示されます。
以上でテンプレートのパンくずリスト部分を構造化データマークアップに変更作業は終了です。
検索結果に反映される(リッチスニペット表示に変わる)までは若干の時間がかかりますので、少し日が経ってから自分の記事が検索結果に表示されるようなキーワードで検索して確認してみてください。
パンくずリストを構造化データマークアップにする方法のまとめ
パンくずリストを構造化データマークアップにすることでSEO対策としてどれくらい有効かはわかりませんが、比較的簡単にできてプラスとなるのであればやっておいた方がいいに越したことはありません。
検索するユーザーにも検索エンジンにも良いことなの自分のブログのクオリティを高める上でも構造化データマークアップに変更しておくことをオススメします。
コメント