SNSシェアが快適に！OGPを設定しよう

HTML
動点Qちゃん
動点Qちゃん

今日はサイトをSNSでシェアするときに必須なOGPの設定方法を勉強します・・・

動点P
動点P

うん、ところでこのブログ三か月くらい放置して無駄にサーバー代払ってなかった?

円周率π
円周率π

のんびりやればいいんだよ～

OGPとは？

Open Graph Protocol の略で、FacebookやX（旧Twitter）などSNSでシェアした際に、Webページのタイトルや内容、イメージ画像、URL含めた詳細情報を伝え、見てもらいやすくするためのhtml要素です。

OGPの設定方法

HTMLにはメタタグという、webサイトの内容を作るコードではなく、ホームページの設定などを記述するコードもかけます。
OGPはそのメタタグの一つで、タグの中に記述をします。

①まずprefix属性をつける

その際、head要素にprefix属性を追加し、OGPを使用することを宣言します。

og:プレフィックスをつけることで、「このメタタグはOGP仕様に基づいています」ということを知らせ、acebookやX、LinkedInなどのSNSがリンクの内容を正しく解析し、ページタイトルや説明文、画像などを適切に表示することができます。

HTMLのhead要素の開始タグ内に追記する

<head prefix="og: http://ogp.me/ns#">

②OGPの中身を設定してゆく

次はSNSでシェアされたときのために画像やサイトタイトル、内容などを設定していきます。

以下は主にfacebook用

<meta property="og:url" content=" ページのURL" />
<meta property="og:type" content=" ページの種類" />
<meta property="og:title" content=" ページのタイトル" />
<meta property="og:description" content=" ページの説明文80〜110字" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:image" content=" サムネイル画像のURL" />

Facebookでは1200 x 630ピクセルの画像サイズを推奨しています。

og:typeはページの種類で、TOPページの場合は「website」、記事ページなど、TOPページ以外には「article」を指定します。

以下がtwitter用

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="twitterユーザー名（あれば）">
<meta name="twitter:creator" content="コンテンツ作成者">
<meta name="twitter:title" content="サイトタイトル">
<meta name="twitter:description" content="サイト内容説明文">
<meta name="twitter:image:src" content="サムネ画像のURL">

1番目の twitter:card はカードの種類のことです。

  • 小さい画像と文章からなるサマリーカードの場合は”summary”
  • 大型画像付きサマリーカードの場合は”summary_large_image”と指定します。

魅力的な画像があり、ぜひとも画像を目立たせたい！という場合は大型画像付きを選びましょう。

OGPの確認方法

OGPを設定しても、本当にきちんと設定されているの？と不安になりますよね。シェアしたときに表示される画像などを確認できるサイトがありますので何個か紹介します。

OGPチェッカー・・・指定したサイトのOGPタグとX(Twitter)およびFacebookのOGP画像を確認できます。

シェアデバッガー・・・Facebookが公式に提供しているFacebookでシェアしたときにどう表示されるかを確認できるサイト。

ラッコツールズのOGP確認・・・facebook・twitter・はてなブックマーク・LINEでページをシェアした際のOGP画像・タイトル・説明文を表示（プレビュー）できる。

OGPを設定しておくことで、誰かがあなたのサイトを紹介しようと、サイトURLをシェアしてくれたときに、詳細でわかりやすい画像や内容をシェアできるようになります。

OGP画像が表示されないとき

上の表示確認サイトなどできちんとOGPの設定ができているにも関わらず、OGP画像が表示されないとき、理由は主にキャッシュだと思われます。

以前のキャッシュが残っていると、コードの変更が反映されていない場合があります。→
… Ctrl + F5 のキーを同時に押して、強制リロードしてみましょう。

SNS側のキャッシュをクリアしたり、wordpressでキャッシュを扱うプラグインを使っている場合も、一回キャッシュを削除してみましょう。

OGPは設定しないとダメ？

個人サイトを作っている場合

  • 個人の自由です。好きにしましょう。
  • SNSをやってるならつけた方がいいよ。

仕事で作っている場合、他人のサイトを作っている場合

  • お客様がSNSをやっているか、SNSでのサイト宣伝が必要か聞く。
  • OGP設定もきちんとしようとすると大変です。サイトの魅力的なコピーを作れと言われるかもしれません、重労働になりそうなら予算を取ることも必要かもしれません。
  • サイト作成の仕事の範囲内かどうかは各会社やサイト制作者個人によってしまうと思うので、わからないときは身近な人に聞いて見ましょう。

サイト作成を頼みたい場合

  • サイトの宣伝をSNSでもぜひしたい！というならOGPの設定をしてください！と頼みましょう
  • サイトの宣伝には文章も画像も大事な要素です。宣伝したい画像、文章を考えたい！と言う方は自分で考えて、こういうものを載せてほしい、と渡しましょう。原稿があるとサイトを作っている方はとても助かります。
  • 原稿内容がこれでいいのかわからない！という場合でも、そういう気持ちを素直に伝えてみると、大体いい感じにしてくれると思います！情報は細かくもらえると助かるサイト制作の方が多いと思いますよ。

コメント