格安ホームページ制作のブリリアントワークスです。個人事業(SOHO)としての特長を活かし、格安価格・高品質にてご提供いたします。
ホームページ制作 岐阜(BW)
» » パンくずリストの構造化マークアップ

パンくずリストの構造化マークアップ

ヤフーやグーグルで検索した時に、次の画像のようにタイトルの下に表示されるURLが日本語表示になっていることがあります。

構造化データマークアップ

これはパンくずリストのカテゴリ名が表示されているのですが、閲覧者の目を引くのでサイトに訪れてもらえる可能性があり、直接訴えるという面で視覚的なSEO効果があります。

ただし、今のところ検索エンジンには評価されず、本来のSEO効果はないとされています。

それでも、日本語表示したいと思った方は、次の手順によりパンくずリストを構造化マークアップしてください。

方法は簡単で、今現在のパンくずリストのソースコード部分に少し追加するだけですが、WordPressなら一括で変更できるものの、htmlなどの静的ページでは1ページごとに地道な作業が必要となってしまいます。

また、パンくずリストがない場合は、追加しなければなりません。

パンくずリストのソースコードを改造する

パンくずリストにulタグを使用している場合は、次のようにします。

まず、ulタグの中にitemscope itemtype・・・を追加し、そして、aタグの中にitemprop="url"に追加、さらに<span itemprop="title">カテゴリ名</span>の形にしてください。

一番下は現在のファイル名なので、手を加える必要はありません。

改造したファイルをアップロードし、しばらく時間が経つと反映されるでしょう。

<ul itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
	<li><a href="#" itemprop="url"><span itemprop="title">家電</span></a></li>
	<li><a href="#" itemprop="url"><span itemprop="title">液晶テレビ</span></a></li>
	<li>A社液晶テレビ</li>
</ul>

パンくずリストにulタグを使用していない場合は、次のようにします。

itemscope itemtype・・・をパンくずリストを囲うdivタグに入れるだけで、基本的に同じです。

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="#" itemprop="url"><span itemprop="title">家電</span></a> &raquo; <a href="#" itemprop="url"><span itemprop="title">液晶テレビ</span></a> &raquo; A社液晶テレビ</div>

関連記事

インターネットエクスプローラ(IE)やグーグルクローム(Google Chrome)などのブラウザでサイトを見るとき、アドレスバーやタブにア...


グーグルの検索エンジンは、Googlebotと呼ばれるクローラーがウェブ中を駆け巡り、サイト情報を収集して持ち帰ってインデックスします。 ...


モニターのサイズにもよりますが、パソコンの場合は画面が大きいので今まで制作されてきた横幅1,000ピクセル以上のサイズでも画面全体を表示でき...


『パソコン、タブレット、スマホ・携帯』、それぞれの画面サイズに応じたデザインでホームページを表示するには、次のコードをHTMLファイルのヘッ...


レスポンシブサイトのチェックで紹介している方法を利用すると視覚的にスマホ・携帯でもホームページを快適に閲覧できるかどうかチェックできますが、...



コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

最新記事

Homepage

パンくずリストを構造化にすると、検索結果の下に表示されるURLがカテゴリ名にな...

WordPress

ワードプレスでpost classを使うと、さまざまなクラスと同時にhentr...

WordPress

ワードプレスには自動でPタグを入れる機能がありますが、場合によってはこれがデザ...

検索フォーム

コンテンツ

カテゴリ