Twitter/Facebook/LINEのシェア映えを改善する❓❗【プロエンジニアも知らないOGPの話】
この記事の目次
プロエンジニアが教えるTIPSシリーズ。 明日の話のネタ、生産性向上になるネタをお伝えします。
今回は、あなたのTwitter/Facebook/LINEのシェア映えは大丈夫ですか❓❗ OGPを設定しているしていないでは、ユーザーへの印象が全然違います。 これまた簡単にサイトの印象を変えられるのですが、残念なことに知らないエンジニアは多いです。
OGP（Open Graph protocol）とは
誤解を承知で言えば、OGPはSNSでURLをシェアした際のアイキャッチ画像を表示するための規格です。
コンピューターは、何がアイキャッチ画像か判断できません。 ブログの記事で表示している画像の中から、アイキャッチ画像を特定するのは、人間にとっては朝飯前ですが、コンピューターにとっては難しいことです。 しかし、人間がOGPという決められたルールでアイキャッチ画像を指定してやると、簡単にアイキャッチ画像を表示することが出来ます。
OGPの例
Twitterに自分のブログのURLを貼り付けたときのスクリーンショットを見てみましょう。
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の見え方例
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の見え方例
有名ブロガーさんでも、Twitterでシェアしたときに残念表示になっている方がいるので書いた。
— ねこだいすき＠ぬこログ (@nekodai90697088) June 6, 2020
👇👇👇👇👇
Twitter/Facebook/LINEのシェア映を改善する❓❗【プロエンジニアも知らないOGPの話】 https://t.co/ABsiYgF1f5
サンプル
<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を設定しているしていないでは、ユーザーへの印象が全然違うため、ページ参照数が大きく変わってきます。 これまたサイトに少しだけタグを追加するだけなので是非ともチャレンジしてください。
