Blogger カスタム テンプレート 導入時に行う作業一覧

Googleの無料ブログサービス「Blogger」を使い始めて数年になります。
Bloggerでは、WordPress同様カスタム テンプレートが利用でき、テンプレート導入時に行うべき事柄がいくつかあります。
今回は、カスタム テンプレート導入時、又は標準テンプレートに戻した後に行う作業をまとめました。
私用備忘録になりますが、参考になれば・・・

目次

1. Google Analytics トラッキング コードの追加
   
2. Google Analyticsのフィルタ設定（オプション）
   
3. Bing 認証用metaタグの導入
   
4. FacebookのOGP(Open Graph Protocol)に対応
   
5. ウィジェットの再配置
   
6. カスタム 404 ページの再設定（オプション）
   
7. モバイル テンプレートの検討
   
8. サイトを調査、軽量化が出来るか検討
   
9. CSSとJavaScriptを外部サイトへ移動（オプション）
   
10. 構造化データの設定(hatom)
11. ブログ記事投稿用スキーマの設定(BlogPosting)

１．Google Analytics トラッキング コードの追加

カスタム テンプレートによっては、ダッシュボードの設定[Google Analytics]が適用されない場合があります。
その場合は、テンプレートへ追記する、ないしは外部ファイルを導入し対処します。
Google Analyticsの統計情報が激減した場合は、トラッキング コードの見直しが必要です。
詳しくは下記記事をご覧ください。

Blogger テンプレート変更後にGoogle Analyticsの数値が激減～Universal AnalyticsとBlogger.jp リダイレクト

２．Google Analyticsのフィルタ設定（オプション）

１のクロスドメイン トラッキング コードを導入した場合、Google Analyticsのアクセス履歴を見るとblogger.comのコンテンツを見ているか、blogger.jpのコンテンツを見ているか、判別がつきません。
判別するため、Google Analyticsのフィルタ設定を導入しアクセス履歴各ページにURIを付加させます。
設定方法は、FOUR FUSIONさんのブログ記事を参考にさせてもらいました。ありがとうございます。

Google Analyticsで複数のサブドメインをトラッキングする方法 - FOUR FUSION Web Marketing Blog

不要だと思う方はスキップしましょう。

３．Bing 認証用metaタグの導入

検索大手の一つ、マイクロソフト社検索サービス「Bing」があります。
日本国においては、Internet Explorerの利用者数が多く、デフォルト ページがBing.comのままにしているユーザが少なくないと思います。
自分のブログ記事が検索結果に表示されやすくするため、サイトの所有権を認証するため「metaタグ」をテンプレートに追記します。

上記Metaタグの取得は、Bing Web マスター ツールからどうぞ。

http://www.bing.com/toolbox/webmaster

４．FacebookのOGP(Open Graph Protocol)に対応

記事投稿後に追加した個所になります。
FacebookのOGP（Open Graph Protocol）なる仕様への対応をします。
先ほど導入したばかりですので、詳しくはWill feel Tipsさんのブログ記事をご覧ください。

FacebookのOGPをBloggerに対応させる方法 - Will feel Tips

５．ウィジェットの再配置

ダッシュボードの[レイアウト]設定からウィジェットの再配置をします。
テンプレート変更後は絶対に配置がおかしくなっていますので。

６．カスタム 404 ページの再設定（オプション）

私はカスタム 404 ページを設定しています。画像を表示させているだけ。

カスタム テンプレートを導入すると、post-bodyの幅が変化するので、最適化します。

７．モバイル テンプレートの検討

Bloggerは、PC・モバイル共用のテンプレートと、モバイル専用のテンプレートを選択する事が出来ます。
カスタム テンプレートの導入に合わせて、モバイル デバイスでPC用テンプレートを使用するのか、モバイル用テンプレートを使うのか検証した上で設定しましょう。

私は最近流行りのレスポンシブWebデザインを導入し、デバイス毎にテンプレートを用意する必要がない点、デバイス毎に最適化された見易さ、2点を非常に気に入っています。
しかし、Android等スマートフォンの一部では、スペックが貧弱なためレスポンスの非常に悪いサイトだと感じました。
検証を重ねた結果、最終的にBloggerが用意しているモバイル テンプレートを使用しています。

2014.08.22 追記

レスポンシブWebデザインを導入＋余計なウィジェットを非表示にしたい場合は

mobile='yes'

title='注目記事' type='PopularPosts'>のように[mobile='']を記述して対応する事も出来ます。

８．サイトを調査、軽量化が出来るか検討

ある程度設定が完了したところで、サイトを調査します。
調査結果をもとに、可能な限りサイトの軽量化を検討します。
自身のサイトで出来ていない事もありますが、ポイントをいくつか。

• GoogleのPageSpeed Insightsを利用し、サイトを調査
  URLを入力すると、PCサイト、およびモバイル サイトでの調査結果が表示されます。
  問題点を指摘してくれるので、非常に便利です。
  http://developers.google.com/speed/pagespeed/insights/
  
• 画像の軽量化
  1KB単位で削る、というよりは100KBの画像を20KB程度まで品質を落とすだけで効果があります。
  http://touch-slide.jp/column/655/
• CSSの軽量化
  http://www.find-job.net/startup/10-js-css-compressors
• JavaScriptの軽量化
  同上
• 不要なウィジェット/広告の撤去
  ブラウザの開発ツール（F12ボタン）を利用し、悪影響を及ぼすウィジェット/広告を確認、撤去します
• Read Moreの導入
  ホーム画面で、記事全体を見せず行頭だけを表示する機能を導入する事が出来ます。
  http://nasunoblog.blogspot.jp/2012/03/blogger-readmore.html
  又は、各記事に追記の区切りを挿入する（<-- more --&ft;）事も念頭に入れるといいかもしれません。

理想は、

1. 全てのデバイスにおいて
2. ノイズ（広告等）がなく
3. 素晴らしいコンテンツが
4. 瞬時に閲覧できる

Webサイトが素敵であり、利用したいですよね。
私は残念ながら出来ていませんが・・・

９．CSSとJavaScriptを外部サイトへ移動（オプション）

これは好き嫌いがあると思いますが。
全ての作業が完了した後、私はCSSとJavaScriptを外部ファイルにしてしまい、外部サイトへ移動させています。
理由は、出来るだけテンプレートは触らず、変更しやすい部分のメンテナンス コストを下げるためです。
ファイルの格納先は、Google Drive、またはGoogle Contentsにしています。
他社クラウド ストレージ サービスも対象としていいと思いますが、私は読み込み速度を考慮してみました。
テンプレートだけで管理したい方は、スキップしましょう。

10.構造化データの設定

カスタム テンプレートに変更、又は標準テンプレートに変更した場合、Google Webmaster Toolを確認しましょう。
その際、よくあるエラーとして「構造化データの設定不備」があります。

セルティスラボさんのブログ記事「WordPress で構造化データエラー（entry-title, updated, author）にハイブリッド対応」を拝見したところ、構造化データ（hatom）の記事投稿時に必要なプロパティとして

• タイトル（entry-title プロパティ）
• 公開日（published プロパティ）
• 更新日（updated プロパティ）
• 著者（author プロパティ）

の設定が必要との事。

updated プロパティを追記

キーワード[timestampISO8601]を検索します。

<abbr class="published" expr:title="data:post.timestampISO8601" itemprop="datePublished">

class属性に[updated]を追記します。

&t;abbr class="updated published" expr:title="data:post.timestampISO8601" itemprop="datePublished">

標準テンプレートでは修正箇所が2か所あるので、どちらも修正します。

author プロパティを追記

別の記事にまとめました。

Blogger 構造化データのAuthor エラーを対処する～Google ウェブマスター ツール

キーワード[vcard]を検索します。

<span class='post-author vcard'>

class属性に[auther]を追記します。

<span class='post-author author vcard>

徐々にエラー数が減っていきます

上記設定を適用後、徐々にエラー数が減少していきました。

11.ブログ記事投稿用スキーマの設定(BlogPosting)

構造化データの設定不備にある「Testing Tool」を使うと、今度はブログ投稿用スキーマの設定不備が見つかりました。

schema.orgの記事「BlogPosting」を確認すると

• image_url プロパティ
• blogId プロパティ
• postId プロパティ

はプロパティ一覧にないため、何らかの修正が必要です。
修正方法は、電脳ノートさんのブログ記事「ウェブマスターツールの構造化データで hatom エラーの解消」を参考にさせていただきました。

firstImageUrlのimage_url プロパティを修正

キーワード[data:post.firstImageUrl]を検索します。

<meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>

文字[image_url]を[image]に修正します。

<meta expr:content='data:post.firstImageUrl' itemprop='image'/>

thumbnailUrlのimage_url プロパティを修正

キーワード[data:post.thumbnailUrl]を検索します。

<meta expr:content='data:post.thumbnailUrl' itemprop='image_url'/>

文字[image_url]を[image]に修正します。

<meta expr:content='data:post.thumbnailUrl' itemprop='image'/>

標準テンプレートでは修正箇所が2か所あるので、どちらも修正します。

blogId プロパティ及び PostId プロパティを削除

キーワード[data:blog.blogId]を検索します。

<meta expr:content='data:blog.blogId' itemprop='blogId'/>
<meta expr:content='data:post.id' itemprop='postId'/>

標準テンプレートでは2か所あるので、どちらも削除します。


前述の10番と11番の設定をするとTesing Tool上のエラーはなくなりました。

変更履歴

• 2014.05.09 加筆
  OGPを追記しました。
• 2015.02.25 加筆
  構造化データ及びブログ記事投稿用スキーマの設定を追加しました。