head内の要素の記述はマスト
レスポンシブECサイトを運用する上で、ページへのTITLEタグやmeta descriptionタグの設定は、Googleなどの検索エンジンだけでなく、各SNSへ適正にサイト情報を定義する上で設定しなければなりません。またこれらのタグ以外にもHEAD内に設定しておきたいタグは多数ありますのでご紹介します。
ファビコンの設置
ファビコンとは、アドレスバーやタブに表示されるアイコンです。ブックマーク(お気に入り)リストやデスクトップに保存した際にも表示されます。ユーザビリティやサイトの再訪問率にも大きく影響するため、サイトを表すアイコンや企業のロゴマークを設置しておきます。
ファビコンを設定するには、.icoファイルの画像を準備（※）して、head内下記の記述で読込をします。
<link rel="shortcut icon" href="http://example.com/img/favicon.ico">
※favicon画像は「.png」や「.gif」でも表示可能ですが、古いブラウザは対応していないケースあります。
Googleアナリティクス設置
無料解析ツールのスタンダード、Googleアナリティクスも忘れずに設定しておきましょう。細かい設定方法等はGoogleの公式サイトに解説されているのでご参考ください。
ちなみに弊社の提供する、レスポンシブECサイト構築ASP、aishipRでは、Googleアナリティクスで発行されたプロパティIDを管理画面内で設定するだけで、全ページにタグの設置が行われます。
Googleサーチコンソール（旧名称：ウェブマスターツール）のタグ設置
Googleサーチコンソール（旧名称：ウェブマスターツール）はサイトの状態を確認する上で必須ツールです。HTMLタグ(メタタグ認証）で表示されるタグをサイトのHEAD内に埋め込みます。簡単な作業ですので、是非やっておきましょう。
canonicalタグの設置
canonicalタグとは異なるURLを正規化する際に使用できるタグです。類似ページを重複ページとして扱われないようにするために、類似ページがある場合は、どのURLを「親」ページとして扱うか指定しておきましょう。
http://example.com/A
http://example.com/B
上記のようにAB2つのページが存在し、コンテンツもほぼ同じで、Aを正規のページとする場合、Bのページのhead内にcanonicalタグを以下のように記述します。
<link rel="canonical" href="http://example.com/A">
検索除けタグの設置
シークレットページ等、検索エンジンからの流入を受け付けたくない場合やSEOを実施する上で戦略的にインデックスさせたくない場合に、このタグを設置することで、Google 検索に表示されないようコントロールできます。
<meta name="robots" content="noindex,nofollow,noarchive" />
OGPの設置
以下の設置をすることで、SNSでシェアした際の画像やテキストを指定することができます。
OGPを設定していないと、ページのタイトルやmeta description（もしくは本文の冒頭のテキスト）がそのまま表示されてしまいます。SNSでバズらせる為にも、各ページごとのOGPをしっかり設定しておきましょう。
「各SNS OGP」で検索するとそれぞれの記述方法の詳細が出てきますので、是非検索ください。
ピンチイン・ピンチアウト操作の許可
レスポンシブサイトでの構築の場合、各デバイスに最適化されたレイアウト表示が可能ですが、例えばサイト閲覧者の意思によるピンチアウト操作により、商品画像を拡大して表示させたい場合などに有効です。
<meta name="viewport" content="width=device-width,initial-scale=1.0">
最後に
いかがでしたでしょうか。一言にhead内と言っても様々な要素を記述することができます。一昔前まではタイトルやディスクリプション、キーワード程度だったのに比べると、自由度は本当に大きくなりました。
みなさんも是非ご参考に、head内に記述してください。
葉糸
