宮崎のホームページ制作会社Tedinc | FACEBOOK

menu 0982-60-1084

TEDINC OFFICIAL BLOG

opg

こんにちは。Tedincの林田です。

今回はOGPタグについて解説していきます。

項目一覧

1,OGPとは?

2,WordPressの場合

3,OGP設定項目

4,og:imageのサイズ

5,OGPチェック方法

6,fb:app_idの設定




1,OGPとは?

”OGPはもともと、Facebookが策定した物で、FacebookやmixiなどのSNSでシェアされたときに、そのページのタイトル・URL・概要・画像を正しく伝えるためのもです。
方法はHTMLのmetaタグに記述します。”




2,Wordpressの場合

WordPressはプラグインを使えば、OGP簡単に出力されます。例:JetpackやALL in One SEOなど
備考:Jetpackのパブリックサイズ共有の自動で出力されるOGPは不評なのですが、アイキャッチや抜粋などをしっかりと記述すればちゃんと表示してくれます。




3,OGP設定項目

TEDINCで行なっているOGP設定を参考に下記に項目を記載します。




4,og:imageのサイズ

og:imageのサイズ

”1200 x 630 px 以上推奨”

”最低でも 600 x 315 px”

また大きければ大きいほど良いため 1200 x 630 px 以上の画像サイズが推奨されています。画像がクリッピングされるのを防ぐため、縦横比をなるべく1.91:1に近づけるようにしましょう。

参考記事
OGP画像シミュレータ
OGPを設定して、Facebookでシェアした時の画像を大きく表示させる方法




5、OGPチェック方法はFacebookデバッガーの使用する


1,Facebookデバッガーにアクセスします。

2,URLを入力しOGPを確認

fb_db


3,エラー項目が表時されるので、修正

fb_db_2




6,fb:app_idの設定

エラーが出てしまったので、エラー項目をチェックします。

”Share App ID Missing
The ‘fb:app_id’ property should be explicitly provided, Specify the app ID so that stories shared to Facebook will be properly attributed to the app. Alternatively, app_id can be set in url when open the share dialog.”

fb:app_idがないので設定して下さいといっています。設定すればニュースフィードで高いクリック率がだせるとの事なので設定していきます。

app_idの取得方法

1、Facebookにログインした状態で、Facebook開発者アプリにアクセス
2,新規アプリケーションを作成

3、Facebookのニュースフィードを設置する場合は手順に沿ってサイトに反映します。

今回はとりあえずOGPのエラーを解除するためにapp IDを確認します。(写真の1でスキップもできます。)

fb_db_3


4、取得したIDを記載しサイトに反映




5,先程のまで出ていたエラーが消えました。
注意:サイトのキャッシュなどを一度削除し、下記記写真のScrape Againをクッリクして下さい。

fb_db_4





いかがでしょうか、とりあえずこれでOGPの設定は完璧だとおもわれます。参考にしてみてください。

CONTACT US

お気軽にお問い合わせ下さい

お問い合わせはコチラ