hogehoge〜〜

プログラミングの勉強記録です

OGP設定に関するメモ

インターネットの神様のイラスト

OGPについて

OGPとは、FacebookTwitterなどの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として指定しているページ)に設定することを推奨している。

カノニカル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用の設定

Twitterカードの表示形式などを選択できる。2

<meta name="twitter:card" content="Twitterカードの種類">
<meta meta name=”twitter:site” content=”@ユーザー名">

twitter:card

カードタイプを設定。「summary」は小型画像とテキストが横並び、「summary_large_image」は大型画像の下にテキストが配置される。

twitter:site

Twitterのユーザー名を設定

シェアされた時の表示内容をプレビューするツール