『これは欲しい』毎日使える!人気アプリ10選Facebookでシェアされたり、いいねを押すとニュースフィードにWebサイトやブログ記事が表示されます。protocol)と呼ばれるMetadataが設定されていて、Facebookがそれを認識し表示してくれているからです。Pro」を使用していましたが、プラグインが更新されていなく、古くなっていたので自分で実装しなおしました。その際にOGPについて調べたことをまとめます。protocol)は、冒頭で少し述べたようにFacebookやmixiなどのSNSでシェアされたときに、そのページのタイトル・URL・概要・画像を正しく伝えるためのHTMLの<head>...</head>内に含めるmeta情報で<meta>要素を使って記述するものです。/>このタグを記述すると表示が下図のように変わります。Facebookページでシェアしたサイトの表示の違いを見てください。OGP設定なしサイトOGP設定ありサイト(1)と(2)の画像表示の違い(1)と(2)で画像の表示に違いがあるのは、「og:image」の指定した画像サイズによるものです。推奨サイズより小さいと表示は(2)のようになります。DevelopersのReferenceを元に<head>内に記述しました。prefix属性は、簡単に説明すると<meta>要素のproperty属性「og:」「fb:」を使えるようにしますよという呪文のようなものです。prefix属性の「:」のあとには半角空白文字を入れて指定します。「fb:」はFacebook独自のもので「article:」はOGPのオブジェクトタイプです。この指定がなくても<meta>要素が認識されるようですが、正式には必要なので指定しておきましょう。詳しくもっと詳しく知りたい方は、こちらのリンク先を一読して、OGPが基にしているRDFaについて調べてみるといいでしょう。protocol」では以下の4つが全てのページで必須のプロパティのようです。/>...</head>...</html>必須プロパティの説明と抑えておくポイント必須プロパティの説明とcontent属性に適切な値いれるポイントを紹介します。og:titleタイトルを記入します。ブログでいう記事タイトルに該当する箇所です。このタイトルにはブランド名を付けず、純粋な記事のタイトルを記入するようにします。ブログを運営していると記事タイトルのあとにブログタイトルを含めていることがあるかもしれませんが、og:titleにはブログタイトルは含めないようにしましょう。プロパティがない場合<title>...</title>が参照されるようです。og:typeページのオブジェクトタイプを指定します。このタイプによってFacebookでシェアされた時の表示が変わります。TypesarticleWebサイト上の記事を表します。ブログの記事やニュースサイトの記事ページの場合指定するのがよういでしょう。profile人物を表します。有名人やミュージシャンに適していますが、個々のプロファイルに使用することができます。websiteWebサイトを表します。単純なオブジェクトタイプです。Webサイト内に記事のあるページはarticleを使うべきです。ブログに関係しそうなタイプを抜粋しましたが、この他にもオブジェクトタイプがあります。詳しくは以下のリンク先を参照してください。Developersブログの場合記事ページがarticleでそれ以外はwebsiteを指定しておくのが良さそうです。Cutts氏のブログも確認したところarticleとwebsiteが使われていました。)オブジェクトタイプを指定していない場合はデフォルトでwebsiteになります。og:image画像のURLを指定します。URLは絶対パスで指定します。このMetadataは複数<head>...</head>内に指定できます。複数指定した場合ユーザーが「いいね!」したときに画像を選択する事ができます。og:imageにはいくつかのオプションがありこれについては後述します。Facebookでは画像サイズに1200×630pxを推奨しています。これは高解像度デバイスで適切に表示するためです。このサイズで画像を指定すると大きく表示されユーザーの講読率は上がるかもしれません。大きいサイズで画像を表示する最低ラインは600×315pxです。これ以下だと表示される画像は小さくなります。小さい画像の最低ラインは200×200pxです。Facebookでは画像の比率を「1.91:1」を推奨しています。og:urlページのURLを指定します。URLは絶対パスです。このURLには正規のURLを指定してください。URLにユーザー固有のパラメーターなどを付加してはいけません。プロパティ次のプロパティは、任意で付け加えることができます。og:audio音声ファイルのURLを指定します。og:descriptionページの説明を記述します。auto)autoをしていするとユーザーが「a」か「an」を選べる。デフォルトでは「””」(空白)og:localeローカル言語の指定です。デフォルトでは「en_US」og:locale:alternate他の言語翻訳を反映させる場合指定します。og:site_nameサイトの名前です。URLではありません。og:video動画ファイルのURLを指定します。この中でも「og:description」「og:site_name」がよく使われると思います。詳しくオプションはこの他にもあります。Developersを参照してください。Developers構造化プロパティ前述した「og:image」で少し触れましたが、他にも「og:video」「og:audio」などはオプションに構造化プロパティをもっています。記述方法は今までと変りなく<meta>タグを使います。property属性に少し付け足すだけです。「og:image」と同じです。/>「og:image:url」は「og:image」と同じなので「og:image」を使っています。他のプロパティのオプションは、公式サイト等で確認してみてください。Developers画像を複数指定する(配列)「og:image」は複数指定するすることができます。<meta>タグを複数書き込むことができます。protocol」の例を示します。/>このコードでは3つの画像を指定していて、1つ目は300×300、2つ目はサイズ指定なし、3つ目は高さが1000になります。http://ogp.me/ns/article#"」を明記し「og:type」にarticleを指定するとプロパティに「article:」が使えるようになります。Facebookでは「article:author」「article:publisher」を指定するとシェアされたニュースフィードの記事にFollowボタンを表示させることができます。article:author記事の著者の指定です。FacebookのプロフィールページURLやID、FacebookページURLを指定できます。FacebookプロフィールURLを指定した場合「Follow」を有効にすればFollowボタンを表示できます。article:publisherメディア運営者用のメタタグです。指定できるのはFacebookページURLかIDです。FacebookページのFollowボタンを表示できます。その他のプロパティはReferenceで確認してみてください。DevelopersFacebook独自のプロパティ「fb:」はFacebook独自のプロパティで以下のようなものがあります。Facebookでは「fb:app_id」か「fb:admins」が必須プロパティのようです。IDこのプロパティを使うと「Facebookインサイト」が使えるようになります。FacebookインサイトはFacebook独自のアクセス解析ツールです。以下の様なことが解析できます。「いいね!」ボタンのCTR「送る」ボタンのCTRオーガニックシェアコメントボックス「いいね!」ボタンなどを設置しているサイトはどれくらいボタンがクリックされたか、「いいね!」記事への反応はどうか気になると思うので設定しておくとよいでしょう。「fb:app_id」の指定にはアプリの作成が必要です。アプリの作成は下記リンク先を参考にしてください。init]アプリの作成ができたら、Facebookインサイトページを開いて「ウェブサイトのインサイト」をクリックし、ドメインとリンクするアプリを選択したら<meta>タグができます。サイトの表示速度への影響と対策HTMLの<head>...</head>内に<meta>タグを書いて指定するので、大量のMetadataを指定するとページの読み込み速度に影響を与えます。その対策として別URLからMetadataを参照するポインタという方法が使えます。content="2">....ポインタを使うにはいくつかのルールがあります。基のURLに基本のog:Metadataが書かれている必要があります。参照先には基のURLに書かれていない<meta>要素を書きます。ポインタは複数使えますが、参照先URLから下層にポインタをもつことはできません。ポインタは<link>タグにrel="opengraph"を指定すると参照されます。href="ポインタ先のURL"/>参照先には2つのタグを書く必要があります。developersの以下のページも参考にしてみてください。Developersブログの場合だと「タイトル・画像・URL・概要」などの基本的なMetadataで十分だと思うのでポインタを使うことは少ないかもしれません。Debugger」というツールがあります。OQPのタグを<head>...</head>内に記述したらそのサイトにエラーがないか確認してみましょう。Debugger」を開きます。URLをデバッガーにペースして、デバッグをクリックします。問題なければオブジェクト情報が表示されます。問題があるときは、「エラー」や「警告」がでます。表示された内容をもとに修正してみてください。認識されていないときは、Facebookクローラーがあなたのサイトを巡回できていないからかもしれません。BASIC認証やIPアドレスの拒否を行っていないでしょうか?もし、BASIC認証やIPアドレスの拒否をしている場合はFacebookクローラーが巡回できるように許可させる必要があります。以下のリンク先を参考に設定してみてください。「article:author」を設定するには、個人アカウントをFollowできるように設定を変更しなければいけません。デフォルトでは、「友人」までになっているはずです。設定を変更して、あなたを友人に含めなくてもFollowすることであなたの投稿をFollowしたユーザーのニュースフィードに表示できるようにしましょう。サイドバーのフォロワー」と進むと『フォロワー設定』から「フォローを許可する人」を変更できます。「友人」になっている場合「全員」に変更しましょう。変更すると更に下記の4つの詳細設定ができます。SessionsWordPressに以下の条件でOGPを実装してみよう。条件分岐してarticleとwebsiteを分けて出力する「og:image」にはサムネイル画像を指定、なければコンテンツ内から画像を探す。「og:description」にはコンテンツから80~90文字抜粋する上記の条件で私なりに実装したものはこちらの記事に書いてみました。SNSでリッチ表示してくれるOGPをWordPressに、プラグインを使わず設定するその他の参考サイト下記リンク先も参考にさせていただきましたありがとうございます。html999あとがきWordPressに実装するコードは別の記事に書きます。誰かの参考になれば幸いです。間違いがあったら教えて下さい。/仕事ITマーケティングライフスタイル。