【内部SEO対策】OGPの<meta>タグとOGP画像の設定方法
OGP(Open Graph Protocol)とは、
FacebookやTwitter等のポストで、
画像、タイトルや説明など、シェアをした際の表示を決めるための設定です。
OGP設定をしていないと、例えばシェアされた時に
意図していない画像などが自動で選ばれて表示されてしまったりするので、
内部SEO対策のひとつとして、設定をしておきたい部分になります。
wordpressだとプラグインを使う方が多そうですが、
手動で入れるときにさっと使えるよう、
基本的に必要な設定をまとめてみました。
OGPの設定の方法
OGPの宣言を追加
最初に、ページでOGPを使います、という宣言を<head>に追加します。
宣言がなくてもOGP表示はされるものの、
正しく認識するための正式な記述として、追加しておくのがおすすめです。
ちなみに、Facebookでは<head>タグに追加、
公式サイトの場合、<html>タグに追加の事例が紹介されています。
どちらのタグにつけるかについては、prefixの対象範囲が変わるという違いなので、
今回の、<head>〜</head>内にOGP設定をする際には
どちらでも大丈夫のようです。
<head prefix="og: https://ogp.me/ns#">
<head>内に<meta>の基本的なタグを追加
次に、<head>〜</head>内に基本的な<meta>要素を追加していきます。
<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="ページの種類 website or article" />
<meta property="og:description" content="ページの説明文" />
<meta property="og:url" content="ページのURL" />
<meta property="og:image" content="サムネイル画像のURL" />
<meta property="og:site_name" content="サイトのタイトル" />
| og:title | シェア画面に表示されるページのタイトルを記入します。 例えば、SNS上でのタイトルをより目をひく表現にして、 検索エンジンで出るページのタイトルとは変更することも可能です。 |
| og:type | ページのコンテンツの種類を記入します。 トップページだとwebsite、下層ページはarticleになります。 (タイプが未指定の場合はwebsiteがデフォルト。) blogというのもある、と聞いたことがありますが、 公式サイトに記載がないので、 基本ウェブサイトは2種類から選んでおくのが無難です。 |
| og:description | ページのコンテンツ内容を説明する文を簡潔に記入します。 |
| og:url | シェア画面に表示される画像を設定します。 こちらも絶対パス(https://〜)のURLにします。 |
| og:site_name | サイトの名前を記入します。 |
Facebookの<meta>タグ設定
Facebookインサイトを使いたいときは、<head>〜</head>内に下記も追加していきます。
Facebookインサイトで、シェア画面の閲覧数などの分析をすることができます。
<meta property="fb:app_id" content="App_ID">
Facebook for Developersを開き、「Get-started」(日本語だと「スタートガイド」)
からApp-IDを取得して使います。
また、Facebookでシェアするとき用に、
事前にサムネイル画像のサイズ指定をしておくと、
Facebookのクローラーに知らせて初回のシェア時もすぐに表示することができます。
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
Twitterの<meta>タグ設定
Twitter用に、画像の大きさ(カードタイプ)を<head>〜</head>内に指定します。
全部で4種類(Summary / Summary Card with Large Image / App / Player)のカードタイプのうち、
普通のサイトだとSummary / Summary Card with Large Imageの2種類が使われ、
省略するとSummeryサイズになるようです。
<meta name="twitter:card" content="summary or summary_large_image" />
Twitter のユーザー名も指定したい場合は、@以下にユーザー名を入れ、下記も追加します。
<meta name="twitter:site" content="@username">
そのほかの<meta>タグ設定
任意ですが、地域や言語を知らせることもできます。
<meta property="og:locale" content="ja_JP" />
| 日本語 | ja_JP |
| アメリカ英語 | en_US(デフォルト値) |
| イギリス英語 | en_GB |
複数の言語を使っている場合は、例えば下記のように記載します。
<meta property="og:locale:alternate" content="ja_JP" />
<meta property="og:locale:alternate" content="en_US" />
<meta property="og:locale:alternate" content="fr_FR" />
OGPの画像の設定
設定ができたら、OGPに使う画像を用意します。
それぞれ調べて見てみると、
| Min 1200×630 px (1.9:1) | |
| Min 300×157 px (2:1) (Summary with large image) | |
| Min 144×144 px (1:1) (Summary Card) |
となっており、比率が異なってもトリミングをしてくれるので、
一般的に1200 x 630pxのサイズで作成します。
見せたい内容が中央の正方形内に収まるようにしてあげると
切り取られてもバランスが良くなります^^
画像があればすぐ作れるよう、こんなサイトもあります。
完成後に、見た目をチェックしたい時は
OGP画像シミュレータのサイトが便利です！
OGP設定後のチェック
OGP内容の設定、画像の設定も終わって、
公開後のチェックをしたい時は、下記のサイトから
アカウントにログインをして確認をすることができます。
Twitter card validator
Twitter card validatorのページから、
Card URLに確認したいURLを入力してプレビューをします。
Facebook Sharing debugger
Facebook Sharing debuggerのページから、URLを記入してデバッグボタンを押します。
OGP画像の更新の方法
設定したとおりに表示されていない時や、
画像を変えたりして更新した時は、
Facebook、Twitterどちらもキャッシュが残っていることが考えられるため、
上記のデバッグサイトからURLを入れて更新を行うのがおすすめです。
再度読み込みをすることで、
残っているキャッシュをクリアして正しく反映をさせることができます。
それでも上手く行かない場合は、画像の名前を変えて、
画像のURL自体も変えるという手段もあります。
まとめ
最後に改めて、今回紹介したOGP設定をまとめてみました。
<!-- OGP宣言 -->
<head prefix="og: http://ogp.me/ns#">
...
<!-- 基本の設定 -->
<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="ページの種類 website or article" />
<meta property="og:description" content="ページの説明文" />
<meta property="og:url" content="ページのURL" />
<meta property="og:image" content="サムネイル画像のURL" />
<meta property="og:site_name" content="サイトのタイトル" />
<!-- Facebookの設定 -->
<meta property="fb:app_id" content="App_ID" />
<!-- サイズの設定 -->
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<!-- Twitterの設定 -->
<meta name="twitter:card" content="summary or summary_large_image" />
<meta name="twitter:site" content="@username" />
<!-- 言語の設定 -->
<meta property="og:locale" content="ja_JP" />
<!-- 言語の設定(複数の場合) -->
<meta property="og:locale:alternate" content="ja_JP" />
<meta property="og:locale:alternate" content="en_US" />
</head>
文章だけでは伝わりにくい部分も、
視覚を通してさらに魅力的に伝えることがしやすくなるので、
少し面倒ではありますが、ぜひおすすめしたいです。
また、ほかにも色々な設定が可能なので、
公式のThe Open Graph protocolのサイトも参考になります。
最後までご覧いただき、ありがとうございました！
