【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

レスポンシブECサイトでHEAD内に設定しておきたい要素一覧

レスポンシブECサイトでHEAD内に設定しておきたい要素一覧

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内に埋め込みます。簡単な作業ですので、是非やっておきましょう。

参考:Search Console アカウントを設定する

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内に記述してください。

葉糸

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+