OGP設定に関するメモ
OGPについて
OGPとは、FacebookやTwitterなどのSNSでサイトがシェアされた際に、画像・タイトル・説明文・URLなどを正しく表示させるための仕組み。
OGPの正しい設定方法!Facebook・Twitter対応
OGPとは?OGPの基本からOGP画像のサイズや設定方法を分かりやすく解説
詳しい使い方
prefix属性の設定
OGPの設定を行う場合は、prefix属性を使用して「OGPを使うための宣言」が必要となる。1
HTML5ではへの設定が推奨されている。
<html prefix="og: https://ogp.me/ns#">
一方、Facebook for Developersによると、
内への設定が推奨されている。<!-- トップページの設定 --> <head prefix="og: https://ogp.me/ns# fb: https://ogp.me/ns/fb# website: https://ogp.me/ns/website#"> <!-- 記事ページの設定 --> <head prefix="og: https://ogp.me/ns# fb: https://ogp.me/ns/fb# article: https://ogp.me/ns/article#">
Facebookに関する設定を行う場合は、
内に設定をするほうが良い。※xhtmlではhtml内に設定する。その場合head内への記載不要。
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#">
property属性の設定
<!-- OGPの基本設定 --> <meta property="og:type" content="ページの種類"> <meta property="og:url" content="ページのURL"> <meta property="og:image" content="ページの画像URL"> <meta property="og:title" content="ページのタイトル"> <meta property="og:site_name" content="サイト名"> <meta property="og:description" content="ページの説明"> <meta property="og:locale" content="言語の指定">
og:type
表示するページの種類を設定。トップページは「website」、記事やニュースなどの投稿ページは「article」を設定。(デフォルトはwebsite)
カテゴリやタグなどのアーカイブページにもOGPを設定する場合は、判断に迷う場合にはデフォルトのwebsiteでOK。
※情報サイトで「blog」を設定できるとしているサイトがあるが、現在はリファレンスに記載されていないため使用しない。
og:url
表示するページのURLを設定。Facebookでは正規URL(カノニカルURLとして指定しているページ)に設定することを推奨している。
og:image
表示するページの画像URLを設定。
FacebookのOGP画像の推奨サイズは1200×630px。スマホなどの解像度の高いデバイスでも画像が粗くならないように表示するためには最低でもこのサイズ以上にする。
※サイズによってサムネイルの表示サイズは変化する。600×315px以上の場合は横長の長方形になり、200×200px~600×314pxの場合には正方形に近いサイズで画像が表示されとサイト説明と横並びになる(2カラム型)
og:title
表示するページのタイトルを設定。基本的にはhead内のtitleと同じでよい。※サイト名などのブランド情報を含まないtitleを20文字以内で設定することが好ましいという情報あり。
og:site_name
サイト名を設定。(サイト名・ブランド情報はog:titleではなくこちらに設定)
og:description
表示するページの要約となる説明文を設定。
表示される文字数はPCとSPで異なる。およそ80~90字を目安に設定。基本的にはhead内のdescriptionと同じ設定でよいが、文字数が多い場合には途中で切れてしまう可能性があるためOGP用に簡略化する。
og:locale
日本語でマークアップしていることを明示するため「ja_JP」を設定。デフォルトは「en_US」。
:point_right:Facebook用の設定
<meta property="fb:app_id" content="FacebookアプリID">
FacebookアプリIDを設定。FacebookアプリIDをすでに取得している場合は、Facebook for Developersの「すべてのアプリ」にログインすればID番号を確認できる。IDをまだ取得していない場合は「Facebook for Developers」で登録が必要となる。
※個人アカウントを利用する場合はこちら。ただし個人情報を晒す危険があり、現在は開発者アカウントのみの設定でよいため、個人アカウントをあえて設定する必要はない。
<meta property="fb:admins" content="adminID">
Twitter用の設定
<meta name="twitter:card" content="Twitterカードの種類"> <meta meta name=”twitter:site” content=”@ユーザー名">
twitter:card
カードタイプを設定。「summary」は小型画像とテキストが横並び、「summary_large_image」は大型画像の下にテキストが配置される。
twitter:site
Twitterのユーザー名を設定