SNS WordPress ブログ運営

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

投稿日:2018年8月12日 更新日:

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, ブログ運営
-, ,

執筆者:

関連記事

ウェブサイトブロッカー

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

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

Seach Console

Search Consoleの登録方法と使い方を初心者向けに解説

ブログをはじめたばかりの方が意外と忘れがち、先送りしがち、なのが、この「Search Console」。 ブログの立ち上げでやることがいっぱいあるのに、「分析?そんな先のことまで気が回るわけないよ」っ …

MixHost x MuuMuu

ムームードメインで購入したドメインをMixHostに設定する方法

この記事はムームードメインでドメインを購入済みでMixHostの契約も済んでいる方に向けた記事です。 ドメインをこれから探す方は以下の記事をご覧ください。 これからブログをはじめる方は必読「独自ドメイ …

MixHostキャンペーン

MixHost・1ヶ月間限定10%OFF!【期間限定キャンペーン】

レンタルサーバーの比較記事で取り上げ、当サイトでも利用させてもらっているMixHostが1ヶ月限定の10%OFFキャンペーンを開始しました! 2018年にブログをはじめる方に向けた「レンタルサーバーの …

Twitterフォローボタン

Twitterのフォローボタンにフォロワー数を付けて設置する方法

ブログやホームページにTwitterのフォローボタンを設置しようとしたときに、Googleで検索して古い記事を読むと、いまと設置方法が違うので困っている方も多いと思います。 (この記事は2018年8月 …

スポンサー

PROFILE

zakker

Zakker(ザッカー)

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