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

執筆者:

関連記事

WordPressカテゴリー

【WordPress】カテゴリーの一覧リストを動的に作成する方法

WordPressの固定ページ等でカテゴリーの一覧を表示させたいときのテンプレートタグとその設置方法をご紹介します。 ZAKKIPOSTでは、ヘッダーとフッターのメニューに表示している「記事カテゴリー …

WordPress www

【WordPress】www有無を統一!リダイレクトの設定方法

ホームページやブログのURLは「www」を有りにしても無しにしてもどちらでも表示することができます。 サイトを公開して何も設定しないとどちらのサイトにもアクセスできる状態です。 www.zakkipo …

WordPress301リダイレクト

【WordPress】特定のページをプラグインなしで301リダイレクトする方法

SEOを意識してWordPressを運用している方の中では、パーマリンクを「カテゴリー名+ページ名」に設定している比率が高いですね。 オススメのパーマリンク設定については以下の記事を書きましたので参考 …

WordPressコメント機能

【WordPress】コメント機能を無効化(非表示・削除)する方法

WordPressにはコメント機能が標準で設置されています。 コメント機能は読者の方とコミュニケーションを図るうえでとても便利な機能なのですが、ブログを運営していると、スパムコメントが入ってきたり、嫌 …

AddQuickTag

AddQuickTag(WordPressプラグイン)の設定方法と便利な使い方

WordPressで記事を書く時に文字を太字にしたり、リンクを挿入するときに、あらかじめ設定されているタグを使うと便利ですよね。 もし、自分好みのタグを設定することができたら便利だと思いませんか? そ …

スポンサー

PROFILE

zakker

Zakker(ザッカー)

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