2020-06-06

Twitter/Facebook/LINEのシェア映えを改善する❓❗【プロエンジニアも知らないOGPの話】

Twitter/Facebook/LINEのシェア映えを改善する❓❗【プロエンジニアも知らないOGPの話】

プロエンジニアが教えるTIPSシリーズ。 明日の話のネタ、生産性向上になるネタをお伝えします。

今回は、あなたのTwitter/Facebook/LINEのシェア映えは大丈夫ですか❓❗ OGPを設定しているしていないでは、ユーザーへの印象が全然違います。 これまた簡単にサイトの印象を変えられるのですが、残念なことに知らないエンジニアは多いです。

OGP(Open Graph protocol)とは

誤解を承知で言えば、OGPはSNSでURLをシェアした際のアイキャッチ画像を表示するための規格です。

コンピューターは、何がアイキャッチ画像か判断できません。 ブログの記事で表示している画像の中から、アイキャッチ画像を特定するのは、人間にとっては朝飯前ですが、コンピューターにとっては難しいことです。 しかし、人間がOGPという決められたルールでアイキャッチ画像を指定してやると、簡単にアイキャッチ画像を表示することが出来ます。

OGPの例

Twitterに自分のブログのURLを貼り付けたときのスクリーンショットを見てみましょう。

OGP無し

OGP無し

OGP有り

OGP有り

OGPの有りなしでは、目立ち方に大きな差が有ることが分かると思います。 これにより、クリック率の工場、ページの閲覧数の増加が期待できます。

設定方法

Facebook/LINEでの設定方法

非常に簡単です。 サイトの各ページのHTMLのヘッダ(タグとタグの間)に次のようなタグを追加するだけです。 こうすることで、Facebook/LINEのシェア映えは完了です。

ちなみに、規格は英語ですがThe Open Graph protocol で公開されています。 Facebookに関する情報は、リンクシェアの画像 で公開されています。

<meta property="og:title" content="ページタイトル">
<meta property="og:description" content="ページの概要">
<meta property="og:type" content="article">
<meta property="og:url" content="ページのURL">
<meta property="og:image" content="アイキャッチ画像のURL">
  • og:type は、個別の記事は、article。それ以外のページは、websiteを利用する慣例になっています。
  • og:image の画像は、1200x630 ピクセルのPNG画像を使用するのがよいかと思います。

Facebook/LINEの表示確認方法

シェアデバッガー で確認することが出来ます。

Facebookの見え方例

Facebookの見え方例

Twitterでの表示方法

ドキュメントは、英語ですが Optimize Tweets with Cards 記載されています。

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="アイキャッチ画像のURL">
<meta name="twitter:title" content="ページタイトル">
<meta name="twitter:description" content="ページの概要">
  • twitter:card は、表示方法です。summary_large_image としておけば良いでしょう。
  • twitter:image の画像は、Facebookの表示も考慮して、1200x630 ピクセルのPNG画像を使用するのがよいかと思います。

Twitterの表示確認方法

Twitterでの表示は、Card validator で確認することが出来ます。

Twitterの見え方例

サンプル

<meta property="og:title" content="Twitter/Facebook/LINEのシェア映を改善する❓❗【プロエンジニアも知らないOGPの話】" />
<meta property="og:description" content="今回は、あなたのTwitter/Facebook/LINEのシェア映えは大丈夫ですか❓❗OGPを設定しているしていないでは、ユーザーへの印象が全然違います。" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://nuko2.com/post/it/ogp-open-graph-protocol/" />
<meta property="og:image" content="https://nuko2.com/images/theme-color/theme-color-of-chrome-addressbar.png" />

<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="https://nuko2.com/images/theme-color/theme-color-of-chrome-addressbar.png"/>
<meta name="twitter:title" content="Twitter/Facebook/LINEのシェア映を改善する❓❗【プロエンジニアも知らないOGPの話】"/>
<meta name="twitter:description" content="今回は、あなたのTwitter/Facebook/LINEのシェア映えは大丈夫ですか❓❗OGPを設定しているしていないでは、ユーザーへの印象が全然違います。"/>

さいごに

OGPを設定しているしていないでは、ユーザーへの印象が全然違うため、ページ参照数が大きく変わってきます。 これまたサイトに少しだけタグを追加するだけなので是非ともチャレンジしてください。