こんにちは "osaboo"
です。"@osaboo_Bot"
この記事で解決できる悩み
この記事では、これらのお悩みを解決します。
「まずはブログを始めたい！」という方は、『WordPressブログ完全ガイド』をご覧ください。
開設から運営・収益化までを初心者向けに画像付きでわかりやすく解説しています。
AFFINGER7のSNS / OGP設定とは？
AFFINGER7の「SNS設定」では、記事に表示するSNSボタンや、SNSで記事をシェアしたときの表示方法を設定できます。
SNSボタンは「記事を読んだ人がシェアするための機能」、OGPは「SNSでシェアされたときに記事のタイトルや画像などを表示するための仕組み」です。
それぞれ役割が異なるので、まずは違いを理解しておきましょう。
SNS設定でできること
AFFINGER7のSNS設定では、記事に表示するSNSボタンの種類や表示方法などを設定できます。
たとえば、以下のような項目を変更できます。
- SNSボタンを表示するか
- SNSボタンを表示する位置
- 表示するSNSの種類
- コピーリンクボタンの表示
- SNSボタンのデザイン
SNSボタンを適切に設定しておくと、記事を読んだユーザーがXやFacebookなどで簡単に記事をシェアできるようになります。
なお、SNSボタンの背景色やアイコンの色は、AFFINGER7のカスタマイザーから変更できます。
OGP設定でできること
OGP（Open Graph Protocol）は、記事をSNSでシェアしたときに、記事のタイトル・説明文・画像などを表示するための仕組みです。
たとえば、Xなどに記事のURLを投稿すると、設定したOGP情報をもとに、記事のアイキャッチ画像やタイトルなどがカード形式で表示されます。
AFFINGER7では、SNSで記事をシェアしたときの表示を整えるために、以下のような設定ができます。
- OGPを出力するか
- Xカードの表示形式
- Facebook向けのOGP設定
- トップページのOGP画像
SNSから記事へのアクセスを増やしたい場合は、OGPを適切に設定しておくことが重要です。
SNS / OGP設定はどこにある？
AFFINGER7のSNSやOGPに関する設定は、WordPress管理画面から以下の場所を開きます。
『WordPress管理画面 → AFFINGER管理 → SNS / OGP』
ここからSNSボタンとOGPに関する各種設定を行います。
なお、SNSボタンの背景色やアイコンの色は、『外観 → カスタマイズ → オプション（その他）→ SNSボタン』から変更できます。
SNSの機能・デザインやOGPの設定は「AFFINGER管理」、SNSボタンの色は「カスタマイザー」と覚えておくと、設定場所で迷いにくくなります。
関連記事
-
-
AFFINGER7の初期設定完全ガイド｜導入後に最初にやるべき設定を初心者向けに解説
AFFINGER7の初期設定を初心者向けにわかりやすく解説。設定画面の場所から導入後に最初にやるべき設定、おすすめ設定、SEOやアフィリエイトに役立つ設定まで順番に紹介します。
AFFINGER7のSNS / OGP設定｜おすすめ設定
AFFINGER7の「SNS / OGP」にはさまざまな設定項目がありますが、すべてを細かく変更する必要はありません。
ブログを始めたばかりなら、SNSボタンは必要なものだけ表示し、OGPは有効にするという基本設定で十分です。
特にOGPは、SNSで記事をシェアしたときのタイトルや画像の表示に関わるので、最初に設定しておきましょう。
以下では、AFFINGER7で設定するときにおすすめの項目を順番に解説します。
SNSボタンのおすすめ設定
SNSボタンは、記事を読んだユーザーが気軽にシェアできるよう、よく利用されるSNSに絞って表示するのがおすすめです。
設定に迷ったら、まずは以下のような構成にしておけばOKです。
| 設定項目 | おすすめ設定 |
|---|---|
| SNSボタン | ON |
| 表示位置 | 記事上＋記事下 |
| ボタンデザイン | シンプル |
| 表示するSNS | 利用者の多いSNSを中心に選択 |
| コピーリンク | ON |
SNSボタンの表示位置は、記事上と記事下の両方がおすすめです。
記事を読み始めた段階でシェアしたい人にも、最後まで読んでからシェアしたい人にも対応できます。
また、SNSボタンは種類を増やしすぎると、かえって画面が見づらくなることがあります。自分のブログで利用しているSNSや、読者が利用しそうなSNSに絞って表示しましょう。
「コピーリンク」もONにしておくと、SNSだけでなく、URLをコピーして共有したいユーザーにも対応できます。
OGPのおすすめ設定
OGPは、SNSで記事をシェアしたときに、記事のタイトルや画像などを表示するための設定です。
設定に迷ったら、以下を目安にしてください。
| 設定項目 | おすすめ設定 |
|---|---|
| Xカード | 大サイズ |
| トップページのOGP画像 | 設定する |
Xカードは、記事をシェアしたときに表示されるカードの形式を設定する項目です。記事を画像付きで目立たせたい場合は、大きな画像が表示される「大サイズ」がおすすめです。
また、トップページをSNSでシェアすることも考えて、トップページのOGP画像も設定しておきましょう。
AFFINGER7では、トップページのOGP画像を「AFFINGER管理 → SNS /OGP → SNS設定 → トップページ（投稿・固定ページ以外）アイキャッチ画像」から設定できます。
迷ったらこの設定でOK
AFFINGER7のSNS / OGP設定は項目が多いので、最初からすべてを細かく設定する必要はありません。
「どれを選べばいいかわからない」という場合は、まず以下の設定を目安にしてください。
| 設定項目 | おすすめ設定 |
|---|---|
| SNSボタン | ON |
| ボタンデザイン | シンプル |
| 表示位置 | 記事上＋記事下 |
| 表示するSNS | 必要なSNSのみ |
| コピーリンク | ON |
| Xカード | 大サイズ |
| トップページOGP画像 | 設定する |
この設定にしておけば、SNSで記事をシェアしやすくしながら、シェアされたときの表示も整えられます。
ただし、ブログのジャンルや利用しているSNSによって最適な設定は異なります。
まずは上記を基本設定として、ブログを運営しながら必要に応じて変更していけばOKです。
それぞれの項目については、ここから実際の設定画面を見ながら詳しく解説します。
SNSボタンの設定方法
AFFINGER7では、SNSボタンの表示・非表示や表示位置、表示するSNSなどを設定できます。
SNSボタンは、記事を読んだユーザーがXやFacebookなどで記事をシェアするときに使う機能です。
『WordPress管理画面 → AFFINGER管理 → SNS / OGP → SNS設定』から行います。
ここでは、SNSボタンを使いやすくするための設定を項目ごとに解説します。
SNSボタンを表示する
AFFINGER7では、記事にSNSボタンを表示するかどうかを設定できます。
SNSボタンを表示する場合は、「SNS設定」内のSNSボタンに関する表示項目を有効にします。
SNSボタンを表示しておくと、記事を読んだユーザーがXなどで記事を簡単にシェアできるようになります。
SNSからのアクセスを増やしたい場合は、基本的にSNSボタンを表示しておくのがおすすめです。
ただし、すべてのSNSボタンを表示する必要はありません。実際に利用しているSNSや、読者が利用しやすいSNSに絞って設定しましょう。
SNSボタンの表示位置を設定する
AFFINGER7では、SNSボタンを記事のどの位置に表示するかを設定できます。
表示位置は、読者がシェアしたいと思ったタイミングを考えて決めるのがおすすめです。
迷った場合は、「記事上＋記事下」の両方に表示しておきましょう。
記事上に表示すれば、記事を読み始めた段階ですぐにシェアできます。
一方、記事下に表示すれば、記事を最後まで読んだあとにシェアしたいユーザーにも対応できます。
特に設定にこだわりがなければ、記事上＋記事下の両方に表示しておけばOKです。
なお、SNSボタンを表示しすぎると記事の見た目がごちゃつく場合があるので、サイト全体のデザインとのバランスも確認しましょう。
表示するSNSを設定する
AFFINGER7では、記事に表示するSNSボタンを選択できます。
すべてのSNSを表示するのではなく、ブログで実際に利用しているSNSや、読者が利用しそうなSNSに絞るのがおすすめです。
たとえば、Xを中心に情報を発信しているブログなら、Xのシェアボタンを表示しておきます。
一方、利用していないSNSまで表示するとボタンが増えて記事の見た目が複雑になるので、必要なものだけを選びましょう。
「どれを表示すればいいかわからない」という場合は、Xを基本に、必要に応じて他のSNSを追加するとシンプルにまとめられます。
SNSボタンは、ブログの読者層や運営しているSNSに合わせて設定するのがポイントです。
コピーリンクを表示する
AFFINGER7では、SNSボタンとあわせて記事のURLをコピーするボタンを表示できます。
コピーリンクをONにすると、ユーザーがボタンをクリックするだけで、記事のURLをコピーできます。
SNSでシェアするだけでなく、LINEやメール、メッセージなどで記事を共有したい場合にも便利です。
そのため、SNSボタンを表示する場合は、コピーリンクもONにしておくのがおすすめです。
設定を変更したら、実際の記事を表示して、コピーリンクボタンが正しく表示されるか確認しておきましょう。
SNSボタンのデザインを変更する
AFFINGER7では、SNSボタンのデザインを「AFFINGER管理」から設定できます。
『WordPress管理画面 → AFFINGER管理 → SNS / OGP → SNS設定』
デザインに迷ったら、サイトになじみやすいシンプルなスタイルがおすすめです。
設定を変更したら、実際の記事を表示して、パソコンとスマートフォンの両方で見た目を確認しましょう。
SNSボタンのデザインは、「デフォルト・シンプル・丸」の3種類から選択できます。以下を参考に設定してください。
デフォルト
シンプル
シンプル+丸
SNSボタンの色を変更する
SNSボタンの色は、AFFINGER7のカスタマイザーから変更できます。
『外観 → カスタマイズ → オプション（その他）→ SNSボタン』から設定画面を開き、各SNSボタンの背景色やアイコンの色を変更します。
サイトのカラーに合わせて設定すると、全体のデザインを統一できます。
オプション（その他）
➡︎
SNSボタン
➡︎
詳細設定項目
⬇︎
OGP設定の方法
AFFINGER7では、SNSで記事をシェアしたときに表示されるタイトルや画像などのOGP情報を設定できます。
OGPを設定しておくと、SNS上で記事の内容がわかりやすく表示されます。
ここでは、XカードやトップページのOGP画像など、基本的な設定方法を解説します。
OGPとは？
OGP（Open Graph Protocol）とは、WebページをSNSでシェアしたときに、タイトルや画像などを表示するための仕組みです。
たとえば、記事のURLをXなどに投稿すると、記事のタイトルやアイキャッチ画像がカード形式で表示されます。
このSNS上の表示を整えるために設定するのがOGP設定です。
『WordPress管理画面 → AFFINGER管理 → SNS / OGP』から行います。
特に理由がなければ、OGPは設定しておくのがおすすめです。（詳しい設定方法は、以下の関連記事でご紹介しています。）
- Facebook App ID（OGP用）
- FacebookページのURL
- X（旧Twitter）アカウント@
これで、SNSで記事をシェアした際に、設定したタイトルや画像などのOGP情報が利用されるようになります。
関連記事
twitter（URL）・facebook（URL）などの設定は、以下の記事で解説しています。あわせてご覧ください。
-
-
AFFINGER7のプロフィールカードの作り方｜デザインカスタマイズ手順
AFFINGER7のプロフィールカードの作り方を初心者向けに解説。WordPressのプロフィール設定から、ヘッダー画像・アバター画像の設定、デザインのカスタマイズ、ウィジェットへの設置方法、表示されないときの対処法まで画像付きでわかりやすく紹介します。
ハッシュタグを設定する
AFFINGER7では、Xで記事をシェアするときに追加するハッシュタグを設定できます。
設定しておくと、記事をシェアする際に指定したハッシュタグを付けて投稿できます。
ブログで使用するハッシュタグが決まっている場合は、ここで設定しておくと便利です。
Xカードを設定する
Xカードは、記事をXでシェアしたときに表示される画像やタイトルなどのカード形式を設定する項目です。
AFFINGER7では、Xカードの表示形式を選択できます。
ブログ記事を画像付きで目立たせたい場合は、大きな画像が表示されるタイプがおすすめです。
- 大（summary_large_image）
設定後は、実際に記事のURLをXでシェアしたときの表示を確認しておきましょう。
小（summary）
大（summary_large_image おすすめ
トップページのOGP画像を設定する
トップページをSNSでシェアしたときに表示する画像は、AFFINGER7のSNS設定から指定できます。
「トップページ（投稿・固定ページ以外）アイキャッチ画像」から画像を設定します。
トップページをSNSでシェアすることも考えて、サイトの内容がひと目でわかる画像を設定しておくのがおすすめです。
なお、トップページの表示方法によって設定が異なる場合があるので、画像を設定したあとはSNSでの表示も確認しておきましょう。
関連記事アイキャッチ画像のおすすめサイズやファイル形式については、以下の記事で詳しく解説しています。あわせてご覧ください。
SNS / OGP設定でよくあるトラブル
SNSで記事をシェアした際に、「画像が表示されない」「以前の画像が表示される」といった問題が起こることがあります。
ここでは、AFFINGER7でSNS / OGPを設定したあとに起こりやすいトラブルと、その対処方法を解説します。
SNSで画像が表示されない
SNSで記事をシェアしたときに、アイキャッチ画像やOGP画像が表示されない場合があります。
主な原因として、OGP設定や画像の設定が正しくできていないことが考えられます。
まずは以下を確認してみましょう。
- OGPに使用する画像を設定しているか
- アイキャッチ画像が正しく設定されているか
- OGPの設定が正しく反映されているか
設定を確認しても画像が表示されない場合は、SNS側のキャッシュが原因の可能性もあります。
設定変更後は、時間を置いてから再度確認してみましょう。
古い画像が表示される
SNSで記事をシェアした際に、設定を変更する前の古い画像が表示されることがあります。
これは、SNS側に以前のOGP情報がキャッシュされていることが主な原因です。
画像を変更したのに反映されない場合は、時間を置いてから再度確認してみましょう。
また、SNSによってはOGP情報を再取得するためのツールを利用できる場合があります。
OGP設定が反映されない
OGPの設定を変更したのに、SNSで表示が変わらない場合があります。
まずは、設定した画像やXカードの設定内容を確認しましょう。
設定に問題がない場合は、SNS側に以前の情報がキャッシュされている可能性があります。
変更後すぐに反映されないこともあるので、時間を置いてから再度確認するのがおすすめです。
トップページだけ画像が表示されない
記事ではOGP画像が表示されるのに、トップページをシェアしたときだけ画像が表示されない場合があります。
この場合は、トップページ用のOGP画像が設定されているか確認しましょう。
『WordPress管理画面 → AFFINGER管理 → SNS / OGP → SNS設定』
を開き、「トップページ（投稿・固定ページ以外）アイキャッチ画像」に画像を設定します。
設定後は、実際にトップページのURLをSNSでシェアして、画像が表示されるか確認してみましょう。
AFFINGER7のSNS / OGP設定でよくある質問
ここでは、AFFINGER7のSNS / OGP設定でよくある質問をまとめます。
OGPは設定しないとダメ？
OGPは、SNSで記事をシェアしたときの表示を整えるために重要な設定です。
SNSからのアクセスを考えるなら、OGPを適切に設定しておくことをおすすめします。
Xカードは「大」と「小」のどちらがおすすめ？
記事を画像付きで目立たせたい場合は、「大」がおすすめです。
大きな画像が表示されるので、タイムライン上で記事の内容を伝えやすくなります。
SNSボタンは全部表示した方がいい？
すべてのSNSボタンを表示する必要はありません。
実際に利用しているSNSや、読者が利用しそうなSNSに絞ると、記事周りをすっきり見せられます。
トップページにもOGP画像は必要？
トップページをSNSでシェアする可能性があるなら、設定しておくのがおすすめです。
記事のアイキャッチ画像とは別に、トップページ用のOGP画像を設定できます。
関連記事トップページのSEO対策やOGP設定については、以下の記事で詳しく解説しています。あわせてご覧ください。
-
-
AFFINGER7でトップページのSEO・SNS設定方法｜OGP設定と表示最適化の手順
AFFINGER7でトップページのSEO・SNS設定を行う方法を解説。OGP設定やSNS表示の最適化、検索エンジン向けの設定ポイントまでわかりやすく紹介します。
まとめ！AFFINGER7のSNS / OGP設定を解説｜おすすめ設定と使い方
AFFINGER7のSNS / OGP設定で迷ったら、まずはSNSボタンを表示し、XカードとトップページのOGP画像を設定しておけばOKです。
基本設定を整えておくことで、SNSで記事をシェアされたときの表示を最適化できます。
まずは必要な項目だけ設定して、ブログの運営に合わせて調整していきましょう。
