かとのぼのマイコード・マイライフ

個人開発者かとのぼのプログラミングと雑談のブログです。たまに読書と銭湯も

ogp画像をサイトに設定してTwitterとFacebookのシェア拡大を狙おう【SEO対策】

f:id:katonobo:20190823171437p:plain

ogp画像とは?

ogpとは「Open Graph Protocol」の略で、TwitterやFacebookでURLがシェアする時に必要な情報で、ogp画像はシェアされた記事で表示される画像のことを言います。

以下の私のツイートで表示されているIT風の画像がogp画像です。

 ogp画像があるかどうかでインパクトが違ってきます。SNSでシェアされたリンク自体にはSEOの効果はありませんが、シェアが増えて多くの人の目に止まればリンクを獲得できる可能性は増えますので甘く見ずにしっかり対策をするべきです。

大手のブログやウェブサービスを使う場合は、アイキャッチ画像という項目があるのでそこに該当する画像を設定すれば終わりです。

ただ、個人開発で、自分で一からサービスを開発している場合は、自分でちゃんとコードを書いて設定する必要があります。

ogp画像を設定する方法

ogpは、HTMLのhead要素の中に記述をします。「index.html」とか「.html」の中ですね。

ポイントは以下です。

  • Twitterのカードの種類は、summaryかsummary_large_imageを選びます
  • Twitterのユーザー名は、もし特定のユーザーがいないときは「""」で空にしておきます
  • Facebook上でOGP画像を表示させる場合は、fb:app_idを書きます 

ogp画像を適切に設定してサイトのシェアを狙おう

opg画像の設定は個人開発の当初は面倒に思うかもしれませんが、ちゃんと設定しているかどうかでSNSでシェアされる確率が変わってきます。

現在のウェブサービス開発では必須な対策だと思いますので、しっかりとogp画像を設定しましょう。

ogp画像がちゃんと設定できているかの確認は、Twitter Card validatorを使えば確認できます。

https://cards-dev.twitter.com/validator

このサイトに自分のシェアしたいサイトのURLを貼って確認します。

うまく画像が表示されれば成功です。

 

個人開発とSEO対策で参考になる記事:

www.katonobo.com

www.katonobo.com

www.katonobo.com

www.katonobo.com