キャリコ

WordPress や STINGER5 のカテゴリを中心に徒然なるままに綴る個人ブログ「 Calico 」です。

Facebook の変更に合わせた記事の拡散につながる OGP 設定【 最新版 】

      2014/11/02

口内炎に苦しんでるキャリコ( @calicocatxyz )です。

そりゃペペロンチーノばっかり食べてたら口内炎にもなりますね… さて、今日はもはや当たり前と言っても過言じゃない OGP の設定についてです。それじゃあラテ、よろしくね♪

こんにちは、ラテにゃ。

Facebook での見栄えが段違いとなる OGP 設定は記事を拡散させるなら必須レベルにゃ。ブログを多くの人に見てもらう為に、SNS を利用して広めていく事はもはや常識となっている昨今、これを設定してるのとしてないのとでは大きな差が出てくるにゃ。

Ads by Google

OGP って何?

OGP は Open Graph Protocol の略にゃ。
Facebook や google+、mixi などの SNS にホームページやブログの記事情報を流すための規格で、これがきちんと設定してあると記事がシェアされたり「いいね!」されると、指定したURL、タイトル、ディスクリプション、サムネイル画像が表示されるにゃ。

Facebook での表示

これが友達のニュースフィードにも表示されて、それを見たり読んだりした友達がさらに「いいね!」すると、友達の友達へと記事情報が次から次へと広がっていくわけにゃ。

OGP の設定方法

OGP の設定は meta タグをサイトの head 内に記述するだけにゃ。

これはキャリコのトップページの場合にゃ。各タグの持つ情報はこんな感じになってるにゃ。

og:type

ページが何のページであるか( 例:website, article, book, music, video など )

og:description

ページの説明文

og:title

ページの名前

og:url

ページのURL

og:site_name

サイトの名前

og:image

サムネイル画像のURL

OGP についての記事を見ると og:type に blog と記述してることが多いんだけど、公式ページにはない type だから website などに変更するといいにゃ。

WordPress の場合

WordPress では便利な PHP を使ってトップページと単一記事との分岐をさせてあげるにゃ。

PHP コード

これをサイトの head 内に記述するだけにゃ。
今回はこちらのサイトを参考にさせてもらったにゃ。

og:type を指定するときの注意点

og:type に blog という指定がないというのはさっきも書いたけど、そうなると代替えとして選ぶのが website になると思うにゃ。でもこの website が曲者で基本的にはドメインのルート部分にのみ存在すべきで、トップページ以外は article と指定する必要があるにゃ。

PHP コード

このコードに差し替えることによってトップページには website という指定、記事には article という指定が出来るようになるにゃ。

og:image を指定するときの注意点

これはシェアや「いいね!」されたときに Facebook のタイムラインで表示される画像なんだけど、記事だったらアイキャッチや記事内で使われてる画像が表示されるにゃ。でもトップページがシェアや「いいね!」されたときはトップ画像や記事一覧のアイキャッチが表示されてしまうにゃ… 例えばキャリコみたいに横長のトップ画像だと横が見切れちゃうから対策が必要にゃ。

og:image はサイト内の画像じゃなくても大丈夫だから、シェアや「いいね!」されたとき専用の画像を用意しておくのがおすすめにゃ。

fb

リンク投稿の場合は画像のサイズが 246×470px で表示されるにゃ。これに合わせて同じサイズで用意したのが上の画像にゃ。トップ画像と比べてみるとわかりやすいけど、これなら Facebook での見栄えもよくなるにゃ。

OGP の確認方法

上記での設定がすべて終わったらあとはきちんと表示されてるかどうか確認するだけにゃ。

これがエラーのない正常な状態にゃ。トップページと単一記事でデバッグを取って、og:type が website と article になってるかどうか、og:image が 246×470px になってるかもここで確認することが出来るにゃ。

トップページの場合

単一記事の場合

もしエラーが出たら?

エラーが出たらどの部分がエラーになってるのか表示されるから、基本的にはそこを直すだけでオッケーにゃ。キャリコの場合 Meta Tags In Body という赤いエラーが出て相当悩んだけど、その場合はページ最下部にある Scraped URL を見れば、Facebook がブログをどのように認識してるのか知ることが出来るにゃ。これを見たとき余計な『 / 』があったせいで head タグと body が認識されておらず、3時間くらい悩んでたのは良い思い出にゃw

まとめ

OGP を正しく設定することによって SNS での記事が拡散する可能性が広がるにゃ。やっぱり一番重要なのは記事の内容になるけど、たくさんの人に見てもらうためのサイト作りは意識して損はないにゃ。

今日はここまで、じゃあにゃ~

ライター紹介

ラテ Web 担当、SNS 広報、イメージキャラクター

スコティッシュフォールドの女の子。主に Web 系のネタを中心にお届けする IT にゃんこです。

 - ウェブサービス ,

この記事が気に入ったら
いいね!しよう

キャリコの最新情報をお届けします

Twitter でキャリコをフォローしよう!

【キ】 アドセンス用336px

【キ】 アドセンス用336px

  関連記事

1
お題に答える「 言えるかな? 」が面白い!キャリコも問題作ったよ!

47都道府県を全部言えませんでした、キャリコ( @calicocatxyz )で …

Web アイコン Font Awesome の最新版 Version 4.3.0 が公開
Web アイコン Font Awesome の最新版 Version 4.3.0 が公開

これを知った当初はフォントアウェサムと読んでいた、キャリコ( @calicoca …

軽いブラウザを比較した、おすすめの使い分け方法とは?
軽いブラウザを比較した、おすすめの使い分け方法とは?

ブラウザは使い分けるタイプ、キャリコです。 皆さんはブラウザを使い分けていますか …

Facebook のファンページを作成してプラグインの Like Box を設置しよう

数日の入院が終わり無事に退院しました、キャリコ( @calicocatxyz ) …

Font Awesome の最新版 Version 4.2.0 を導入したアイコン型ウェブフォントの使い方

ああああああああ、ULTRA JAPAN に行きたすぎるキャリコ( @calic …

【 保存版 】フリー写真素材サイト超絶まとめ61選
【 保存版 】フリー写真素材サイト超絶まとめ61選

ブログのアイキャッチなら任せろ、キャリコ( @calicocatxyz )です。 …

Twitter のフォローボタンとタイムラインプラグインを設置しよう

退院したはいいものの、2kg も太ったキャリコ( @calicocatxyz ) …

忍者 AdMax が Google AdSense よりも稼げる理由
忍者 AdMax の年間平均クリック単価は62円?!

そんなバカな、キャリコ( @calicocatxyz )です。 実は忍者 AdM …

eye
クリック率が250%増!nend の単価が低けりゃ CTR を増やせばいいじゃない♪

まずまずの結果、キャリコ( @calicocatxyz )です。 小学生のお小遣 …

Web アイコン Font Awesome の最新版 Version 4.4.0 が公開
Web アイコン Font Awesome の最新版 Version 4.4.0 が公開

良いタイミングで気付いた、キャリコ( @calicocatxyz )です。 半年 …