OGPってなに？

OGPとは、SNSでWebページにリアクションを行った際に情報を伝えるプロトコルです。

OGPとは「Open Graph Protocol（オープン・グラフ・プロトコル）」を略した言葉で、TwitterやFacebookなどのSNSでコンテンツがシェアされた場合、シェア画面にページURLやタイトル、概要、画像などを表示させる仕組みです。

OGPを設定することで、コンテンツを魅力的に見せることができます。

OGPタグの設定を確認する手順3選

OGPタグの設定を確認する場合には3つの手順があります。

コンテンツの拡散を狙うのであれば、OGPを設定することは非常に重要です。それではOGPタグの設定はどのようにして確認すればよいのでしょうか。

ここではOGPタグの設定を確認する手順3選を紹介しますので、ぜひ参考にしてみてください。

OGPタグの設定を確認する手順1：記事のページを開きページ内で右クリック

Webページの記事を開き、右クリックを行いましょう。

Windowsを使用している場合、ブラウザ上で右クリックをするとメニューが表示されます。その中に「ページのソースを表示」というメニューがあることを確認しましょう。

なお、Macの場合はこの方法では確認することができず、さらに端末によって確認方法が異なるため注意が必要です。

OGPタグの設定を確認する手順2：ページソース表示をクリックして開く

右クリックメニュー内にある「ページのソースを表示」をクリックしましょう。

クリックすることでHTMLソースが表示されます。なお、ブラウザ上ではなくURLの「https://」の前に「view-soruce:」を追加することでページソースを確認することも可能です。

OGPタグの設定を確認する手順3：「og.」で検索をする

HTMLソースの中にある「og.」を検索しましょう。

膨大な量のHTMLソースの中から目視でOGPタグを探すのは非常に大変な作業になるため、検索を行うのがおすすめです。

「ctrl」＋「F」のショートカットで検索窓を表示できるため、そこに「og.」を入力すると良いでしょう。

WordPressでOGPを設定する2つの方法

WordPressでOGPを設定するには2種類の方法があります。

WordPressを使用することで、サイトが重くなる原因となるプラグインを使用せずにOGPを設定したり、All in One SEO ParkでOGPを設定したりすることができます。

ここではWordPressでOGPを設定する2つの方法を紹介しますので、どのような方法があるのか参考にしてみてはいかがでしょうか。

WordPressのプラグインなしでOGPを設定する方法

WordPressを使用することで、プラグインなしでOGPを設定することが可能です。

WordPressはプラグインを使用しなくても、テーマ編集からfunctions.phpに追加することでOGPを設定することができます。

ここでは、まずはWordPressのプラグインなしでOGPを設定する方法を紹介します。

functions.phpに追加する

テーマ編集からWordPressのfunctions.phpにOGPタグを追加を行いましょう。

「og:title（タイトル）」や「og:description（ページの概要）」などのOGPタグを、functions.php内の「function my_meta_ogp()」以下の「{if (is_front_page() || is_home() || is_singular()) {」以下に追加しましょう。

single.phpのhardタグに追加する

single.phpのheadタグ内にタグを追加して設定することもできます。

「meta property=”og:url” content=”‘; the_permalink(); 」というように記述することで単一記事URLを表示したり、「meta property=”og:title” content=”‘; the_title()」というように記述することで単一記事タイトルを表示したりすることが可能になります。

All in One SEO ParkでOGPを設定する方法

SEO関連のプラグイン「All in One SEO Pack」でOGPを設定することも可能です。

OGPは人気プラグインの「All in One SEO Pack」を使って設定することもできるため、プラグインを使用する方法が良いという方もいるでしょう。

ここではAll in One SEO ParkでOGPを設定する方法を紹介しますので、こちらもぜひ参考にしてみてください。

画像を設定する方法

画像を設定する場合、「Social Meta」の「Image Settings」で設定できます。

まずは管理画面サイトバーの「All in One SEO」から「Feature Manager」を開き、「Social Meta」を有効化させましょう。

有効化すると、管理画面サイドバーに「Social Meta」が追加されるため、その設定画面で「Image Settings」を設定していきましょう。

ホームページを設定する方法

ホームページを設定する場合、「Social Meta」の「Home Page Settings」で設定できます。

「Social Meta」の有効化までの手順は前述の画像と同様です。管理画面サイドバーに追加された「Social Meta」の設定画面で、「Home Page Settings」を設定していきましょう。

記事ごとに画像を設定する場合

記事ごとにOGP画像を設定する場合、All in One SEO Parkの「ソーシャル設定」タブで設定を行いましょう。

ソーシャル設定タブ内で「画像」を設定することでOGPが設定できます。また、「画像」の下にある「カスタム画像」から画像をアップロードし、記事内に存在しない画像を使ってOGPを設定することも可能です。

過去の記事の画像に不具合がある場合

過去の記事の画像がおかしい場合、キャッシュが残っている可能性があります。

Facebookではシェア用の画像は独自にキャッシュしているため、自動的に過去の別の画像が表示されているケースがあります。そのため、Facebook側でキャッシュの削除や更新を行うと良いでしょう。

OGPが正しく設定されたか確認する方法

OGPが正常に設定されたことを確認するには2種類の方法があります。

WordPressでOGPを設定したら、念のためにOGPが問題なく設定できていることも確認する必要があります。しかし具体的な確認方法がわからないという方もいるでしょう。

ここではOGPが正しく設定されたか確認する方法を紹介しますので、どのような方法でOGPを確認すればよいのか参考にしてみてください。

Twitterカードの動作チェック

OGPの設定を確認する場合はTwitterカードを確認する方法があります。

Twitterカードの動作チェックする場合、「https://cards-dev.twitter.com/validator」の「Card validator」で動作確認を行うことができます。

英語ですが、「Card URL」にURLを入力し、「Preview card」をクリックするだけのわかりやすい画面になっています。

Facebookの動作チェック

OGPの設定を確認する場合はfacebookで確認する方法があります。

facebookの動作チェックをする場合、「https://developers.facebook.com/tools/debug/」のシェアデバッガーで動作確認を行うことができます。

シェアデバッガーでは、コンテンツがFacebookでシェアされた際の表示をプレビューし、デバッグを行えます。

OGPの設定方法を覚えてWordPressで活用しよう！

OGPを設定することでSNSでコンテンツがシェアされた場合のページを自由に設定することができます。

OGPを適切に設定することにより、シェアされたコンテンツをより魅力的に見せることができるようになるでしょう。

ぜひこの記事で紹介したOGPタグの設定を確認する手順やWordPressでOGPを設定する方法、OGPの確認方法などを参考に、WordPressでOGPを設定してみてはいかがでしょうか。