• seo
    メタキーワードがSEOに効果がない4つの理由
    2017年11月28日
  • seo
    最新SEO対策NEWな情報だけをピックアップ!
    2017年12月1日
  • パソコンの画面に何かをライティングしようとする男性 seo
    ライティングのコツ紹介しています!記事書く人おいでよ〜
    2017年12月1日
  • メタディスクリプションの書き方を紹介する女性 seo
    メタディスクリプションの正しい書き方を一緒にマスターしませんか?
    2017年12月3日
  • seo
    「SEOとは」の総集編
    2018年7月27日
Webページ上のパンくずリスト

 

パンくずリストはどれだけSEOに重要であるか再確認したい方もいるのではないですか。

SEO対策をしている運営者なら誰しも自サイトにパンくずリストを設置しています。今回はパンくずリストの設置手順や、パンくずリストを導入することでどのようなメリットを得られるのか紹介します。

 

パンくずリストの設置手順

 

パンくずリストを設置する場合、サイトや使用しているCMSによって設置方法が異なります。まずはwordpressでの設置方法を紹介します。

 

wordpressにパンくずリストを設置する手順

 

wordpressにパンくずリストを設置する方法はとても簡単です。プラグインを導入することで設置を完了させられます。多くのサイトでパンくずリスト導入に使われているプラグインはBreadcrumb NavXTです。

 

Breadcrumb NavXT

 

では実際に導入していきます。まずはwordpressのサイドメニューからプラグインの新規追加をクリックします。

 

wordpressのプラグイン新規登録メニュー

 

プラグインの新規追加画面に遷移したら、右上にある検索フォームからBreadcrumb NavXTと入力します。

 

プラグイン名入力画面

 

Breadcrumb NavXTがヒットするので、ダウンロードをします。そして、下記の画像のように有効化をクリックしてください。

 

Breadcrumb NavXTの有効化

 

以上でwordpressへのパンくずリストの設置は終了です。大体5分で設置完了します。

 

はてなブログにパンくずリストを設置する手順

 

はてなブログを使用している人もwordpress同様に簡単に設置が可能です。はてなブログには公式でパンくずリストの設置機能があり、その機能を使用することでパンくずリストを設置することができます。しかし、はてなブログの場合、パンくずリストはPCのみになります。

 

HTMLで作成して設置する手順

 

HTMLで作成をする時は、サルカワさんのページが参考になります。

 

<ul class="breadcrumb">

<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">

<a href="ホームのURL(このサイトならmoreandmore.jp)" itemprop="url">

<span itemprop="title">ホーム(このページならトップページのことです)</span>

</a>

</li>

<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">

<a href="カテゴリーURL" itemprop="url">

<span itemprop="title">カテゴリー名(このページならカテゴリ名はSEOになります)</span> </a>

</li> <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">

<a href="子カテゴリーのURL" itemprop="url">

<span itemprop="title">子カテゴリー名</span>

</a>

</li>

</ul>

 

アメブロにパンくずリストを設置する手順

アメブロに設置する時はフリープラグインとCSSの編集をすればパンくずリスト設置可能です。はじめの手順はフリープラグインを開き、下記のコードをコピー&ペーストします。

 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
$('span.articleTheme').each(function(){
var B_themeC=$(this).children();
var B_navi='<ol class="clearfix" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><li><a href="../■□■ここにブログアカウント名■□■/" itemprop="url" title="■□■ここにブログ名■□■"><span itemprop="title">トップページ</span></a></li> <li>></li> <li><a itemprop="url" href="';
$(this).html(B_navi+B_themeC.attr('href')+'">'+'<span itemprop="title">'+B_themeC.text()+'</span></a></li><li>></li><li>'+ $("div.skinArticleHeader2 h1").text() + '</li></ol>').fadeIn();
});
</script>

 

次にCSSの変更で下記コードをコピー&ペーストします。

 

.articleTheme ol li{
float: left;
margin: 0 10px 0 0;
list-style-type: none;
}

.clearfix:after {
content: ' ';
display: block;
clear: both;
}

.clearfix {
zoom: 1;
}

以上です。

パンくずリストの設置にはどのようなメリットがあるのか

パンくずリストの設置は大まかに分けて2つのメリットがあります。

 

パンくずリストはSEOに効果がある

 

パンくずリストの最大のメリットはSEO対策に効果が期待できるからです。パンくずリストがあることで、Googlebotにサイトの正しい階層を知ってもらうことができます。また、クロールする時にパンくずリストのカテゴリリンクにアクセスしてくれれば、カテゴリー全てのページをクロールしてもらうことができるのです。パンくずリストを設置しただけでSEOに劇的な効果を得られることはありませんが、サイトの構造を正しく伝えられるので設置して損はありません。

 

パンくずリストの設置で読者が迷子になるリスクが少ない

 

パンくずリストを設置することによって、読者に今あなたはここにいますよと知らせることができるので、迷子にならずにストレスフリーにサイトを閲覧できます。

seoの関連記事
  • CopyContentDetectorのホームページ
    CopyContentDetectorの一致率を下げる方法!是非お試しあれ
  • 「SEOとは」の総集編
  • キーワード選定に励む女性
    SEO効果があるキーワードを機械的に生み出す方法
  • アフィリエイトで稼ぐアイキャッチ画像
    SEO対策をしてアフィリエイトでしっかりと稼ぐ方法
  • アフィリエイトアイキャッチ画像
    SEOの観点から有名なのアフィリエイトサイトを調査した