Kanamii

伝えたい想いを自分らしく・・・

kanamii-2042-1

スポンサーリンク

ゼロからのWordPress入門

OGP設定とは?OGP設定の重要性と設定方法 - ゼロからのWordPress入門【10】

2016/10/19

Googleサイトとの連携が完了したら、次は『OGP設定』へと進みます。

OGP設定とは、テーマファイルの<head>内にOGP(Open Graph Protocol)で記述したメタ情報を追加することで、Facebook、Google+、Twitterなど、投稿記事がSNSでシェアされた際に、画像と説明文付きの正しい情報をタイムラインに表示させるための設定です。

・・なんだか小難しい説明となってしまいましたが、設定方法はとても簡単です。

SNSの利用は、基本的にユーザーさん側の判断で行うものですので、利便性の向上の意味も含めて、初期段階のサイト運営でまだFacebookやTwitterを導入されていない方でも、シェアボタンの設置とOGP設定は必ず行いましょう。

スポンサーリンク

OGP設定後の表示例

OGP設定を行っているサイトの投稿記事がFacebookやGoogle+にシェアされた場合、もちろん自分で更新情報をシェアした場合も同様ですが、シェアした本人のタイムラインにはアイキャッチ画像とページタイトル、記事抜粋文が正しく表示されるようになります。

一方、OGP設定が行われていない場合、意図しない画像や抜粋文が表示されてしまうことがあります。

kanamii-2042-2

また、Twitterではこのように「Twitterカード」という形式でページ情報を表示することが可能となります。

OGP設定が行われていない場合は、記事URLだけの表示となります。

kanamii-1081-2

OGP設定方法はテーマによって様々

OGP設定方法は、お使いのWordPressテーマによって手順も必須項目も異なります。

少し前までは、手動またはプラグイン(「All in One SEO Pack」「Open Graph Pro」「Jetpack」など)を利用する方法が一般的でしたが、最近では、テーマ側でOGP設定が標準仕様となっているものが増えている傾向があります。

とても便利な機能ですが、プラグインとテーマでOGP設定の重複が起きないように注意しましょう。

ここでは、無料WordPressテーマ「STINGER」でのOGP設定方法とTwitterカード申請方法を、事前準備を含めて順に説明していきますね。

※2016年8月現在の「STINGER PLUS+」での設定方法となります。

事前準備

Facebookの「fb:admins」をコピー

Facebookの個人アカウントページ→プロフィール画像をクリック→アドレスバーに表示される「&type」の直前の15桁の数字をメモ帳にコピーしておいてください。

この数字は、fb:admins(Admins ID)と呼ばれるもので、STINGERでのOGP設定では必須項目、Facebook側でもOGP設定の際の推奨項目となっていますので、アカウントをお持ちでない方は新規で作成しましょう。

▶Facebook

また、個人とは別にサイト名で作成できる「Facebookページ」については、下記ページにて作成方法を説明しています。

サイト名でのFacebookページ作成とページプラグイン導入方法 - ゼロからのWordPress入門【19】

Twiiterの「ユーザー名」をコピー

Twitterの「ユーザー名」もSTINGERをお使いの場合、Twitterカードを表示させるための必須項目となります。

アカウントをお持ちでない方は、サイトと紐づけを行うアカウントを新規に作成して、@で始まるユーザー名をメモ帳にコピーしておいてください。

▶Twitter

確認と申請用の投稿ページのURLをコピー

FacebookでのOGP設定が正常に反映されているかの確認とTwitterカードの申請には、投稿ページの記事URLのコピーが必要になります。

どのページのURLでもOKですが、まだ初投稿前の方は、あらかじめ公開済みとなっているサンプルページにアイキャッチ画像を追加したものを利用しましょう。

  1. WordPressダッシュボード→投稿→投稿一覧→「Hello world!」の下に表示される「編集」をクリック
  2. 右下に表示されている「アイキャッチ画像を設定」→「ファイルをアップロード」をクリック

    kanamii-2042-4
  3. 適当なアイキャッチ画像(600×315PX以上のサイズ)をアップロード
  4. 更新後、投稿記事ページにアクセスしてアドレスバーのURLをメモ帳にコピーしておいてください。

※OGP設定に関わる全ての作業が終了したら、追加したアイキャッチ画像は削除してくださいね。

STINGERでのOGP設定方法

WordPressダッシュボード→STINGER管理→SNS設定→「OGP設定・Twitter設定」の入力欄に、あらかじめメモ帳にコピーしておいた「fb:admins」とTwitterの「ユーザー名」をペーストします。

「FacebookページのURL」は、サイト名でのFacebookページをまだ作成していない場合は空欄でOKです。

kanamii-2042-5

Facebookデバッガーで確認

テーマ側の設定が完了したら、OGP設定が正常に行われているか、重複はないか等のチェックを行います。

Facebookにログイン後、Sharing Debugger-Facebook Developersにアクセス→あらかじめメモ帳にコピーしておいた投稿済みの記事URLをペーストして「デバッグ」をクリックしてください。

下記のようにアイキャッチ画像とページタイトル、記事抜粋文が正しく表示されていればOKです。
もしも表示されない場合は、赤枠で囲んだ「Scrape Again」をクリックしてキャッシュをクリアしてみてくださいね。

kanamii-2042-6

STINGERでのOGP設定を行った場合、「Share App ID Missing」というエラーが表示されるかと思いますが、これはFacebookの「fb:app_id」(アプリID)を指定していないためです。

kanamii-2042-7

Facebook推奨のOGP設定は、「fb:admins」か「fb:app_id」のどちらかの記述があれば基本的にはOKですので、このままで問題ありません。

もしも、「エラー表示が気になるなぁ・・」という方は、文末のカスタマイズ方法をご参照ください。

Twitterカード申請方法

Twitterカードを表示させるには、Twitter側でも簡単な申請が必要になります。

Twitterにログイン後、Card Validator|Twitter Developersにアクセス→あらかじめメモ帳にコピーしておいた投稿済みの記事URLをペーストして「Preview card」をクリックしてください。

下記のようにTwitterカードのプレビューが表示され、「(ご自身のサイトのドメイン) is whitelisted for summary card」、日本語訳の場合は「(ご自身のサイトのドメイン)はsummaryカードのホワイトリストに登録されています」というメッセージが表示されたらOKです。

kanamii-2042-8

ここまでで、全てのOGP設定は完了となります。
お疲れさまでした。

エラーが出てTwitterカードが表示されない場合は?

STINGERにてOGP設定を行った場合、記事文頭に画像を挿入するとエラーが出る場合があります。
詳しくは、下記ページをご参照ください。

Twitterカードが表示されない・タイムラグがある・修正後もエラーが出る場合の確認ポイントと対処法

OGP設定カスタマイズ編

Facebookデバッガーでのエラーが気になる方や個人と切り分けたサイト運営をお考えの方へ向けたカスタマイズ方法です。

【WordPress - STINGER PLUS+ 】 OGP設定の「fb:admins」を「fb:app_id」に変更する方法

Twitterカードの形式を下記のような「Summary Card with Large Image」へ変更する方法を記事内でご紹介しています。

kanamii-1081-3

【WordPress】STINGER PLUS+ 「Twitterカード」導入方法とサムネイルが正常に表示されない原因と対処法は?

どちらのカスタマイズ方法も手順自体は難しいことはありませんが、テーマファイルを編集する作業が必要となりますので、どちらかというと中級者向けの内容となっています。

興味のある方は、WordPressのバックアップを終えられた位のタイミングでチャレンジされることをおすすめします。

※WordPressのバックアップについては、下記ページで詳しく説明しています。

WordPressのバックアップ① ~FFFTP(FTPS対応版)のインストールと接続設定・基本操作方法~ - ゼロからのWordPress入門【16】

WordPressのバックアップ② ~ファイルとデータベースのバックアップ方法を詳しく~ - ゼロからのWordPress入門【17】

OGP設定が完了したら、次ページは「SEO設定」のお話しへと進みます。

そこまでで設定関係は一区切りとなります。

コンテンツ作成まであと少し!一緒に頑張りましょうね。

この記事が気に入ったら
いいね!しよう

Twitter で

Facebook・Twitterへ最新記事をお届けします

-ゼロからのWordPress入門