"サイトの外" での見た目をチェックする

2018/5/01

SNS全盛の昨今、Webサイトの「外」での見た目も気にしてみましょう。

なんらかのソーシャルメディアをご利用なら、共有されたWebサイト（ページ）の概要がソーシャルメディア内で見られることを知っているかもしれません。
その共有されたページのタイトルと簡単な概要文、画像が表示されるのが一般的です。
こういった、サイトの外に”埋め込まれる”情報を、ここでは「埋め込みデータ」と呼ぶことにします。
ソーシャルメディア以外でも、例えばニュース系サイトなどでも埋め込まれることがあります。

埋め込みデータの内容はWebサイト内のHTMLソース（metaタグ）に共有用の情報を記載することでコントロールできるのですが、うまく活かせていないケースもあります。

必ず3要素は必須とする

記載できる情報はいくつかあるのですが、そのなかでも以下は必須とします。

1. タイトル

そのページを表すタイトルで、はいわゆる「ページタイトル」ではなく「内容のタイトル」です。
ページタイトルの場合はサイト名なども入っていることが多いため、純粋にページ内容を表すタイトルとします。

2. 概要文

タイトルを補足する概要文です。
可能な限り簡潔かつ興味を引く内容で記述し、タイトルと同じ言葉は避けるようにします。

3. 画像

文字よりも目を引くため画像は必須です。
内容にマッチする画像が用意できない場合、無理に関連の薄い画像を使用せず、サイトのロゴや会社名などを使用してブランディングに役立てます。
ただし、サイトのロゴ画像を使いまわすようなことはせず、埋め込みデータ用に別途作成します。

埋め込みデータの仕組み

近年は情報の記載方法が標準化しつつあり、Facebook社が提唱した「OGP(Open Graph protocol)(オープングラフプロトコル)」という規格に沿うのが一般的です。
主にHTMLソースの “metaタグ” として記載する方式です。

例として以下のように og: が付く名前で記述します。

<meta property="og:title" content="タイトル">
<meta property="og:image" content="画像のURL">
<meta property="og:description" content="概要文">

各外部サイトは、この情報を収集して自サイト内に”埋め込み”ます。

主な埋め込まれ方

Facebookシェア

Facebookに投稿する際、URLを記述すると、そのWebページの埋め込みデータが表示されます。
正しく埋め込みされるかは以下の公式ツールでチェックできます。

シェアデバッガー

いちど埋め込まれると、キャッシュによりサイト側で変更しても変わりません。
もし埋め込みデータが間違っていた場合、上記のツールで「もう一度スクレイピングする」を実行してリセットできます。

Twitterカード

Twitterのツイート内で表示されます。

Twitterカードの仕様（英語）

Twitterカードの場合は以下の例のように twitter: という独自の名前が利用でき、 twitter:card という行が必要になるのでご注意ください。

<meta name="twitter:card" content="summary">

主要3要素（タイトル、概要文、画像）は前述の「OGP」で記述されていれば問題ありません。

正しく埋め込みされるかは以下の公式ツールでチェックできます。

Card validator

リッチスニペット

Googleの検索結果等に表示されるカード型コンテンツです。
こちらに関しては、表示されるか否かはGoogle側の判断ですのでサイト側でコントロールするが難しいですが、設定しておいて損はないでしょう。

「Google+」でのリッチスニペット表示は前述のOGP設定で賄えます。
参考：ソーシャルディスカバリー

Google検索結果でのリッチスニペットは、主に「構造化データ」が重要視されます。
構造化データの記述方法は metaタグ以外にも「JSON-LD」形式や「microdata」形式などの方法があります。
詳しくはGoogleヘルプの検索結果のリッチスニペットをご覧ください。

また、構造化データに関しては以前に当ブログで言及していますので、併せてご参考ください。
ポータルサイトと構造化データ

構造化データが正しく設定されるかは以下の公式ツールでチェックできます。

構造化データテストツール

AMP（Accelerated Mobile Pages）

Googleが提供する、検索結果から記事までの導線を高速化する仕組みです。
ページ自体はサイト内で作成しますが、表示はGoogleのサーバー上（キャッシュ）ですので「サイト外」の扱いとしています。
埋め込み型よりできることが多いため、こちらに関してはデザインをしっかり考える必要があります。

AMP公式サイト
https://www.ampproject.org/ja/

現在のところ主にニュースやブログにしか適用されない状況ですが、拡大する可能性はあります。
しかし、Google側はAMPページの有無や内容で表示順位が変わることはないと断言していますので、SEOの対策ではなく純粋にユーザーの利便性のために作成します。

正しく表示されるかは以下の公式ツールでチェックできます。

AMPテスト

以上、サイトの外での見た目について紹介しましたが、これに加えて重要なのは「計測」でしょう。
見た目を整えた効果がどれほどかを計測することで、さらなる改善点を発見できると思います。
弊社ではSEOコンサルティングやWebコンサルティング等でアクセス解析に基づく分析も行います。
ポータルサイト運営にお役立てください。