SNS WordPress ブログ運営

【WordPress】OGPとTwitterカードをプラグイン無しで設定する方法

更新日:2018-08-29

WordPress OGP Twitterカード

ブログを運営していくうえでFacebookやTwitterを

  • ブログを見てもらうための集客ツール
  • 読者と交流するためのコミュニケーションツール

として利用したいと思う方は多いでしょう。

その中でも一番利用頻度が多いのが、ブログの記事をFacebookやTwitterで紹介すること。

この時、URLをコピペしただけで記事の画像やタイトル、本文の冒頭文を目立つように表示させたいですよね。

このページでは、

  • そもそも「OGP、Twitterカード」って何?
  • WordPressでプラグインを使わずにOGP、Twitterカードを設定する方法は?

このようなことに回答していきます。

OGP、Twitterカードとは

5W1H

OGPとは「Open Graph Protocol(オープン・グラフ・プロトコル)」の略で、FacebookやTwitter、Google+、mixiなどのSNSでWebページの内容を伝えるために定められたプロトコルです。

簡単に言うと、SNSで自分の記事がシェアされたときに、その記事ページをどうやって表示させるかを事前に設定するためのルールのこと。

OGPを設定することで、正しい情報をわかりやすく伝えることができるようになるため、拡散力を高める効果が期待できます。

Twitterカードとは、Twitter用のOGP設定のことです。

Twitterカードを設定すると、URLをコピペしただけで以下のようなページを表示することができるようになります。

WordPressでプラグインを使わずにOGP、Twitterカードを設定する方法

設定

それでは、具体的にWordPressでOGP、Twitterカードを設定する方法を説明していきます。

OGPの設定状況を確認する

まず、自分のサイトのOGP設定状況を確認してみます。

わざわざ確認するのは、何らかのプラグインを入れていたり、使っているWordPressのテーマによっては気付かぬうちにOGPが設定されている場合があるから。

既に設定されていれば余計な時間を使わずに済みますし、2重設定を防ぐこともできますね。

確認の方法は以下の通りです。

1. 記事ページのソースコードを表示する

記事ページを開き、右クリックしてソースコードを表示しください。

ショートカットキーを使ってソースコードを見る方法は以下の記事をご参考に。

2. 「OG:」の有無を確認する

ページ内検索を使って「OG:」があるか検索してください。

Windowsなら「Ctr + F」、Macなら「command + F」でページ内検索のボックスが開きますので、そこに「OG:」と入力してください。

検索して「OG:」がヒットしなければOGPは未設定なので、OGPとTwitterカードの設定に進みます。

OGP、Twitterカードの設定

トップページと投稿ページ、固定ページにOGP、Twitterカードを設定していきます。

難しい設定ではないので、プラグインは使いません。

以下の手順で「function.php」ファイルを開いてください。

外観 → テーマの編集 → functions.php

functions.phpを開いたらこのコードを貼り付けてください。

コードを貼り付けたら、以下の3箇所をご自分のサイトに合わせて修正してください。

1. トップページやアイキャッチ画像が設定されてないページ用の画像URL

35行目の「画像のURL」の部分に、トップページや記事にアイキャッチ画像が設定されていないページがシェアされた時に表示される画像のURLを指定します。

2. Twitterのアカウント名

46行目の「@zakker7」の部分をご自分のTwitterアカウントに変更してください。

3. FacebookのアプリID

48行目の「FacebookのappID」にFacebookのアプリIDを入力してください。

Facebookのアナウンスでは、OGPを設定したりする場合にFacebookのアプリIDは必須とされているのですが、これを取得するのがなかなか面倒くさいので、実際はあまり取っていない人が多いようです。

アプリIDを取得しない場合、48行目を削除してしまってください。

FacebookのアプリIDを取得する場合は別記事で紹介しますので、少しお待ちを。

最終チェック

確認

最後にOGPとTwitterカードがしっかりと設定されているかどうかチェックしてみましょう。

Facebook

確認したいページのURLを以下のページのボックスに入力して「デバッグ」を押してください。

Facebook シェアデバッガー

1回でうまくデータが取得できないケースが多いので、その時は「もう一度スクレイピング」を押してみましょう。

Facebook Dubg

このように表示されれば大丈夫です。

Twitter

確認したいページのURLを以下のページのボックスに入力して「Perview card」を押してください。

Twitter Card Validator

Twitter Card Vlidator

このように表示されれば大丈夫です。

最後にひとこと

最後にひとこと

これでWordPressのOGPとTwitterカードをプラグイン無しで設定する方法の解説は終わりです。

URLを貼り付けるだけで、正確な情報をわかりやすく伝えられるようになりました。

SNSで記事をどんどん紹介して拡散させましょう!

-SNS, WordPress, ブログ運営
-, ,

執筆者:

関連記事

アイコン

【WordPress】Favicon(ファビコン)の作り方と設定方法

WordPressでFavicon(ファビコン)を設定する方法を解説します。 目次 1. Favicon(ファビコン)とは2. Faviconの作成方法2.1. 1. デザインを決める2.2. 2. …

ウェブサイトブロッカー

ウェブサイトブロッカー(Chrome拡張機能)を使って閲覧制限

デスクワークをしていると、いつの間にかTwitterやニュースサイトをダラダラ見てしまっていて、アッという間にお昼休みなんてことはありませんか? あれ、今日ネットサーフィンばっかりしてて全然仕事してな …

WordPressのテーマ(テンプレート)

【2022年版】SEOに強い!ブログで稼ぐためのWordPressテーマ(有料・無料)を比較しながら初心者向けに徹底解説

このページでは、SEOに強いWordPressテーマを有料のものから無料のものまで厳選して紹介します。 オシャレかどうかだけでテーマを選びがちですが、ブログで稼ぐためにはオシャレなだけではダメなんです …

twitter

Twitterはじめました。

ブログをより多くの人に読んでもらうためにTwitterをはじめました。 @Zakker いままでTwitterはROM専(読む専門)でしか使ってこなかったのでちょっと緊張しますが、そんなことで怯んでは …

WordPress 目次

【WordPress】プラグインなしで動的に目次を表示する方法

最近はWordPressのテーマに最初から目次機能が入っている場合が多いので、あまりニーズはないかもしれませんが、WordPressでプラグインを使わずに動的に目次を表示する方法をご紹介します。 例の …

スポンサー

PROFILE

zakker

Zakker(ザッカー)

零細企業経営者。東京都在住。田舎暮らしに憧れを抱きながら東京で消耗中。いつかその日が来ることを信じて場所にとらわれない働き方の確立を目指して奮闘しています。