BloggerでサイドバーにSiteNavigationElement+αを設置する方法

Blogger, 内部施策

さて、今やブログメディアに於いてヘッダー下のサイトナビゲーションはユーザビリティー上、必須の要素となっている感があります。

サイトナビゲーション
ヘッダー下のサイトナビゲーション

特に昨今はユーザビリティーの問題だけではなく、構造化データのマークアップ

itemscope itemtype="https://schema.org/SiteNavigationElement"

を付与する事によって「これはサイトナビゲーション要素ですよ」と検索エンジンに認識させ、SEO上の加点要素を積極的に狙う動きが増えています。

WordPress用のテーマ作成者の間では特にその意識が強く、今や「SiteNavigationElement」のマークアップは有料、無料を問わず「やって当たり前」の施策となっています。

Blogger用テーマの場合はどうか?

もちろん、昨今に於いてはサードパーティー(第三者)製のBlogger用テーマ(テンプレート)もWordPress用に準拠、あるいは追従するものが多く、構造化データに関しても

<div id='header' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
<footer id='footer-wrapper' itemscope='itemscope' itemtype='https://schema.org/WPFooter'>

等のマークアップを埋め込んで「ワードプレス規格」(?)に則っている事をアピールするものが多く見受けられます。

上記二つのマークアップが埋め込んであるテーマでしたら、当然の如く

<nav id='xxxxxxxx' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>

等のサイトナビゲーション用の記述がありますので当面は安心(?)と言いますか、とりあえずは記事を書く事に専念できそうです。

問題は公式テーマ

さて、問題になってくるのはBlogger用の公式テーマです。
確認してみたところ旧テーマはもちろんの事、新テーマに於いても現在のところはヘッダー下のナビゲーション(PageListウィジェット)に「SiteNavigationElement」のマークアップは埋め込まれていません。

Blogger公式 新テーマ
Blogger公式 新テーマ

もちろん、新テーマであろうと旧テーマであろうと、既に設置してある「PageListウィジェット」に、先に述べた

<nav id='xxxxxxxx' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>

を「HTMLの編集」画面から組み込んでやれば済む話なのですが、大抵の場合、ヘッダー下のサイトナビゲーションの更に下に「パンくずリスト」を設置しているテーマが多く、メインエントリーの位置が大きく下がってバランスが悪く見える場合があります。

それを嫌ってか(特に旧テーマ利用者の中には)、サイトナビゲーション or パンくずリストの どちらか一方しか設置していないブログも割と多く見受けられますし、事実、ワタクシが運営する雑記ブログも上述の理由でヘッダー下のサイトナビゲーションは設置していませんでした。

しかし、最初に述べたようにサイトナビゲーションの設置がユーザビリティー於いても、そしてSEO上の理由に於いても必須要素となってきた感がありますので、悩み抜いた結果として…

サイドバーにタグクラウド風のサイトナビゲーション+αを設置する

事によって解決しました。

タグクラウド風のサイトナビゲーション+αとは?

まぁ、論より証拠という事で、先に画像を見て頂きましょう。

タグクラウド風のサイトナビゲーション+α
タグクラウド風のサイトナビゲーション+α

ご覧のように、タグの文字をCSSでinline-block化してリスト状に縦並びにし、なおかつ、一つ一つに簡単な説明文を付ける事によって誘導率を上げています上げる事を狙っています。
もちろん、説明文も「ただ書いてあるだけ」ではなく、それはそれで別途にマークアップを施しています(これが+αの部分です)。

これならば、カテゴリー名やタグ名「のみ」しか表示しない、既存のサイトナビゲーションやタグクラウドよりも遥かに親切ですし、訪問者に対しても検索エンジンに対しても訴求効果が増すと思いませんか??

では、以下にサイドバーに設置するHTML文とCSSを載せておきます。

HTML文とCSS

1.「レイアウト」画面でサイドバーに「HTML/JavaScriptウィジット」を設置して、以下の基本形HTMLを記述する。

<div itemscope="itemscope" itemtype="https://schema.org/SiteNavigationElement">
<ul>
<li><a href="https://xxxxxxxx.blogspot.com/search/label/アイテム?&amp;max-results=6" itemprop="url"><span itemprop="keywords name">アイテム</span></a></li>
<span itemprop="alternativeHeadline">管理人のお気に入りのアクセサリーや、おすすめの家電アイテムについて。</span><br />
<br />
<li><a href="https://xxxxxxxx.blogspot.com/search/label/ゲーム?&amp;max-results=6" itemprop="url"><span itemprop="keywords name">ゲーム</span></a></li>
<span itemprop="alternativeHeadline">管理人がプレイしてみたゲームや、懐かしのゲーム紹介など。</span><br />
<br />
<li><a href="https://xxxxxxxx.blogspot.com/search/label/映画?&amp;max-results=6" itemprop="url"><span itemprop="keywords name">映画</span></a></li>
<span itemprop="alternativeHeadline">ハリウッド映画の中でも特に「スパイもの」をセレクトして紹介します。</span><br />
<br />
<li><a href="https://xxxxxxxx.blogspot.com/search/label/音楽?&amp;max-results=6" itemprop="url"><span itemprop="keywords name">音楽</span></a></li>
<span itemprop="alternativeHeadline">80年代のヘヴィーメタルを中心に「頭を振りたくなる一曲」をお届け!</span><br />
<br />
<li><a href="https://xxxxxxxx.blogspot.com/search/label/旅行?&amp;max-results=6" itemprop="url"><span itemprop="keywords name">旅行</span></a></li>
<span itemprop="alternativeHeadline">毎年の夏休みは必ずヨーロッパを巡る管理人の旅行記録です。</span></ul></div>

2.「HTMLの編集」画面でサイドバー配下のCSSに以下を追記する。

.widget-content ul li a {
display:inline-block;
margin-bottom:5px;
color:#fff!important;
background-color:#00c853;
padding:8px;border-radius:4px;
font-size:inherit;
transition:all .3s;
}
.widget-content ul li a:hover {
background-color:#43a047;
}

注意
上記のCSSは必ずサイドバー配下(#sidebar-wrapper等)に追記して下さい。
誤ってbody配下に記述してしまうと、サイト内の全ての<ul><li><a>に適用されてしまう恐れがあります。

3.基本形HTMLの内容(タグ名や説明文)を自サイトの内容に合わせて改変する。特に上記の例文ではタグページの表示件数を6件に設定してあるが、全件表示にしたい場合は

?&amp;max-results=6

の記述を削除する。

構造化データテストツールで確認する

さてさて、構造化データがキチンと認識されるかどうか、テストツールで確認してみましょうか…

構造化データテストツール1
https://search.google.com/structured-data/testing-tool

構造化データテストツール2

構造化データテストツール3

はいっ、この通り、エラーはありません!!
Bloggerユーザーの皆さん、これで勝ちに行きましょうww