【WordPress】OGP(Twitterカード・Facebook)をプラグイン無しで記事ごとに設定する方法

SNSでツイートやシェアしてもらうために欠かせないのがOGP設定。

今回はWordpressのプラグインを使わずにOGP(Twitterカード・Facebook)を設定する方法とサンプルコードを紹介します。

OGPとは?

OGPという言葉は、SNSが普及されると同時に良く聞かれるようになりました。

OGPとは、自サイトの記事がツイートやシェアされたときに、アイキャッチ画像や記事タイトル、説明文を意図的に表示してくれる設定になります。

以前までは、システムが勝手に最初の画像を表示したり説明文を本文の前文だけ抜き取って表示していましたが、それだと全く関係ない画像が表示されていたり意味の分からない文章が表示されるといったことがありました。

そういった画像やタイトルなどの記事情報をサイト運営者側でOGPとしてソースコードで記述しておくことで、外部のWEBサービスがOGP情報を読み込んでちゃんとした情報を表示してくれます。

OGP(Twitterカード/Facebook)を表示するために必要なタグ

OGPを表示するために必要なHTMLタグがあります。ページごとにそれぞれ設置していく必要があります。

ページがツイートされたりシェアされるときに上記のOGP情報に設定されているデータが読み取られ、SNS上に表示されます。

Twitterカードは2種類ある

Twitterの場合、Twitterカードのレイアウトを2シュルの中から選ぶことができます。

1つ目:summary

カートの種類を「summary」にしたい場合は、下記のように指定します。

Twitter上では下記のように表示されます。Youtubeが「summary」を採用しています。

2つ目:summary_large_image

カートの種類を「summary_large_image」にしたい場合は、下記のように指定します。

Twitter上では下記のように表示されます。yahoo!ニュースやNHK、アメブロなど大手メディアのほとんどが「summary_large_image」を採用しています。

おすすめは「summary_large_image」 です。「summary_large_image」の場合画像を大きく表示してくれるため、ユーザーの目に止まりやすくアクセス増に期待できます。
スポンサーリンク

今使用中のテーマがOGPに対応しているか調べる

今使っているWordpressのテーマがOGPに対応しているかどうかは、ソースコードを見ることで調べることができます。

調べる手順は、下記になります。

1「ctrl + U」でソースを表示する

OGPが設定されているかチェックしたいページでキーボードの「Ctrl」と「U」のキーを同時に押します。そうするとソースコードが表示されます。

2「og:」で検索

キーボードの「Ctrl」と「F」のキーを押すと検索入力が表示されるので、入力欄に「og:」と入力して「Enter」を押下します。

そうすると「og:」の文字列が存在すると、黄色い背景色で塗られている文字が検索できます。下記のように背景色が黄色になっている文字が無い場合は、「og:」文字が存在しないことを指しますので、OGP設定が必要になります。

プラグインを使わずOGPタグを設定する

今回はWordpressのプラグインを使わずに、直接ソースコードに貼り付ける方法を紹介します。というのもプラグインを多く使ってしまうと、サイト負荷が高くなってしまいサイト全体が遅くなることがありますので、簡単なOGPの設定は、直接ソースコードに書いたほうがベストです。

ただし、テーマのアップデート等によって、追記したOGP情報が上書きされて消える場合がありますので、テーマのアップデートする際はバックアップを取ってからおこなうようにしてください。

テーマー編集からfunctions.phpにコードを貼付け

使用中のテーマのfunctions.phpファイルに下記コードを追記します。追記する場所は、最下部に追記してください。

functions.php

上記ソースコードを貼りつけたら、「初期設定 ここから」「初期設定 ここまで」の間にある項目を編集してください。

下記の部分です。

  • 「画像URL」と書かれている部分をアイキャッチ画像が無い記事場合の代替画像URLを入力する。
  • 「Twitterアカウント名」と書かれている部分をTwitterアカウント名を入力する。@も忘れずに!
  • 「summary_large_image」と書かれている部分を「summary」にしたい方のみ「summary」に変更する
  • Facebook APP IDに関してはわかる方は入力、わからない場合は入力しなくても動作します

修正が完了したら、保存をしてください。

OGPが正常に設定されているかチェック

ソースコードを修正した場合、必ず動作確認をします。

OGPが問題なく設定されているか確認する方法があります。別記事にまとめてありますので、参照ください。

Twitterカードの動作チェック

Twitterカードの動作チェックするにはTwitter社が提供しているデバッグページで動作確認をします。下記を参照ください。

Twitterカードが正常に動作するかを確認(デバッグ)する方法

2018.01.10

まとめ

今回は、Wordpressのプラグインを使わずにOGP(Twitterカード・Facebook)を設定する方法を紹介しました。サンプルコードを貼り付けて3か所ほど書き換えるだけでOGPタグを簡単に設置することができます。

万が一のことを考え、作業する前に必ずバックアップをとってから作業するようにしましょう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)