Bloggerテーマをカスタマイズ - ヘッダー情報を追加しよう

HTMLの<head>要素に書かれる内容は人の目に触れる事のない情報が多かったりしますが検索エンジンなどはここの情報を元に様々な判断をしていたりします。
SEO対策として非常に重要な情報であるわけです。

’all-head-content’をインクルード

Bloggerではテーマのテンプレートに１行追加するだけでヘッダーに必要な情報を出力してくれる機能があります。

<head>要素の中に以下のように定義します。

<head>
  <b:include data='blog' name='all-head-content'/>
   :
   :
</head>

’all-head-content’が出力してくれるもの

Content-Type

このドキュメントがHTMLである事やどの文字コードで書かれているかを示す情報です。

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>

ブラウザのテーマカラー

スマホのブラウザなどはサイトの合わせてブラウザのアドレスバーの部分などの色を変えられる仕組みがあります。
背景色に合わせてテーマカラーの情報が出力されます。

<!-- Chrome, Firefox OS and Opera -->
<meta content='#ffffff' name='theme-color'/>
<!-- Windows Phone -->
<meta content='#ffffff' name='msapplication-navbutton-color'/>

サイト作成ソフトウェア

このサイトが作成されたソフトウェア名の名前が出力されます。

<meta content='blogger' name='generator'/>

ファビコン

ファビコンのリンクが出力されます。

<link href='[ファビコンのURL]' rel='icon' type='image/x-icon'/>

URLの正規化

同じコンテンツのページなら多少URLが違っても同一とみなすよう検索エンジンに伝えるための仕組みです。

<link href='[正規化されたURL]' rel='canonical'/>

フィード

各種フィードのリンクが出力されます。

<link rel="alternate" type="application/atom+xml" title="[ブログ名] - Atom" href="[AtomのURL]" />
<link rel="alternate" type="application/rss+xml" title="[ブログ名] - RSS" href="[RSSのURL]" />
<link rel="service.post" type="application/atom+xml" title="[ブログ名] - Atom" href="[AtomPubのURL]" />

プロフィール

Bloggerプロフィールのリンクが出力されます。

<link rel="me" href="[BloggerプロフィールのURL]" />

OGP

OGPとは「Open Graph Protcol」の略でSNSでシェアした際にタイトルやイメージ画像、詳細などを正しく伝えるためのものです。

<meta content='[ページのURL]' property='og:url'/>
<meta content='[ブログ名]' property='og:title'/>
<meta content='[ブログの説明]' property='og:description'/>

旧ブラウザに対応する為のコード

IEの古いバージョンなどでうまく表示されない現象に対応する為のスクリプトが出力されます。

<!--[if IE]> <script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script> <![endif]-->

Ararami Studio