TOP›HTML・CSS›OGPのmetaタグを設定してSNSで効果絶大なリンクを貼る方法

OGPのmetaタグを設定してSNSで効果絶大なリンクを貼る方法

　
HTML・CSS
OGPのmetaタグを設定してSNSで効果絶大なリンクを貼る方法

OGPのmetaタグをあなたのWEBページに設定すれば、TwitterやFacebookなどのSNSで効果絶大なリンクが貼れるようになります。OGPの概要や、タグの使い方、確認方法など、実際にSNSで効果的なリンクを貼れるようになる方法を紹介します。

 

- 目次 -

OGPとは？OGPの概要を知ろう

OGPとはOpen Grapgh Protocolの略で、リンクにおけるユーザインタフェースの向上を目指して作られた通信規約です。（公式：http://ogp.me/ 英語表記です。）

わかりやすく説明すると、WEB上でURLリンクを貼った際にURLだけでなく、URL先のページが提供を許可しているページタイトルやサムネイル画像、概要などの情報を表示するような仕組みです。

次に、実際にOGPを利用したリンク例を見てみましょう。

 

OGPのmetaタグによる効果絶大なリンク例

OGPを利用していないリンクと、OGPを利用しているリンクの違いを見てみましょう。今回はTwitterで確認してみました。一目瞭然でOGPを利用したリンクの方が、リンク先にアクセスしやすいことがわかるはずです。

 

OGPを利用していないリンク例

Twitterカードを利用しなかった時のリンク表示例

上記はTwitterにてOGPを利用していないリンクを貼ったツイートの例です。ツイートの最後にリンクが貼られています。リンクは通常の文字とは色が違うものの、あまり目立たずアピール力が弱いことがわかります。（リンクアドレスも一部省略された状態になっています。）

 

OGPを利用しているリンク例

Twitterカードの利用例（summary）

上記のツイートはOGPが設定されているURLのリンクを貼った場合です。URLだけでなく、リンク先のタイトル・画像・概要が合わせて表示されています。そのため、リンク先のイメージが沸きやすく、通常のリンクよりアピール力が強いことがわかります。

 

上記のように、SNSなどでリンクが貼られた際に表示されているサムネイル画像や詳細情報は、あらかじめリンク先でOGP(Open Grapgh Protocol)というものをメタタグで設定しているため表示することができるのですね。

 

OGPを利用するSNS例

OGPの有用性は明らかなため様々なサイトで利用されていますが、特にSNSで利用されています。下記はOGPを利用しているSNSの例です。実際に多くのSNSが利用していることがわかります。

  • Twitter
  • Facebook
  • Line
  • Google+
  • mixi
  • GREE
  • はてなブログ

など。

 

OGPを設定する前の注意事項

OGPの設定が必要だということがわかったところで、実際にOGPを設定方法を紹介していきますが、その前に下記の注意事項を確認してから設定してください。

 

OGPを設定すると全てのサイトやSNSで適用される

OGPは汎用的にサイト情報を提供する仕組みです。そのためOGPの設定を行った場合は、OGPを利用するサービス全てにおいて適用されます。そのため例えば、「Twitterではリンクからサイト情報を読み取れるようにしたいけど、Facebookや他のSNSなどでは読み取られたくない！」という場合は設定しないでください。

基本的にはどのSNSからでもサイト情報をリンクから読み取れるようにしておくほうがメリットがありますので設定しておくことをおすすめします。

 

OGPは１ページごとに設定が必要

OGPは1ページごとに設定をする必要があるので大規模サイトとなると手作業で行うのは大変です。マクロや置換ツールを使って効率よく作業を行いましょう。

 

OGPの自動生成ができるWordPressプラグインもある

WordPressを利用している人であれば、プラグインなどで自動的に生成することができますので、以下プラグインを検討されると良いでしょう。

※All in One SEOはプラグイン適用後 -> 機能管理 -> ソーシャルメディアを活性化することで設定できるようになります。

 

 

OGP設定ステップ１：OGP利用の宣言

それではOGPを設定していきます。まず始めに、OGPをページ内で利用することを宣言する必要があります。htmlもしくはheadタグで以下を記載します。

  • prefix=”og: http://ogp.me/ns#”

 

【サンプル】 htmlタグに記載する場合の例

<html prefix="og: http://ogp.me/ns#">
  <head>
    ～　省略　～
  </head>
  <body>
    ～　省略　～
  </body>
</html>

 

 

OGP設定ステップ２：OGPの基本metaタグを挿入する

続いて、必須となる基本のmetaタグをheadタグ内に設定していきます。必須のmetaタグは4種類あります。

 

OGPの基本metaタグ（必須）No１

  • og:title – ページタイトル

ページタイトルを設定するOGPの基本methaタグです。titleタグと同じ内容を設定することがほとんどかと思います。後述の使用例を参考に設定ください。

 

OGPの基本metaタグ（必須）No２

  • og:type – ページタイプ

ページのタイプを宣言するOGPの基本metaタグです。利用するタイプは2つです。

  1. サイトトップであれば「website」を指定します。
  2. その他のページであれば「article」を指定します。

後述の使用例を参考に設定ください。

 

OGPの基本metaタグ（必須）No３

  • og:url – ページURL

ページのURLを指定します。後述の使用例を参考に設定ください。

 

OGPの基本metaタグ（必須）No４

  • og:image – サムネイル画像のURL

ページのイメージとなるサムネイル画像のURLを指定します。後述の使用例を参考に設定ください。

 

【サンプル】OGPの基本となる必須のmetaタグを記載した使用例

<html prefix="og: http://ogp.me/ns#"><!-- OGPの宣言 -->
 <head>
  <!-- ここからOGPの基本設定（必須） -->
  <meta property="og:title" content="日常スコープ" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://blog.remote-production.com" />
  <meta property="og:image" content="http://blog.remote-production.com/wp-content/themes/nichijyo-scope/img/common/tk-remo.jpg" />
  <!-- ここまでOGPの基本設定（必須） -->
  ～　省略　～
 </head>
 <body>
  ～　省略　～
 </body>
</html>

上記サンプルの「content=」の中にあなたが設定したい値を設定してください。なおコメント文は不要です。

 

 

OGP設定ステップ３：オプションで利用可能なmetaタグを挿入する（任意）

続いて、必須ではないが任意で設定ができるOGPを紹介します。必須のOGP基本metaタグと同じく、1ページごとに設定をする必要があるので注意してください。

なお以下２つが任意で利用可能なおすすめのmetaタグです。

  • og:description
  • og:site_name

 

og:description – ページ概要

ページの概要や要約文を設定します。後述の使用例を参考に設定ください。

 

og:site_name – サイト名

サイト名を設定します。後述の使用例を参考に設定ください。

 

og:locale – 国言語

国言語を設定します。後述の使用例を参考に設定ください。

 

og:locale – 国言語

国言語を設定します。後述の使用例を参考に設定ください。

 

og:audio – 音楽

音楽ファイルのURLを設定します。後述の使用例を参考に設定ください。

 

og:video – 動画

動画ファイルのURLを設定します。後述の使用例を参考に設定ください。

 

 

【サンプル】OGPの任意で利用可能なmetaタグを記載した使用例

<html prefix="og: http://ogp.me/ns#"><!-- OGPの宣言 -->
 <head>
  <!-- ここからOGPの基本設定（必須） -->
  <meta property="og:title" content="日常スコープ" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://blog.remote-production.com" />
  <meta property="og:image" content="http://blog.remote-production.com/wp-content/themes/nichijyo-scope/img/common/tk-remo.jpg" />
  <!-- ここまでOGPの基本設定（必須） -->

  <!-- ここからOGPのオプション設定（任意） -->
  <meta property="og:site_name" content="日常スコープ" />
  <meta property="og:description" content="WEBやデザインをはじめ、生活・マネーなどのブログです。日常のちょっとした役に立つ情報や楽しいことをブログにしていきます。" />
  <meta property="og:locale" content="ja_JP" />
  <meta property="og:locale:alternate" content="en_GB" /> <!-- 他の言語も利用している場合は複数指定できます -->
  <meta property="og:locale:alternate" content="fr_FR" /> <!-- 他の言語も利用している場合は複数指定できます -->
  <meta property="og:audio" content="https://blog.remote-production.com/○○/○○.mp3" />
  <meta property="og:video" content="https://blog.remote-production.com/○○/○○.swf" />
  <!-- ここまでOGPのオプション設定（任意） -->
  ～　省略　～
 </head>
 <body>
  ～　省略　～
 </body>
</html>

上記サンプルの「content=」の中にあなたが設定したい値を設定してください。なおコメント文は不要です。

 

各SNSの共通設定

最後に、各SNSで必須で設定しなければならない設定を加えて終了です。

 

Twitterの共通設定

TwitterではOGPのmetaタグの他に、Twitterカードと呼ばれるタグを設定しておく必要があります。以下をheadタグのエリア内に記載してください。

<meta name="twitter:card" content="タイプを設定" />

上記の「タイプを設定」と書かれている部分に以下いずれかの値を設定してください。普通のWEBページであれば基本的には１か２を選択すればOKです。

  1. サムネイル画像を小さく表示する場合：summary
  2. サムネイル画像を大きく表示する場合：summary_large_image
  3. アプリを表示する場合：app
  4. 動画を表示する場合：player

 

Facebookの共通設定

FacebookではOGPのmetaタグ以外に以下をheadタグのエリア内に記載してください。

<meta property="fb:app_id" content="アプリID" />

なお、アプリIDはFacebookログイン後にFacebook開発者のページから発行することができます。

 

 

OGPのmetaタグが正常に動作しているか確認する方法

OGPのmetaタグを設定した後は、動作確認を行いましょう。以下のTwitter向けの開発者ツールを使えば動作確認を行うことができます。Twitter公式の動作確認ページを利用して「OGPのmetaタグが正しく設定できているか」確認してみましょう。

OGPのmetaタグ動作確認ページ

 

※TwitterカードとOGPにおいて両方とも同じプロパティ（descriptionなど）が設定されている場合は、OGPよりもTwitterカードが優先されて表示されるので予めご注意ください。

 

動作確認ページの操作方法

１．動作確認ページにアクセスします

Twitterカード動作確認ページ

 

２．Card URLの入力ボックスに動作確認したいリンクを入力し「Preview card」をクリックします

 

３．結果を確認します。以下のようにページタイトル・サムネイル画像・概要が表示されていればOKです。

Twitterカードを利用したリンク表示

４．念のためにログを確認します。赤色の文字でエラーが出ていなければOKです。エラーが出力されていた場合は適宜対応してください。

 

※エラーの場合はOGPのmetaタグ設定にミスがあると考えられますので、OGPのmetaタグを確認ください。

 

OGPは様々なSNSにおいてリンク効果をパワーアップさせる！

OGPを設定しておけば、主要なSNS（Twitter, Facebook, Lineなど）において、効果的なリンクを自動生成してくれるようになります。

OGPを利用せずにリンクURLを貼るのに比べて、OGPを利用してサムネイル画像やタイトル・概要もプラスしたリンクのほうがアピール力が強く、閲覧者にイメージが伝わり閲覧してもらいやすくなります。

今やSNSは全世界で欠かせないものとなりました。ぜひOGPを利用して、SNS上で効果的なリンクが表示されるように設定しておきましょう。

 

日常スコープのSNSシェア・いいね！
いつもありがとうございます。
記事のさいご
カテゴリ： HTML・CSS
作成者 : TK@WEB制作

▲TOP