SNS全盛期の必須項目 OGP設定の解説

SNS全盛期の必須項目 OGP設定の解説

OGP設定をしてSNSからの流入とCTRを改善する

#122 OGP設定

WEB制作

OGP設定をしてないとTwitterやFacebookなどでシェアしてもらうときにしょぼいテキストしか表示されないので、ここをしっかり設定することがSNSからの流入を増やす必須項目です。 目立つOGP画像を作ってガンガンシェアしてもらいましょう

公開日:
最終更新日:

サイトマップサイトマップ

OGPのタグを設定してSNSからの流入をふやそう

OGPタグと呼ばれるタグがあります。
OGPとはOpen Graph protocolの略称でMETAタグの1つなんですが、SNSなどに掲載される情報を指定するタグです。

OGPタグの実例

このサイトで設定しているOGPタグの一覧です。
前回UPしたカノニカルの記事のOGPタグになっています。

<title>SEOの必須項目 カノニカル設定とリダイレクト設定| Start Point
<meta name="description" content="canonical:カノニカルという設定をすることでサーチエンジンに正しいURLだと伝えることができます。URLは1つだと思っていても、実はいろいろなURLでアクセスできるんです。それをまとめて1つに集約することがカノニカル設定!">
<meta property="og:type" content="article" />
<meta property="og:title" content="SEOの必須項目 カノニカル設定とリダイレクト設定|Start Point" />
<meta property="og:description" content="URLの正規化というややこしい話なんですが、SEO上正規化をしておくことは必須項目というべき大事な設定です" />
<meta property="og:url" content="https://www.start-point.net/blog/web/seo/canonical/" />
<meta property="og:image" content="https://www.start-point.net/blog/web/seo/canonical/img/ogp.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://www.start-point.net/blog/web/seo/canonical/img/ogp.png" />
<meta name="twitter:site" content="Start Point" />
<meta name="twitter:title" content="SEOの必須項目 カノニカル設定とリダイレクト設定|Start Point" />
<meta name="twitter:description" content="URLの正規化というややこしい話なんですが、SEO上正規化をしておくことは必須項目というべき大事な設定です" />
<meta name="twitter:url" content="https://www.start-point.net/blog/web/seo/canonical/" />
<meta name="twitter:creator" content="@StartPoint02" />

一番上の「TITLEタグ」と「meta name="description"」はOGPじゃないんですが、関係あるので合わせて掲載しております。

色々書いてありますが、簡単にまとめると、タイトル、ディスクリプション(記事の概要・説明)、アイキャッチ(サムネイル)画像の指定がされています。

それがFacebookなどのSNS用の記述と、Twiiter用の記述の2種類が書かれています。

Twitter カードの表示例

ここで設定した内容がTwitter上にはこう表示されます。

Twitterカードの表示例
Twitterカード summary_large_image

Facebookでの表示例

フェイスブックでシェアされるとこう表示されます。

Facebookの表示例
Facebook OGP表示例

OGPタグの記述方法

OGPタグの設定方法を上から1つづ見ていきましょう。

meta property="og:type"は、ogp:typeと打ちたくなりますが、og:typeなのでご注意ください!

OGPのタイプを設定

<meta property="og:type" content="article" />

OGPの種類を設定します。いろいろあるんですが、サイトのTOPページは「content="website"」を指定、ブログのトップにはcontent="blog"」、下層ページの場合は「content="article"」を設定します。

間違ってもペナルティなどはないと思うので、出しわけが難しい場合は「content="article"」を指定しておけば、大丈夫です。

OGPの表示タイトルを設定

<meta property="og:title" content="SEOの必須項目 カノニカル設定とリダイレクト設定|Start Point" />

「content="記事タイトル"」
ここには表示させたいタイトルを入力します。
30文字程度を目安に入力するのが良いかと思います。

記事の概要・説明文を設定

<meta property="og:description" content="URLの正規化というややこしい話なんですが、SEO上正規化をしておくことは必須項目というべき大事な設定です" />

「content="ディスクリプション(記事の説明文)"」
記事の概要を入力します。

ここは文字数が少ないので、60~70文字前後を目安に書くとTwitter上では省略されずに表示されます。
Facebookはもっと少ないので、私はあきらめております。

FacebookのOGPの文字数
Facebookの文字数 30文字程度

Twitterでシェアするときは、シェアしてくれる人が説明をしてくれるので、そんなに気にしなくても良いかもしれませんね。
この文書読まれるかどうかも微妙ですし。

記事のURLを設定

<meta property="og:url" content="https://www.start-point.net/blog/web/seo/canonical/" />

ここにはリンクさせたいURLを記述します。
絶対パスでhttpsから始まるURLを設定してください。

記事の画像URLを設定

<meta property="og:image" content="https://www.start-point.net/blog/web/seo/canonical/img/ogp.png" />

こちらも絶対パスでOGPに設定するURLを記述します。

画像の拡張子は「.png」が主流ですが、「.jpg」でも対応しています。
PNG画像の方がキレイに表示できるというメリットがあります。

Twitterカードの設定

Twitterカードの設定があれば、URLをツイート内に記述するだけで、画像付きのリンクが表示されます。
SNSを活用しているのであれば、絶対に設定しておきたい項目です。

ツイッターカードの種類を指定

<meta name="twitter:card" content="summary_large_image" />

Twitterカードは種類があるんですが、一番目立つのが「summary_large_image」なので、画像が用意できる人は、これがオススメです。
一番目立つので。

ツイッターカードの種類

1.summary_large_image
2.summary
3.app
4.player

この4種類があります。前は7種類だったんですが、現状は4種類と。

3のappはアプリ紹介の時に使うカードで、4のplayerは音源再生などに使えますが、審査が必要です。

1番のsummary_large_imageか、2番のsummaryを使うのが一般的です。

ツイッターカードの画像を指定

<meta name="twitter:image" content="https://www.start-point.net/blog/web/seo/canonical/img/ogp.png" />

先に作った「property="og:image"」と同じ画像で基本的に問題ありません。
最適なサイズが若干違うんですが、サイト側で調整してくれるので、基本的に同じで良いと。

ツイッターカードのフッターに表示されるサイトURLを指定

<meta name="twitter:site" content="Start Point" />

これを入れておくとTwitterカードの下部にサイト名が表示されます。

タイトルとディスクリプションの設定

<meta name="twitter:title" content="SEOの必須項目 カノニカル設定とリダイレクト設定|Start Point" />
<meta name="twitter:description" content="URLの正規化というややこしい話なんですが、SEO上正規化をしておくことは必須項目というべき大事な設定です" />	

Twitteカードに表示するタイトルとディスクリプションを設定します。
文字切りされるので60~70文字前後が最適です。(2回目)

リンク先URLの設定

<meta name="twitter:url" content="https://www.start-point.net/blog/web/seo/canonical/" />	

Twitterカードのリンク先URLをこちらも絶対パスで設定します。

Twitterアカウントの表記

<meta name="twitter:creator" content="@StartPoint02" />	

Twitterで使用しているアカウントのIDを設定して完了です!

OGP画像に最適なサイズは?

画像のURL設定はいいとして、設定する画像のサイズはいくつが最適か。
これは最低限の大きさを確保したうえで、管理者のお好みでいいかなぁと思います。

OGPのサイズって、仕様変更で変わるんですよね。
最近のトレンドだと大きめのサイズが良いみたいです。

少し前まで、は横1200px × 縦630pxが最適だったんですけどね、Google ディスカバーあるじゃないですか、通称Google砲と呼ばれるアイツ。

Google Discoverの推奨サイズが横幅最低1200pxで、800,000px以上の画像を用意しろと。

適切な画像が選択されるようにするために、アスペクト比が 16x9、4x3、1x1 の高解像度画像(800,000 ピクセル以上の画像)を複数指定してください。

引用元:https://developers.google.com

私の場合、こんなでかい画像、記事中に使う要素がないので、OGP画像をこれに合わせて最適化してます。

1200pxで16:9の比率に当てはめると、1200px × 675px = 810,000pxになって、この要件は満たせるので。

但し、TwitterやFaceBook用のOGP画像にあてるとちょっと大きいので、天地がちょっと詰まる画像になるのがデメリット。

天地が切れても問題ないデザインで作るといいんですけどね、私の場合、OGP画像をブログのサムネイルにも使っているので、文字を大きくしたくてギリギリのサイズで作ってしまってます。
まぁ、細かいこたぁいいんだ、コンテンツが重要なんだよ!

Twitterカードの表示
TwitterカードのOGP画像

これがOGPの元画像です。

本来のOGP画像
本来のOGP画像

ちょっとだけ天地がトリミングされているのがわかります。

各メディアのOGP画像サイズ まとめ

1200pxを最低限に設定した時の各メディアのOGP画像サイズです。

メディアサイズ比率
Twitter1200px × 628px1.91:1
Facebook1200px × 630px
Google Discover1200px × 675px16:9

Google Discoverを無視してよければ、1200px × 630pxが最適かなぁと思います。
Twitter画像に2px足りないですが、Twitter側でリサイズしてくれて、2pxの縮小だと気づかないくらいの違和感なので。

Twitterカードを設定したらやること

記事内に記述するOGPタグの設定はこれにて完了です。
ただ、書いただけだとクロールされるまで時間がかかるので、Twitterカードのバリデータという、Twitterカードを認識させるページがあるのでそこに行って登録しましょう。

読み込み中

ページをアップロード(公開)したら、Twitter Card Validatorのページにいって、URLを入力して「Preview card」ボタンを押します。
それでTwitterカードが表示されたら準備完了です!

ツイートにURLを張り付けてツイートすると、Twitterカードが表示されます。

ツイートに複数のURLをはるとどうなるか

ツイートの中にURLを2つ以上登録しても、表示されるTwitterカードは1枚だけ。
公式に解説があったので引用します。

ツイート内の複数URL

状況によっては、複数のURLのツイートが必要になる場合があります。
ツイートに表示されるカードは1枚のみです。
複数URLの処理における優先順位は次のとおりです。

ツイートに添付された画像やメディアは、URLに添付されているすべてのカードよりも優先されます。
カードを含むURLは、ツイート内での出現順に処理されます。

引用元:https://developer.twitter.com

Twitterカード設定されてても、画像を一緒にツイートすると、画像を優先するよってことですね。
複数のURLの場合は、上から優先して表示すると。

Amazonの書籍をTwitterカード付で紹介する方法

TwitterでAmazonの書籍を紹介するときに、Twitterカードが表示されるパターンと、されないパターンがあって実験しました。

Amazonの商品ページのURLって色々なパターンがあるんですけど、極力シンプルにして、電子書籍と紙の本が2つある場合、「紙」の書籍の方が出やすいみたいでした。
(個人の調べなので間違ってる可能性はあります)

電子書籍は出ないのかというと、そうでもなく、電子書籍しかない場合や、正規に売っていない場合は電子書籍でもTwitterカードが表示されました。

AmazonのURLパターン

最近購入した福満しげゆきさんの「妻に恋する66の方法」を例に説明してみたいと思います。
この巻で打ち切りになってしまったそうです。おもしろいのに。

妻に恋する66の方法(6) (イブニングコミックス)

妻に恋する66の方法(6) (イブニングコミックス) #363

693円 (税込)(Amazon参考価格)

Amazonのリンク先URLの1例がこう。
「https://www.amazon.co.jp/dp/4065184983/ref=tmm_other_meta_binding_swatch_0?_encoding=UTF8&qid=&sr=」

このURLでTwitter Card validatorを通してもエラー表示になります。

TwitterカードがNGな場合
Twitterカードが表示されません

余計なパラメータを排除して登録

URLの中にいらない情報があるので、それを削除してシンプルにすると、表示される場合があります。(100%ではない)

https://www.amazon.co.jp/dp/4065184983/

これでバリデータ通すとTwitterカードが表示されました。
1回ボタンを押すだけだと、NGになることもありますが、何度かポチポチすると表示されることもあります。

Twitterカードが通る場合
Twitterカードが表示されました。

オススメ書籍をツイートするときに、本の写真が表示された方が興味をいだいてもらえそうですからね。
せっかくなら写真付きで表示したいわけです。

Twitterカードを表示させるURLの見極め方

Amazonの商品の場合、ASINと呼ばれるアマゾン独自の商品コードがあるので、それは必須です。
商品ページのURLをコピペして、URLの前についている「https://www.amazon.co.jp/dp/」
商品によっては「https://www.amazon.co.jp/gp/」のみにして、その後にASIN番号をくっつけると、表示させる確率があがるみたいです。

OGPタグ設定のまとめ

OGPタグ設定はSNSが盛り上がってきてから、出てきたタグなので、昔からサイトを作っていると知らないタグだったりします。

今はSNS全盛でシェアしてもらえる時には、少しでも目立った方がクリックしてもらいやすくなりますからね。

シェアしてもらえるような記事なり、コンテンツなりを作るのが一番最初ですが、そこから先の流入を増やすチャンスを増やすのが、「OGPタグ」です。

Descrptionの文章を考えるのがちと面倒ですが、自分の記事のリード文になりますから、気合を入れて作りましょう。

記事内で紹介している商品リスト
(価格はAmazon参考価格)

これからのSEO内部対策 本格講座

1,870円(税込)

これからのSEO内部対策 本格講座

妻に恋する66の方法(6) (イブニングコミックス)

693円(税込)

妻に恋する66の方法(6) (イブニングコミックス)

現場のプロから学ぶ SEO技術バイブル(特典PDF付き)

3,278円(税込)

現場のプロから学ぶ SEO技術バイブル(特典PDF付き)

UP-BLOG 申込みが止まらないブログの作り方 (マーチャントブックス)

2,585円(税込)

UP-BLOG 申込みが止まらないブログの作り方 (マーチャントブックス)

Webプロジェクトを成功に導く 戦略的SEO思考

1,920円(税込)

Webプロジェクトを成功に導く 戦略的SEO思考

いちばんやさしい新しいSEOの教本 第2版 人気講師が教える検索に強いサイトの作り方[MFI対応] (「いちばんやさしい教本」シリーズ)

1,738円(税込)

いちばんやさしい新しいSEOの教本 第2版 人気講師が教える検索に強いサイトの作り方[MFI対応] (「いちばんやさしい教本」シリーズ)

10年つかえるSEOの基本

1,628円(税込)

10年つかえるSEOの基本

文芸オタクの私が教える バズる文章教室 (サンクチュアリ出版)

1,540円(税込)

文芸オタクの私が教える バズる文章教室 (サンクチュアリ出版)

OGP設定の関連ページ

SEO titleとh

SEOで重要なtitleタグとhタグの使い方

SEOの内部構造の基本であるTitleタグとHタグの使い方と自分の考えを書きました。 基本だからこそ重要な要素

SEOキーワード選定

SEO キーワード選定の方法を考察してみた

SEOは結構頑張っていますが、キーワード選定という手法をあまり深く考えたことがなかったので深く考えてみました。

構造化データとパンくずリスト

構造化データで作るパンくずリストとSEO

SEO上必須ともいえる構造化データ化されたパンくずリストの解説と、ユーザー目線で考えるパンくずリストの価値について

カノニカルとリダイレクト

SEOの必須項目 カノニカル設定とリダイレクト設定

URLの正規化というややこしい話なんですが、SEO上正規化をしておくことは必須項目というべき大事な設定です

アイキャッチの作り方

参考にならない適当につくるアイキャッチの作り方!

ブログのアイキャッチをどうやって作っているかの解説であって、効果があがるとかクリック率が高いとかそういうのじゃないです。

GTM イベントトラッキング

GTMを使ってイベント計測を簡単に行う方法

グーグルタグマネージャーを使ってイベントトラッキングを計測する方法の手順を解説。何がクリックされたかを知ることは大事です

Googleアップデート対策

Googleコアアップデートで順位が下がったときにやるべきこと

Googleのアルゴリズム変更によるGoogleコアアップデートでSERPsの順位変動が起きたときにやったこと

GTMの導入

グーグルタグマネージャーの導入手順とメリットについて

Google Tag Manager 通称「GTM」と呼ばれる無料で使えるタグを管理するツールの説明と導入手順の解説

リンク構造

ブログのアクセスアップに欠かせないSEO的リンク構造の考え方

SEOのリンク構造を効果的に作るための情報をまとめました。 可能な限り情報の出どころのリンクも用意しております。

GA4カスタムイベント

GA4 GTMを使ったカスタムイベントの設定方法

GA4のカスタムイベントをGTMを使い設定する方法です。 イベント、パラメータ、カスタムディメンションの解説記事です。

SNSでこの記事をシェアできます

ブログ デイリーアクセスランキング

ひたち海浜公園
1位

ひたち海浜公園

茨城県屈指の観光スポットひたちなか海浜公園を一眼レフ「PENTAX Q7」撮った写真とともに紹介します。

ウルトラブースト
2位

ウルトラブースト

一度はいたら手放せない! アディダスの「ウルトラブースト」搭載のハイテクシューズのレビューとオトクに購入する方法です

アドセンスの収益構造
3位

アドセンスの収益構造

Googleアドセンス広告の収益化を逆算して考えて、KPIを洗い出し、何をすれば良いかを設計しました。

クリック率改善
4位

クリック率改善

Googleアドセンスのクリック率の一番高い広告はモバイル全画面広告でした。 他にも効果の高い掲載位置などを解説

MusicBeeのレイアウト変更方法
5位

MusicBeeのレイアウト変更方法

MusicBee 3.1のレイアウトをデフォルトの状態から、自分好みのレイアウト設定に変更する方法を写真付きで紹介しています。

CSSで作る横スライド
6位

CSSで作る横スライド

CSSのoverflow-x: scrollを使った横スライドの簡単な作り方と事例紹介です。 簡単便利はいいことだ。

バトルロワイアル
7位

バトルロワイアル

「今日は皆さんにちょっと殺し合いをしてもらいます」で有名なマンガ原作のあの映画を見ました。どんな映画が良くわかってなかったのですが、思ってた以上に殺し合いをしている映画でした。

ランダム表示バナー
8位

ランダム表示バナー

PHPでランダム表示させるバナープログラムです。 バナーと言っていますが、別にバナーじゃなくてもランダムで表示できます。

PHP覚え方
9位

PHP覚え方

PHP単体でもHTMLよりもできることの幅はひろがるけれど、それにプラスしてデータベースを扱えるようになると無敵感を味わえます。

魔法少女まどか☆マギカ
10位

魔法少女まどか☆マギカ

魔法少女まどか☆マギカという名前が誤解を生みそうな素晴らしい作品があります。魔法少女という強烈なメタファーのせいで誤解をしていました。

カテゴリ一覧

オススメ商品レビュー

オススメ商品レビュー

世の中にある比較サイトや、いかがでしたか系サイトが嫌いなんです。使ってないのにえらそうなこと言うなと。なので体験談です。

WEB制作

WEB制作

WEBサイトを作れますと一言に言っても色々な技術があるわけですよ。アウトプットの形は一緒でもいろいろこだわりがあるんです。

カメラ

カメラ

2018年4月に購入したソニーのミラーレス一眼「α7Ⅲ」に関連する記事一覧ページです。 作例集やカメラグッズレビューなど。

美味しいもの

美味しいもの

食に関してはあまりこだわりがないんですけどね、こだわりがない分美味しいと思ったものは本当においしいと思ったものなんですよ

Amazonプライム動画

Amazonプライム動画

Amazonプライム会員なら無料で利用できるAmazonプライム動画から、いろいろな動画をみたレビュー記事のまとめページ

旅LOG

旅LOG

家族旅行やおでかけした際の旅ブログです。夏休みの家族旅行(4人家族)で訪れた観光名所の感想などを記しています。

プロフィール

プロフィール

Start-Point.netの管理人のプロフィール紹介を兼ねた、自分の中のルールや決め事やエピソードなでお書いていきます

日記

日記

日記と言っても色々な日記があるわけで、記録的な日記や心理描写を色濃く描いた日記などをまとめたページです。

thanks

thanks

自分を表現することって意外と難しいんですよね。照れがあったり、間違ったこといってないかとよくわからない何かと戦ったりして。

記事内で紹介している商品

これからのSEO内部対策 本格講座

1,870
(税込)