テーマ「Smart Blog」でcanonical属性を設定する
スマートフォン・オプションに標準添付されているテーマ「Smart Blog」を利用すると、PC向けページ、スマートフォン向けページのURLを共通化できます。SNSなどで情報をシェアするときに、スマートフォン、PCどちらで閲覧していても、それぞれに最適化されたページデザインを提供することができます。
一方、訪問経路が増えると共に、URLの末尾に「?foo=bar」などのパラメータが加えられることがあります。パラメータ付きのアクセスがまじると、同じページでも集計結果が複数に分散してしまうことがあります。
このような場合、「canonical属性」を設定して、集計結果を統一する方法があります。今回は、「Smart Blog」のテーマにcanonical属性を設定して、アクセス解析の結果を正規化する方法についてご説明します。
canonical 属性とは？
canonical属性とは、表示しているページの正統なURLを、検索エンジンや各種シェアサービスに提案するための指定方法です。ブラウザで実際に表示しているURLにかかわらず、canonicalで指定されたURLがそのページのURLとして優先的に利用されます。ちなみにcanonicalという英単語には、「正統な」という意味があります。
重複するURLを統一する canonical 属性
以下、５つのURLはそれぞれ同じ内容のコンテンツを表示するものとします。
(最後のURLは、PC向けページをモバイル向けに最適化しているページだとします)
http://www.example.com/
http://www.example.com/index.html
http://www.example.com/index.html?utm_source=test&utm_medium=test
http://example.com/
http://www.example.com/mobile/index.htmlの有無、wwwの有無、パラメータの有無など、ユーザは少しずつ異なる様々なURLで同じコンテンツにたどり着きます。この状況をそのままにしておくと、どうなるでしょう。
検索エンジンの場合は機械的に重複ページを名寄せし、システムが最適と判断したページをインデックスします。ですが、検索エンジンが最適と判断したページがこちらの意図しないURLである可能性も、また重複判断に失敗し複数インデックスされ検索評価が分散してしまうことがありえます。
このページをソーシャルブックマークしたり、ソーシャルメディアに投稿したりする場合も、同じくブックマーク数やツイート数、Like数などの数がURLごとに分散してしまうことになります。
これを回避するために、今表示しているページの正統なURLが何かを宣言し、各種サービスに提案することが出来るのが、canonical属性です。
Movable Typeでのcanonical 属性の指定方法
canonicalの基本
canonicalは、<head> タグ内に、以下のように1行追加します。
<link rel="canonical" href="http://www.example.com/"/>hrefの中の"http://www.example.com/"は、各ページごとに異なります。
例えば、このページの場合、以下のようになります。
<link rel="canonical" href="https://www.movabletype.jp/blog/canonical.html>このように指定しておくことで、wwwが無いURLでアクセスされても、検索エンジンその他各種シェアサービスからは、https://www.movabletype.jp/blog/canonical.html がこのページの正統なURLであるとみなされます。
Movable Type スマートフォンオプション付属テンプレートでの指定方法
ではcanonicalのMTでの設定の仕方を、スマートフォンオプション for Movable Type に付属している、Smart Blog 1.0 テンプレートの例で示します。
トップページ用
[メインページ] インデックステンプレート内、<head> ヘッダーにトップページURLを指定して、以下を追加
<link rel="canonical" href="<$MTBlogURL encode_url="1"$>" />個別ブログ記事ページ用
[ブログ記事] アーカイブテンプレート内、<head> ヘッダーに以下を追加
<link rel="canonical" href="<$MTEntryPermaLink encode_url="1"$>" />個別ページ用
[ウェブページ記事] アーカイブテンプレート内、<head> ヘッダーに以下を追加
<link rel="canonical" href="<$MTPagePermaLink encode_url="1"$>" />上記以外の指定箇所
忘れがちな場所も含めてリストアップしました。運営ポリシーにより、変わってくるかとは思いますが、設置場所の参考になれば幸いです。
- トップページと各枝葉の全ての静的ページ
- スマホ用、ガラケー用、印刷専用ページなど
- ECサイトなどでパラメータが違うだけで同じ商品を指しているような動的ページ
- 外部サイトにて自サイト記事を全文引用しているページ
Zenbackもcanonicalに対応しています
シックス・アパートのソーシャルメディア連携ウィジェットZenbackも、canonical属性でのURL指定に対応しております。各ページの <head> にrel="canonical"で指定されたURLがあれば、ZenbackはそれをページのURLと認識します。そして、URLに関連する情報を表示したり、そのURLをソーシャルメディアにポストする際に、canonicalで指定されたURLを実際のURLよりも優先して利用します。
プレゼンテーション
この内容を、社内で発表したときのプレゼンテーションをEmbedします。ご参考まで。
