All in One SEO PackでSNSのシェア設定をおこなう
2017/01/31
おすすめ記事個人開発のWebアプリがツイッター世界トレンド1位になったけどいろいろ辛かった話 #チョコボックス裏話 | vdeep
vdeep管理人okutani(@okutani_t)です。WordPressでサイトを構築しているユーザーで「All in One SEO Pack」を使ってSEO対策をしている方はかなり多いのではないでしょうか。
本記事ではこのプラグインを使って、SNSのシェア設定をおこなう方法を説明しています。
シェアの設定をおこなうことでTwitterやFacebookに記事が投稿される際に、アイキャッチ画像や導入文を表示することができます。
もし「All in One SEO Pack」の導入と初期設定が終わっていない方は、こちらの記事を参考にして設定を終えておきましょう。
ではさっそく設定を行っていきます。
スポンサーリンク
もくじ
Social Metaの有効化
ダッシュボードから「All in One SEO」→「Feature Manager」をクリック。「Social Meta」の下にある「Activate」をクリックして有効化しましょう。有効化されると「Social Meta」アイコンに色が付きます。
これでSNSでシェアをおこなう設定が有効になりました。有効化されるとダッシュボードの「All in One SEO」の中に「Social Meta」項目が追加されているので、クリックして設定画面を開きます。
ではこの画面から初期設定を行っていきましょう。
シェア全般の設定をおこなう
まず始めに、SNSシェア全般に対する設定を行っていきます。
ディスクリプションの自動生成
「Autogenerate OG Descriptions」にチェックを入れると、ディスクリプションを自動で生成してくれます。自動でOKという方はチェックしておきましょう。手動で設定したい方はチェックを外しておきます。
トップページのシェア設定
「Home Page Settings」ではトップページがシェアされた時の設定をおこなうことができます。
「Use AIOSEO Title and Description」にチェック、「Site Name」にサイトの名前、「Upload Image」からトップページがシェアされた際に使う画像をアップロードします。
画像サイズは「高さ1200px × 横630px」が推奨のようです。比率が2:1であれば小さい画像でもOKですが、シェア時の画像サイズが小さくなります。
デフォルトのシェア設定
「Image Settings」で記事がシェアされた際にどの画像を利用するか設定できます。
「Select OG:Image Source」は「アイキャッチ画像」を選択、「Use Default If No Image Found」にチェックを入れるとアイキャッチ画像が無かった時の画像を選択できるようになります。
アイキャッチ画像が見当たらなかった場合の画像を「Upload Image」からアップロードしておきましょう。画像サイズは「高さ1200px × 横630px」が推奨です。
私はサイトのヘッダーで使っていた画像をリサイズしてアップロードしました。
シェア全般の設定はこれで完了です。
Facebookのシェア設定
次にFacebookのシェア設定を行っていきましょう。
シェア設定をおこなう前に、「Profile Admins ID」を先に取得します。このIDがないと、Facebookのシェア設定をおこなうことができませんので必ず用意しておきましょう。
Profile Admins IDの取得
まず、ご自身のFacebookにアクセスします。アクセスしたらアドレスバーの「https://www.facebook.com/〇〇」の〇〇を部分をメモしておきます。
次にメモした〇〇を「https://graph.facebook.com/〇〇」としてアクセスします。アクセスしたら、一番上のidの部分が「Profile Admins ID」に該当するのでメモしておきましょう。
では設定画面に戻ります。
「Profile Admins ID」に今取得したID、「Show Facebook Publisher on Articles」にご自身のFacebookのURL(https://www.facebook.com/〇〇)を貼り付け、「Show Facebook Author on Articles」にチェックを入れます。
「Show Facebook Author on Articles」はチェックを入れておくと、ご自身のFacebookページが記事にリンクされます。お好みで設定して下さい。
Facebookのシェア設定は以上です。
Twitterのシェア設定
Twitterのシェア設定をおこないましょう。
「Twitter Settings」の「Default Twitter Card」では、シェアの際の形式を選ぶことができます。「Summary」「Summary Large Image」「Photo」のいずれかが選択可能です。
「Summary」は説明文と画像が表示されます。
「Summary Large Image」は説明文と大きな画像が表示されます。
「Photo」は大きな画像が表示されます。
カードを選択したら次のように入力していきます。
「Twitter Site」にご自身のTwitterアカウント名（＠〇〇）を入力、「Show Twitter Author」にチェック、「Twitter Domain」に「http://を取り除いたサイトURL」を入力します。
「Show Twitter Author」にチェックを入れると、ダッシュボードの「ユーザー」→「あなたのプロフィール」からTwitterアカウント名(＠〇〇)が入力できるようになります。入力するとTwitter カードに著者情報が追加されます。
設定を検証ツールに送信
Twitterのシェア設定は一度検証ツールでサイト申請を行わないと反映されないため、下記のサイトより申請をおこないましょう。
LINKCard Validator | Twitter Developers
サイトにアクセスしたら、「サイトのURL」を入力して「Preview card」ボタンをクリックします。まだ申請していなければ下に「Request Approval」ボタンが現れますのでクリックしましょう。
すると入力フォームが表示されるので、適宜入力しておきます。
基本的には自動入力されていますが、「Description」だけサイトに合ったディスクリプションを手動で入力しておく必要があります。入力が済んだら「Request Approval」を選択して送信しましょう。
Twitterのシェア設定は以上です。
最後にメタタグの重複チェックをおこないます。
メタタグの重複チェック
ここではAll in One SEO以外の、メタタグを設定するプラグインを導入している際に重複があるかどうかチェックできます。All in One SEO以外のプラグインを導入していない場合は行わなくて大丈夫です。
「Scan Social Meta」の「Scan Now」をクリックします。
「No duplicate meta tags found.」と表示されればOKです。
これでSNSシェア設定は以上です。お疲れ様でした。
まとめ
SNSのシェア設定はTwitter、Facebookでそれぞれおこないました。
設定するのとしないのではシェア時の見た目に大きな差が出るので、必ずおこなっておきましょう。
Web開発のお仕事を募集しています
フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています（現在の業務量によってお受けできない場合もあります）。
「Ruby on Rails」「JavaScript（jQuery, Reactなど）」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。
ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。
LINKお問い合わせ
スポンサーリンク
