AdRegion

ローカルビジネスの宣伝に必要な全てを

TwitterやFacebookで共有された時の表示をコントロールする

ホームページに訪れた人が気に入ってくれて、SNSでURLを貼り付けて投稿してくれた際に、画像付きでリンクが表示されると見栄えも良くて宣伝効果が高まります。その際に必要なTwitterカードやOpen Graphの設定について説明します。

HTMLの書き方

HEADタグ内に以下のようなMETAタグを追加します。ツイッターとフェイスブックでそれぞれ細かい違いがあるのですが、共通した部分をまとめ最小限のMETAタグだけで設定しています。

静的なサイトの場合シェアされる可能性が高いトップページだけでもOKです。WordPressならばプラグインで一括して設定したり、レンタルブログならば標準で対応していることもあります。

<meta property="fb:admins" content="XXXXXXXXXXXXXXX" />
<meta name="twitter:card" content="summary_large_image">
<meta name="og:title" content="投稿時に表示されるサイト名">
<meta name="og:description" content="投稿時に表示される説明文">
<meta property="og:image" content="画像のURLをフルパスで指定">

fb:admins

Facebookに反映させるにはIDの設定が必要です。個人のアカウントならプロフィールのURLか、FacebookページならばページのURLを下記のサイトに入力するとIDが表示されるので、それを設定します。

▽Find your Facebook ID
https://findmyfbid.com/

twitter:card

ツイッターはデフォルトだと小さい画像になるので、「summary_large_image」を設定します。

表示のテスト方法

設定がちゃんとできているかを確認するには以下のサイトからチェックします。

▽Twitterカードバリデーター
https://cards-dev.twitter.com/validator

▽Facebook シェアデバッガー
https://developers.facebook.com/tools/debug/

画像を準備する

og:imageに使用する画像は「800×419」ピクセルの大きさで作ります。

画像を使いまわして正方形のサムネイルで表示されることを考えるならばロゴなどは中央に配置して、左右が切れても大丈夫なように調整します。

実際の表示はこんな感じ!

気が向いたらポチッとリツイートをお願いします!

SNSでの拡散はSEO効果があるか?

SEOをかじったことがある人なら気になるSNSの被リンク効果ですが、サーチコンソールの「サイトへのリンク」に反映されないことからも効果がないと言い切れます。
しかし、Twitterの場合は連携している他のサイトから間接的にリンクを得ることもできる可能性があるので、全く効果がないというわけでもありません。