FacebookとTwitterでブログ記事をシェアした時に”正しい”タイトルや画像を表示させる方法

ブログを書いて公開する。そのあとFacebookやTwitterに投稿する。恐らくここまでがセットになっているのではないでしょうか。
これはWordPressだろうがはてなブログだろうが、その他のブログサービスでも同じです。

FacebookやTwitterに記事のURLを書いたものの「SNSのタイムラインに記事の画像が出てこない!!」となったことはありませんか？
他のブログは記事の画像やタイトルが表示されているのに、なぜ自分のブログは表示されないのか気になりませんか？
実は正しい設定をして、一手間かけるとこんな感じで記事のリンクが張られるんです。

Facebookだとこう。

Twitterだとこうです。

このように表示されるためにはHTMLタグの設定が正しくされていて、さらにSNSに投稿する前にちょっとした作業が必要なんです。
今回はその方法をご紹介します。
ちなみにこのような表示形式を「カード型」と言ったりします。

OGPとTwitterカードの設定をソースコードに書く

恐らくはてなブログなどのブログサービスを使っている方は何を言っているかわからないかもしれません。
しかし、はてなブログを含む多くのブログサービスは最初からこの設定がされているので読み飛ばしてもらって大丈夫です。

WordPressなどでブログを自作している方のみ参考にしてください。

OGPとTwitterカードに関するHTMLタグはHTMLファイル内にこのように書かれています。
先日投稿した20万円台でバンクーバーへのビジネスクラスとホテルを予約できた記事を例に進めます。
この記事のソースコードを読むとheadの中にこのような記述があります。

<meta property="og:title" content="ANA旅作でバンクーバーのビジネスクラス&#038;ホテルを20万円台で予約できた話 | tabosque.com" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://www.tabosque.com/travel/171" />
<meta property="og:image" content="https://www.tabosque.com/wp-content/uploads/2016/11/burrard-bridge.jpg" />
<meta property="og:site_name" content="tabosque.com" />
<meta property="og:description" content="ANAの旅作には時々プレミアムエコノミーやビジネスクラスが激安でゲットできることがあります。いわゆる「旅作料金逆転現象」です。今回は逆転現象を利用しバンクーバー便を予約しました" />
<meta property="article:published_time" content="2016-11-21T00:26:29Z" />
<meta property="article:modified_time" content="2016-11-21T14:26:08Z" />

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@tabosque" />
<meta name="twitter:title" content="ANA旅作でバンクーバーのビジネスクラス&#038;ホテルを20万円台で予約できた話 | tabosque.com" />
<meta name="twitter:description" content="ANAの旅作には時々プレミアムエコノミーやビジネスクラスが激安でゲットできることがあります。いわゆる「旅作料金逆転現象」です。今回は逆転現象を利用しバンクーバー便を予約しました" />
<meta name="twitter:image" content="https://www.tabosque.com/wp-content/uploads/2016/11/burrard-bridge.jpg" />

この前半部分がFacebookで使われるOGPというものです。そして後半部分がTwitterで使われるものです。
それぞれ記事のタイトルや概要、画像などが設定されています。
FacebookやTwitterに記事のURLを投稿した時にはここに書かれている内容が表示されます。

具体的にどのようなタグを設定すれば良いかは、それぞれの公式ページでご確認ください。

WordPressを使っていて手っ取り早くこれらの設定をしたいという方はAll in One SEO Packというプラグインを入れると簡単です。
プラグインでOGPやTwitterカードを設定する方法はバズ部さんの記事を参考にしてみてください。

FacebookやTwitterに記事のタイトルや画像を認識させる

ブログ記事のソースコードに記事のタイトルや概要、画像を設定するということがわかりました。(はてなブログなどでは自動的に設定されています)
しかし、それだけでは不十分です。

FacebookやTwitterに何が書いてあるかを知らせなければいけません。
この作業は、はてなブログなどのブログサービスを使っていても必要です。
それでは実際の方法をご紹介します。

Facebookの場合

Facebookの開発者向けのツールにSharing Debuggerというものがあります。

このページにアクセスするとURLを入れられる部分があります。ここにブログ記事のURLを入力し、Debugボタンを押せば終わりです。

正しく記事のタイトルや画像が読み込めていると以下のような表示がされます。

もし、正しく読み込めていない場合には、1, 2分待った後に「Scrapte Again」ボタンを押してください。
正しく読み込まれない場合には少し待つというのがポイントです。すぐにボタンを押しても変わらない場合があるので注意してください。

Twitterの場合

Twitterの場合も基本的にはFacebookの時とほとんど同じです。
Card validatorというツールを使います。

Card ValidatorにもURLを入れられる部分があります。記事のURLを入力し、「Preview card」ボタンを押してください。

正しく読み込めていればこのように表示されます。

Twitterの場合もうまく表示されなければ、少し待った後に再度「Preview card」ボタンを押してください。

まとめ

ブログ記事を書いたらSNSに投稿するというのは当たり前になってきました。
SNSから記事への流入を増やしたいなら、このようにカード型の表示をさせるのが鉄則です。
そのためにも数分の手間をかけてしっかりと正しいタイトルや概要、画像が表示されるようにしましょう。

もう一度復習です。

この一手間であなたのブログのアクセスアップは間違いありません。(たぶん)