WordPress – All in One SEO Pack – ソーシャルメディアの設定方法

All in One SEO Pack をインストールしたらソーシャルメディアの設定も行っておきましょう。これを行うとシェアボタンでシェアされたときの表示が大きく変わります。

この記事は All in One SEO Pack がインストール済みで、一般設定が終わっている前提で話を進めていきます。インストールや設定が終わっていない方は、以下のページを参考に基本的な設定を行ってください。

WordPress – All in One SEO Packの使い方&設定を徹底解説!翻訳付き

WordPress – All in One SEO Pack – XMLサイトマップの設定方法

設定するとどうなるの?


ブログのソースコードに OGP タグが追加されます。

OGP タグの例

<meta property="og:title" content="Game Users 開発ノート" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://gameusers.org/dev/blog/" />
<meta property="og:image" content="https://gameusers.org/dev/blog/wp-content/uploads/2017/12/ogp_image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:site_name" content="Game Users 開発ノート" />

OGP というのは Open Graph Protocol の略称で、SNS にウェブサイトの情報を伝えるためのプロトコル(ルールのようなもの)です。

All in One SEO Pack のソーシャルメディア設定を行うと、この Open Graph Protocol に従って、ブログの各情報が OGP タグで出力されるようになります。

 

Facebook

Twitter

ソーシャルメディア設定を行って、記事ごとにアイキャッチ画像を作成すると、上記のような感じで大きく目立つ画像が、SNS でシェアされたときに表示されるようになります。画像があるのとないのではシェア数にも大きな違いがでるので、ぜひ設定しておきましょう。

All in One SEO Pack を利用した投稿時の設定方法は、以下の記事で解説しています。

WordPressのアイキャッチ画像とは?おすすめのサイズも紹介

ソーシャルメディアの設定方法


ソーシャルメディアの設定方法について解説していきます。一部、Facebook と Twitter のアカウントが必要な設定があります。Facebook または Twitter のシェアボタンを設置する方は、それぞれのアカウントを用意してください。

 

1. 機能管理ページに移動する

ダッシュボード > All in One SEO > 機能管理をクリック(タップ)して、機能管理ページに移動しましょう。

 

2. ソーシャルメディアを有効化する

ソーシャルメディアと書かれている部分の Activate ボタンをクリック(タップ)しましょう。表示が Deactivate に変わると、左のメニューにソーシャルメディアという項目が追加されます。

 

3. ソーシャルメディアの設定ページに移動する

左メニューのソーシャルメディアを選んでください。

 

4. 設定を行う

画像の矢印の場所でソーシャルメディアの設定を行います。各項目について解説していきますので、記事を参考にしながら設定してみてください。

 

ホームページ設定


ブログのトップページの設定を行います。

 

  • AIOSEO の Title と Description を使用する

一般設定でホームタイトルとホームディスクリプションを入力した場合は、チェックしてください。

ブログトップページのタイトルと、ディスクリプション(ブログの簡単な説明文)を設定します。

この設定で出力されるタグ

<meta property="og:title" content="タイトル" />
<meta property="og:description" content="ディスクリプション" />

 

一般設定のホームタイトル&ホームディスクリプション

一般設定のこちらのフォームでホームタイトルとホームディスクリプションを入力した場合は、チェックすることで同じタイトルとディスクリプションが使われます。SNS 用と分ける必要はあまりないと思いますので、チェックすることをおすすめします。

【公式解説文の翻訳】
あなたのホームのOpen Graph Title(OG:Title)とOpen Graph Description(OG:Description)としてAll SEO PackのGeneral Settings画面で設定されているHome TitleとHome Descriptionを使用する場合は、このチェックボックスをオンにしますページ。これは、あなたのホームページがすべてのソーシャルネットワーキングサイトと同じ方法でGoogle検索結果に表示されるようにするための素晴らしい方法です。

注:このボックスをオンにすると、画面の下にある[ホームタイトル]と[ホームの説明]フィールドが表示されなくなります。

 

  • サイト名

ブログのサイト名を入力してください。

最初から入力されていると思いますので、変更する必要はありません。

この設定で出力されるタグ

<meta property="og:site_name" content="サイト名" />

【公式解説文の翻訳】
ここにあなたのサイト名を追加することで、あなたのウェブサイトやブログがソーシャルネットワーキングサイトでどのように認識されるかを制御することができます。

 

  • ホームタイトル

ブログのタイトルを入力してください。

「AIOSEO の Title と Description を使用する」にチェックを入れていない場合、タイトルを入力してください。多くの場合、サイト名と同じ(もしくは若干追記した)テキストになると思います。

この設定で出力されるタグ

<meta property="og:title" content="タイトル" />

 

  • ホームディスクリプション

ブログの説明文を入力してください。

「AIOSEO の Title と Description を使用する」にチェックを入れていない場合、ブログの簡単な説明文を入力してください。あまり長くなりすぎないように気をつけてください。

この設定で出力されるタグ

<meta property="og:description" content="ディスクリプション" />

 

  • ホーム画像

画像をアップロードするか、画像の URL を入力してください。

ブログトップページがシェアされたときに SNS で表示される画像になります。画像の推奨サイズはこちらの記事で解説していますので、チェックしてみてください。

WordPressのアイキャッチ画像とは?おすすめのサイズも紹介

この設定で出力されるタグ

<meta property="og:image" content="https://localhost/ogp_image.jpg" />

<meta name="twitter:image" content="https://localhost/ogp_image.jpg" />
 
<meta itemprop="image" content="https://localhost/ogp_image.jpg" />

【公式解説文の翻訳】
画像アップロードボタンを使用して、サイトのホームページのOG:画像として使用する画像をアップロードするか、画像ファイルのURLを提供されたフィールドに貼り付けることができます。

OG:Imageは、最小600ピクセル×315ピクセルのサイズでなければなりません。ただし、Facebookは、網膜や高解像度の画面に最適な表示のために、1200ピクセル以上630ピクセル以上の画像を使用することを推奨しています。詳細は、ドキュメントを参照してください。画像ファイルは5MBを超えないようにしてください。

 

画像設定


Facebook の記事ページに表示する画像の設定を行います。

 

  • OG:Image ソースを選択

Default Image を選んでください。

【公式解説文の翻訳】
このドロップダウンを使用して、デフォルトで og:image として使用される画像を投稿またはページ用に選択します。それぞれのオプションの説明は次のとおりです。

Default Image(デフォルトイメージ) – ソーシャルメタ設定ページでデフォルトOGイメージとして指定されたイメージを使用します

Featured Image(注目画像) – 投稿からのおすすめ画像を使用する

First Attached Image(最初に添付された画像) – 投稿に最初に添付された画像を使用します(メディアの添付ファイル)

First Image In Content(コンテンツの最初の画像) – 投稿のコンテンツにある最初の画像を使用する

Image From Custom Field(カスタムフィールドからのイメージ) – カスタムフィールド(設定で指定されたフィールド名)から指定されたイメージを使用します。

Post Author Image(投稿者画像) – これは投稿/ページの作者にアバターを使用します

First Available Image(最初に利用可能な画像) – これらのオプションすべてを自動的に通過します

 

  • 画像が見つからない場合はデフォルトを使用

チェックしてください。

SNS 用の画像が設定されていない場合に、デフォルトの OG:Image に設定されている画像を代わりに利用します。

【公式解説文の翻訳】
この設定は、Select OG:Image Sourceのオプションを使用してイメージが見つからない場合、All in One SEO PackがデフォルトのOGイメージに戻ります。

 

  • デフォルトの OG:Image

画像をアップロードするか、画像の URL を入力してください。

上記の設定とセットです。

【公式解説文の翻訳】
デフォルト画像フィールドでは、メディアライブラリから画像を選択したり、画像をアップロードしたり、デフォルトのOGとして使用される画像のURLに貼り付けることができます。ソーシャルネットワーキングサイトによる画像。

OG:Imageは、最小600ピクセル×315ピクセルのサイズでなければなりません。ただし、Facebookは、網膜や高解像度の画面に最適な表示のために、1200ピクセル以上630ピクセル以上の画像を使用することを推奨しています。詳細は、ドキュメントを参照してください。画像ファイルは5MBを超えないようにしてください。デフォルト画像は、特定のページまたは投稿に対してOG:画像が指定されていない場合にのみ使用されます。 OGの選択:画像ソースは、OG:画像にデフォルトで使用される画像を管理するオプションを提供しますが、個々の投稿の設定でこれを上書きできます。

 

  • デフォルトの画像幅

設定した画像の横幅を入力してください。

【公式解説文の翻訳】
ソーシャルメディアに使用される画像の幅を設定できます。各ソーシャルメディアネットワークには、独自の優先イメージサイズがあります。たとえば、Facebookは画像の幅を1200ピクセルにしたいとします。数字はここに入力し、単語を入力しないでください(例:1200)。

 

  • デフォルトの画像高さ

設定した画像の高さを入力してください。

【公式解説文の翻訳】
ソーシャルメディアに使用される画像の高さを設定できます。各ソーシャルメディアネットワークには、独自の優先イメージサイズがあります。たとえば、Facebookは画像の高さを630ピクセルにしたいとします。ここには数字だけを入力し、単語は入力しないでください(例:630)。

 

  • 画像にはカスタムフィールドを利用する

空欄にしてください。

【公式解説文の翻訳】
このフィールドを使用して、OG:Imageに使用するカスタムフィールドを選択することができます。このボックスにカスタムフィールドの名前を入力します。

 

ソーシャルプロフィールリンク


こので設定した値は Google ナレッジグラフに表示されます。

企業や店舗、商品などの情報が検索結果の右側に表示されますが、ここで設定したからといってすぐに表示されるものではないようです。Google ナレッジグラフを利用したい方は検索して調べてみてください。

 

Facebook 設定


Facebook のシェア設定です。Facebook のシェアボタンを利用される方は、Facebook 管理者 ID、または Facebook App ID を必ず設定してください。

 

  • Facebook 管理者 ID

Facebook の管理者 ID を入力してください。

Facebook のプロフィールページの URL を以下のサイトに入力すると、自分の管理者 ID がわかります。それを入力してください。

Find your Facebook ID

ただし管理者 ID を入力すると Facebook のユーザーが特定される可能性があります。本名などをオープンにしている方は問題ないと思いますが、ブログと個人を紐付けされたくない方は、こちらを空欄にして、下の項目の Facebook App ID を代わりに利用してください。

この設定で出力されるタグ

<meta property="fb:admins" content="管理者ID" />

【公式解説文の翻訳】
ここにあなたのFacebook管理者IDを入力してください。複数のFacebook Admin IDをコンマで区切って入力することができます。このツールを使ってあなたのFacebook IDを調べることができます。http://findmyfbid.com/

 

  • Facebook App ID

Facebook の App ID を入力してください。

Facebook の App ID は取得に少し手間がかかります。必要な方は取得方法を検索してください。Facebook のシェアボタンを利用する場合は、管理者 ID か App ID の両方を入力する、またはどちらかを必ず入力しましょう。

この設定で出力されるタグ

<meta property="fb:app_id" content="App ID" />

【公式解説文の翻訳】
ここにあなたのFacebook App IDを入力してください。 Facebook App IDを取得する方法については、https://developers.facebook.com/docs/apps/registerを参照してください。

 

  • 記事のタグを自動生成する

チェックしてください。

下3つのチェックボックスに関連します。このタグの重要性は不明なのですが、掲載していて損はないと思いますのでチェックを推奨しています。

この設定で出力されるタグ

<meta property="article:tag" content="タグ" />

【公式解説文の翻訳】
この設定では、オブジェクトタイプが「記事」の投稿のFacebook記事タグの自動生成が有効になります。記事タグは、その投稿に設定されたメタキーワード、投稿が属するカテゴリまたはタグから生成されます。これは、この設定が有効になっているときに表示される3つのチェックボックスに基づいています。これは、オブジェクトタイプのドロップダウンで設定されたオブジェクトタイプが記事に設定されている場合、任意のポストタイプに対して機能します。

 

  • 記事のタグにキーワードを使用

チェックしてください。

この設定で出力されるタグ

<meta property="article:tag" content="キーワード" />

【公式解説文の翻訳】
この設定は、ポストのメタキーワードからFacebookの記事タグを自動的に生成します。

 

  • 記事のタグにカテゴリーを使用

チェックしてください。

この設定で出力されるタグ

<meta property="article:tag" content="キーワード" />

【公式解説文の翻訳】
この設定は、投稿のカテゴリから自動的にFacebook記事タグを生成します。

 

  • 記事タグで投稿タグを使用

チェックしてください。

この設定で出力されるタグ

<meta property="article:tag" content="投稿タグ" />

【公式解説文の翻訳】
この設定は投稿の投稿タグから自動的にFacebook記事タグを生成します。

 

  • Enable Facebook Meta for Post Types

投稿・固定ページをチェックしてください。

Facebook の OGP タグを有効にしたいページの種類を選んでください。通常は投稿(個々の記事)と固定ページを選んでおくといいでしょう。

【公式解説文の翻訳】
この設定を使用すると、「ページ」、「投稿」、「カスタム投稿タイプ」などのコンテンツタイプに対して、Open Graphメタを有効にすることができます。

ここで選択したチェックボックスに基づいて、コンテンツタイプごとにデフォルトのオブジェクトタイプを設定できる新しいドロップダウンフィールドが表示されます。

 

  • Facebook Publisher の記事を表示

Facebook ページの URL を入力してください。

Facebook ページの URL を入力しましょう。シェアされたときに Facebook ページにリンクされます。Facebook ページではなく、Facebook のアカウントと紐付けたい方は、下の項目の 記事に Facebook の著者を表示を設定してください。

この設定で出力されるタグ

<meta property="article:publisher" content="https://www.facebook.com/ユーザーネーム" />

【公式解説文の翻訳】
ここにあなたのFacebookページのURLを入力することで、あなたのFacebookページに記事をリンクすることができます。これは、オブジェクトタイプが記事に設定されているコンテンツに対してのみ機能します。

 

  • 記事に Facebook の著者を表示

著者を公開したい方はチェック、公開したくない方はチェックを外してください。

ここをチェックすると、ダッシュボード > ユーザー の各ユーザー編集ページで、Facebook アカウントの URL を入力する欄が追加されます。

画像赤線の場所に Facebook のアカウント URL を入力しましょう。

シェアされた際に、あなたの Facebook のアカウントも一緒に表示されるようになります。こちらも Facebook 管理者 ID と同じで、Facebook のアカウントが公開されることになりますので、公開したくない方は入力しないようにしましょう。

この設定で出力されるタグ

<meta property="article:author" content="https://www.facebook.com/ユーザーネーム" />

【公式解説文の翻訳】
このオプションは、ユーザー編集画面に入力されたFacebookプロファイルURLを記事:作成者タグとして使用します。これは、そのユーザーが作成した記事をFacebookのプロフィールにリンクします。これは、オブジェクトタイプが記事に設定されているコンテンツに対してのみ機能します。

 

  • 投稿 オブジェクト型 (post)
  • 固定ページ オブジェクト型 (page)

両方とも記事を選んでください。

【公式解説文の翻訳】
ここでは、コンテンツの種類(ページ、投稿、カスタム投稿タイプ)ごとにOG:Typeを設定できます。たとえば、製品のカスタムポストタイプがある場合、その製品タイプにオブジェクトタイプを選択することができます。

注:Open Graph Object Typesの標準化されたリストがあります。完全なリストは、Open Graph Object Typesを参照してください。不適切なオブジェクトタイプを選択すると、特定のソーシャルネットワーキングサイトにコンテンツがどのように表示されるかに影響を及ぼす可能性のあるエラーを生成する可能性があります。

 

Twitter 設定


Twitter のシェア設定です。Twitter のシェアボタンを利用される方は、しっかり設定しておきましょう。

 

  • デフォルト Twitter カード

要約の大きい画像を選んでください。

記事がシェアされたときに大きい画像をデフォルトで使うという指定です。これは各記事の投稿ページで後から編集できます。

この設定で出力されるタグ

<meta name="twitter:card" content="summary_large_image" />

【公式解説文の翻訳】
このオプションを使用すると、デフォルトですべてのコンテンツに使用されるTwitterカードタイプを設定できます。この設定は、各ポストまたはページごとにソーシャル設定タブでオーバーライドできます。

 

  • Twitter サイト

Twitter のユーザー名を@つきで入力してください。

この設定で出力されるタグ

<meta name="twitter:site" content="@Twitterのユーザー名" />

【公式解説文の翻訳】
これはウェブサイトのオーナーのTwitterユーザー名です。 @semperfidevなどです。 @記号を含める必要があります。これはTwitterとして使用されます:Twitterカードに表示されるサイト。

 

  • Twitter 投稿者を表示

投稿者を公開したい方はチェック、公開したくない方はチェックを外してください。

ここをチェックすると、ダッシュボード > ユーザー の各ユーザー編集ページで、Twitter アカウントの URL を入力する欄が追加されます。

画像赤線の部分に Twitter のユーザー名を@つきで入力してください。上記の Twitter サイト と内容が近いので、サイトを入力している場合は、必ずしも入力する必要はありません。例えば複数人で管理しているブログなどで利用すると、OGP タグに表示される著者が記事を書いた人ごとに代わります。

この設定で出力されるタグ

<meta name="twitter:creator" content="@Twitterのユーザー名">

【公式解説文の翻訳】
このオプションを使用すると、[ユーザープロファイル]画面の[ユーザー]の下にTwitterフィールドが表示または非表示になります。ユーザープロファイル画面のTwitterフィールドは、そのユーザーが作成したコンテンツの作成者のTwitterユーザー名を設定するために使用されます。 @semperfidevなどです。 @記号を含める必要があります。これは、Twitterカードに表示されるTwitter:Creatorとして使用されます。

 

  • Twitter ドメイン

ドメイン名を入力してください。

http:// または https:// は含めないようにしてください。example.com こういった感じです。この情報は Twitter カードに表示されます。

この設定で出力されるタグ

<meta name="twitter:domain" content="ドメイン名" />

【公式解説文の翻訳】
これはあなたのサイトのドメイン名です。たとえば、semperplugins.comです。 http://は含めないでください。これはTwitter:ドメインとして使用され、Twitterカードに表示される可能性があります。

 

詳細設定


基本的には触らなくていい設定です。翻訳を掲載しておきますので、必要な方は参考にしてください。

 

  • タイトル内のショートコードを実行

【公式解説文の翻訳】
このオプションを有効にすると、Open Graph Titleを生成するときにPostまたはPage Titleのショートコードが確実に実行されます。

 

  • ディスクリプション内のショートコードを実行

【公式解説文の翻訳】
このオプションを有効にすると、Open Graph Descriptionを生成するときにPostまたはPageの内容のショートコードが確実に実行されます。これは、OG記述の自動生成が有効になっている場合にのみ適用されます。

 

  • 自動生成 Open Graph 説明文に本文を使用

【公式解説文の翻訳】
デフォルトでは、All in One SEO Packは、自動生成されたOpen Graphの説明として投稿からの抜粋を使用し、抜粋が存在しない場合はコンテンツを使用します。この動作を変更したいユーザーもいます。この設定では、自動生成されたOpen Graphの説明に常にポストコンテンツが使用され、ポスト抜粋は無視されます。

WooCommerceのユーザーは、この設定が追加され、自動生成されたOpen Graphの説明がProduct Short Descriptionではなく製品コンテンツから生成されることに注意してください。 OGの説明にProduct Short Descriptionを使用しない場合は、この設定を有効にします。

 

ソーシャルメタ情報をスキャン


利用しているテーマによっては All in One SEO Pack のソーシャルメディア設定と、同じ OGP タグをソースコード内に出力しているかもしれません。

それをチェックするための機能です。いますぐスキャンを押してチェックしてみてください。

重複の meta タグが見つかりませんでした。

と表示された場合は問題ありません。

【公式解説文の翻訳】
上記の「Jetpackタグを無効にする」で述べたように、プラグインやテーマによってはOpen Graphメタタグも出力されることがあります。サイトに複数のOpen Graphメタタグが存在する場合は、特定のソーシャルネットワーキングサイトにコンテンツがどのように表示されるかに影響する可能性のあるエラーが発生する可能性があります。どのプラグインをインストールしたか、またそれらを使用している目的に応じて、Open Graphメタを制御するために使用するプラグインを決定する必要があります。

[ソーシャルメタデータのスキャン]セクションでは、他のプラグインやテーマによって作成されたソーシャルメタタグが重複しているかどうか、サイトをスキャンできます。この機能は、潜在的に重複するメタをスキャンしてアラートするだけで、問題は解決しません。重複したソーシャルメタタグを修正するには、ソーシャルメタのソースを特定して削除する必要があります。

 

最後に


OGP タグが存在していないと、シェア機能が制限されたり、シェアが正常に行われなかったりしますので、ブログにシェアボタンを置く方は必ず設定しておきましょう!

WordPress では公式のシェアボタンが表示されるプラグインを利用されている方も多いと思いますが、そういった方におすすめしたいのが、Game Users Share Buttons です!

動作が軽快で、デザインも好きなものに変更でき、カスタマイズ性も高いので、ぜひ一度使ってみてください。

WordPressのおすすめシェアボタンプラグイン、高速表示&好きなデザインに変更できます

関連リンク


  1. WordPress – All in One SEO Packの使い方&設定を徹底解説!翻訳付き
  2. WordPress – All in One SEO Pack – XMLサイトマップの設定方法
  3. WordPress – All in One SEO Pack – ソーシャルメディアの設定方法
  4. WordPress – All in One SEO Pack – 投稿ページの設定方法

2 Replies to “WordPress – All in One SEO Pack – ソーシャルメディアの設定方法”

  1. はじめまして。
    ブログを立ち上げたばかりでわからないことだらけですが、
    こちらのサイトが非常にためになるので参考にさせていただいております。

    記事の中で
    「OG:Imageは、最小600ピクセル、最大315ピクセルのサイズでなければなりません。」

    と書いてありますが、違和感があったため原文を確認したところ

    「The OG:Image should be a minimum size of 600 pixels wide by 315 pixels high.」
    と書いてありました。

    「最小600ピクセル、最大315ピクセルのサイズ」
    ではなく、
    「最小600×315ピクセルのサイズ」
    と訳したほうが適切ではないでしょうか?

    1. Google翻訳をそのまま載せているだけだなので
      おかしな部分も多々あるかもしれません。
      ご指摘していたいだいた点を修正しておきました。
      ありがとうございます。

あづみ にコメントする コメントをキャンセル

メールアドレスが公開されることはありません。

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