ノウハウをいつでも。ウェブマーケティングのポータルサイト

制作日誌

わずか数分!WordPressプラグインでの簡単OGP設定

このエントリーをはてなブックマークに追加
      
follow us in feedly
友だち追加数
前回の記事でOGPについてお伝えしましたが、今回はFacebookOGPを簡単に設定することができるWordPressプラグインのご紹介です。
(※Movable Typeの場合、プラグインによるOGP設定はできません。必ず手動で行います。)

※今回ご紹介するプラグインはすべてのサイトで100%機能するという保証はございません。使用の際は自己責任でお願い致します。







All in One SEO

allinonepack.jpg ダウンロード

まず1つ目はSEOプラグインとして定番中の定番「All in One SEO」を使ったやり方です。このプラグインを利用すると、Twitter Cardの設定も一緒にできます。


1. プラグインをインストール

allinone4.jpg 管理画面の「プラグイン」からOpen Graph Proをインストールして有効化します。


2. Social MetaをActivate

「All in One SEO」をインストールした後、管理画面左側に「All in One SEO」が表示されます。
allinone2.jpg ここで「Feature Manager」をクリックします。


allinone3.jpg すると上のようなページに移るので、「Social Meta」というところをActivateします。


3. Social Metaの設定

Activateできると、左メニューに「Social Meta」というのが出てくるので、それをクリックします。
meta.jpg 必要項目を入れていきます。
socialmeta.jpg
Use AIOSEO Title and Description チェックを入れると、「Home Title」と「Home Description」が設定不要になります。
Profile Admins ID FacebookのAdmin IDを入力します。
(※Facebook Admin IDを調べる方法はこちら。 )
Site Name サイト名を入力します。
Home Title ページタイトルを入力します。
Home Description ページ詳細文を200文字ほど入力します。
Disable Jatpack Tags 「Jetpack」 というプラグインを使用している場合はチェックします。
Select OG:Image Source サムネイル画像を選択肢ます。「ページのアイキャッチ画像」「デォルト画像」「ページの最初にある画像」から選択できます。
Default OG:Image デォルト画像をサムネイル画像とする場合に画像URLを絶対パスで入力します。
Default Twitter Card Twitter Cardタイプを選択します。通常サイトであれば「Summary」にします。
Twitter Site Twitterアカウント名を入力します。
Twitter Domain Twitterドメイン名を入力します。
Facebook Object Type ブログがある場合は「blog」にします。
Enable Facebook Meta for 「投稿」「固定ページ」をチェックします。
投稿 Object Type 「Article」を選びます。
固定ページ Object Type (page) 「Article」を選びます。

上記以外はデフォルトで問題ないと思います。

すべて入力し終わったら、「Open Graph Debugger」でちゃんと設定されているかどうか確認しましょう。



Open Graph Pro

Open Graph Pro1.jpg ダウンロード

こちらのプラグインでも簡単にOGPが設定できます。
(※ただし、こちらのプラグインは2年以上更新されていません。使用の際には十分に気をつけてください。)


1. プラグインをインストール

Open Graph Pro2.jpg 管理画面の「プラグイン」からOpen Graph Proをインストールして有効化します。


2. 必要情報の設定

Open Graph Pro3.jpg 管理画面「設定」からOpen Graph Proを選びます。


すると以下の画面に移りますので、必要情報を入力していきます。
Open Graph Pro5.jpg
Set Object Type to 一般的なサイトの場合は「blog」を選択
Replace Header Image with サイト(ブログ)のメイン画像URL(絶対パス)を設定
Admin User(s) Facebook admin IDを入力
Application ID Facebook App ID"を入力

上記を設定して保存したら完了です。


※Facebook Developersへの登録
Open Graph Proプラグインを利用するためには、FacebookのユーザーIDとアプリケーションID(App ID)が必要となります。以下のサイトから取得してください。
Facebook Developers


WP-OGP






WP-OGP1.jpg ダウンロード
(※こちらのプラグインはgithubで管理されています。 )

日本製のプラグインですので、設定がより簡単に行えると思います。



1. プラグインをインストール

こちらからプラグインをインストールして有効化します。


2. 必要情報の設定

WP-OGP5.jpg 管理画面「設定」からWP-OGPを選びます。


すると以下の画面に移りますので、必要情報を入力していきます。
WP-OGP6.jpg 全て日本語で書かれているため、設定がわかりやすくて簡単です。

fb:admins Facebook admin IDを入力
fb:app_id Facebook App IDを入力
カスタムフィールドのキー そのままで問題ありません。
投稿の抜粋を利用 投稿に設定している「抜粋」を表示させたい場合はチェックします。
テキストの抽出方法 単語数か文字数で選ぶことができます。(※単語区切りが存在しない日本語では、テキストが改行無しで入ってしまう場合があります。よって、日本語サイトであれば「文字数」にチェックをおすすめします。)
og:imgageのタイプ アイキャッチ画像か記事中の画像かを選びます。
og:imgageの最大値 上記で記事中の画像(一番目)を選んだ場合、設定する画像の最大数が選べます。(通常ならば1を選ぶ)
必ずデォルト画像を利用 どのページでもデォルト画像を表示させたい場合はチェックします。
デォルトの画像URL デォルト画像のURLを絶対パスで入力します。
自動的にogタグを埋め込む チェックします。


さいごに

いかがでしょうか?
OGP設定はサイトを拡散させるために非常に大切なものになります。WordPressを利用する際は今回ご紹介したプラグインをぜひ使ってみてくださいね〜。

© MAKEPO

 
このエントリーをはてなブックマークに追加
   
follow us in feedly
友だち追加数

著者情報

ノビタ

のび太

Web制作会社「NOBITA」の社長をやっております、のび太と申します。大学卒業後、お金を貯めカナダに留学。バンクーバーのビジネス学校で好きな人に出会ってしまったため、日本に帰らず現地企業に就職。未経験ながらWeb制作、メディア運営、ライター業などの仕事に奮闘する。帰国後、フリーランスのWebデザイナーとして独立し、2014年5月、自身の会社を設立。「伸びていくWebサイトをお届けする!」がモットー。 ブログ:がんばれ!のび太!

他の参加者を見る

のび太

関連記事

マーケティングノウハウ足りてますか?

MAKEPOのメルマガ…購読してみませんか?
直近のピックアップ記事のほか、セミナー・ツール活用情報など不定期でお伝えしています。「サイトにアクセスするのは面倒だ!」「電車の中でざっくり読みたい」という方は是非ご登録ください。 リアルタイムで情報取得をしたい方は、RSSまたは公式Twitterをフォローしてご覧ください!

通勤中の情報収集に!

メルマガ登録

いますぐ新着情報を知るなら

LINE@で友だちに追加!