r_ogp_tw1
通常の OGPやTwitterCardsプラグイン では不動産プラグインでの物件画像が抽出されません。そこで「不動産 OGP and TwitterCards プラグイン」をリリースしました。
TwitterCardsはTwitterへの 表示確認と利用申請 が必要です。
また、他のプラグインのOGP出力と被る場合がありますので、それぞれのプラグイン側でプラグイン停止 又は OGPの出力を停止させる作業 が必要な場合があります。
また、不動産プラグイン用に作りましたが不動産プラグインが無くても使えます。

OGP-twitter_17不動産Tweet Old Postプラグイン」で 画像付きツイートすると TwitterCardsの「詳細を表示」リンクは表示されませんが手動で画像無しツイートする時には有効な手段だと思います。
もちろん「不動産Tweet Old Postプラグイン」で 【ツイートに画像を含める】を オフにするとTwitterCardsの「詳細を表示」リンクは表示されます。



導入方法

「不動産OGP and TwitterCardsプラグイン」をダウンロードしてWordPressへインストールしてください。

  ①プラグイン新規追加をクリック
  ②アップロードをクリック
  ③「ZIP 形式のプラグインをインストール」で ダウンロード した fudou-ogp-twittercardsXXXXX.zip を
    選択して「いますぐインストール」をクリックしてください。
  ④インストールが終了したら「有効化」にしてください。

 ※解凍してFTPでアップロードすると不完全になる場合がありますのでお勧め致しません。



設定方法


[設定] -> [OGP TweitterCards]をクリック。
OGP-twitter_6
【Facebook OGP】
 表示 「表示する」にするとサイトヘッダー部分に OGPタグが表示されます。
 og:type  例; article,website
 og:image  デフォルトイメージ 例: http://〇〇〇.jp/~/xxxx.jpg
 fb:admins   FacebookのユーザーID
 fb:app_id   FacebookのアプリID


【Twitter Cards 】
 表示 「表示する」にするとサイトヘッダー部分に TwitterCardsタグが表示されます。
 twitter:card  カードの種別を指定します。
 twitter:card  物件詳細ページだけ別のカードの種別を指定できます。
 twitter:site  Web サイトオーナーの Twitter ID (例: @nendeb )
 twitter:creator  記事を書いた執筆者の Twitter ID (例: @nendeb )
 twitter:image  デフォルトイメージ  (例: http://〇〇〇.jp/~/xxxx.jpg )
 twitter:domain  掲載されているサイトのドメインを設定します。 ( 例: nendeb.jp )

 最後に「変更を保存」ボタンを押してください。

 ※デフォルトイメージはトップページや画像の無いページでの代替画像です。
  Twitter/Facebook用では要求される画像の大きさが違いますのでそれぞれ設定してください。
 ※Twitter/Facebook用の画像は 200px X 200px以上で
   ①「アイキャッチ画像」
   ②「物件画像(物件詳細ページの場合)」
   ③「コンテンツ内の最初の画像」
  の順で優先されます。




Twitter Cards設定方法(表示確認と利用申請)


※Google Chromeでの設定をおすすめします。
①「Card Validator Twitter Developers」にアクセスして 利用するTwitterアカウントでログインして 最初に立ち上がる「Card Catalog」のBOXをキャンセルします。

②Card Validatorタイトル下の「Validate & Apply」タブを押して、
OGP-twitter_0


③サイトのURLを入力して「Go!」ボタンを押します。
OGP-twitter_15


正しくメタタグが生成されていると各項目にグリーンマークが出て右側にプレビューが表示されます。

【カードの種別 : summary】
OGP-twitter_1

【カードの種別 : summary_large_image OGP-twitter_2

【カードの種別 : gallery】
OGP-twitter_3

【カードの種別 : product】
OGP-twitter_4

④登録されていないカードの種別では「Request Approval」ボタンが出てきますのでボタンをクリックしてカードを登録します。


OGP-twitter_5 ⑤「Request Domain Approval」ボックス画面が出てきますので必要事項(WebsiteDescriptionぐらい)を入力して右下の「Request Approval」ボタンを押してください。


⑥しばらく待つと登録したメールアカウントにTwitterからメールが届きます。
OGP-twitter_11OGP-twitter_12
これで登録完了です。

※物件詳細ページを他のカードの種別にした場合は ③ に戻って 物件詳細ページのURLを入力して「Go!」ボタンを押します。 続いて④⑤と進んでください。



試しにツイートしてみると.... 反映されていません。
OGP-twitter_7
しかし、しばらくしてから見てみると反映されていました。
OGP-twitter_8 OGP-twitter_9

【画像がうまく反映されない場合】
 画像がうまく反映されない場合は robots.txt(設置している場合) をチェックしてみましょう。
 画像を置いているフォルダを Disallow で指定していると
 Invalid image. This image cannot be fetched になります。
robots.txtに
# Twitterbot
User-agent: Twitterbot
Disallow:
を追記してみてください。
( robots.txt は 24時間キャッシュされるようですので変更後は待ちましょう。)
詳しくはこちら https://dev.twitter.com/docs/cards/getting-started#crawling








Facebook設定方法


FacebookのユーザーIDは以下の方法で調べてください。
①URL未設定のユーザーはFacebookのユーザーIDはFacebookのプロフィールページのURLの「id=XXXXXX.. 」がFacebookのユーザーIDになります。
②URLを自分でユーザー名に設定している場合は「https://graph.facebook.com/ユーザー名」をブラウザで開いてみてください。
 表示される「id:XXXXXX..」がFacebookのユーザーIDです。(IEの場合はテキストファイルのダウンロード[xxxx.json]になる場合がありますのでメモ帳等で開いてみてください)
OGP-twitter_14

FacebookのアプリIDを持っていない場合はこちらから取得できます。
Facebook Apps
OGP-twitter_13 「Create New App.」ボタンを押して Display Name を適度な名前をつけて「アプリケーションを作成」ボタンを押せば FacebookのアプリIDが取得できます。


念のために、「Facebook Open Graph Object Debugger」でチェックをしましょう。
OGP-twitter_15 「Show existing scrape information」でOGP情報のチェックができます。
「Fetch new scrape information」ボタンでOGPがリセットされます。



ご注意

  • 不動産 OGP and TwitterCards プラグインは 「不動産プラグイン」用のプラグインです。
  • 他のプラグインのOGP出力と被る場合がありますのでOGP出力停止作業が必要な場合があります。
  • 記事の内容や画像によっては正常に表示しない場合があります。
  • FacebookやTwitterの仕様変更等により正常に表示しなくなる場合があります。
  • 不動産プラグインシリーズやサービス 及びnendebサイト情報をご利用上の損害等に関して、nendebはいかなる責任も負わないことと致します。
  • 提供するプラグイン、デザインテーマ、各種サービスは全て「不動産プラグイン」シリーズ利用規約に基づきます。ご試用またはご購入いただきました時点で「不動産プラグイン」シリーズ利用規約に同意したものと致します。


不動産 OGP and TwitterCards プラグイン (無料)ダウンロード

 スポンサードリンク



不動産 OGP and TwitterCards プラグインダウンロード
※nendeb-bizサイトへ移動します。




プラグイン停止 又は OGPの出力を停止させる作業


 WP-OGPやWP-OGP customizedプラグインの場合
  プラグインを停止する

 Tweet, Like, Google +1 and Share プラグインの場合
  Other optionsのDo not add Facebook OG META tagsにチェックを入れる。

 Jetpackの場合
  何もしなくても大丈夫です。

Posted by on 2016/03/28