アクセスされやすくなる！？　忘れがちな「OGP」を設定しよう

投稿日: 2020.07.28

更新日: 2021.12.26

OGPの設定方法（基本）

htmlタグまたは、headタグに「ogpを使います」と宣言する

※宣言がない場合でも正しく表示される？原因不明。

<html lang="ja" prefix="og: http://ogp.me/ns#">

headタグ内にいくつかのメタタグを設定する

<meta property="og:title" content="タイトル">
<meta property="og:type" content="website　または　blog　または　article">
<meta property="og:description" content="ページの簡単な説明">
<meta property="og:url" content="ページのURL">
<meta property="og:site_name" content="サイトのタイトル">
<meta property="og:image" content="サムネイル画像のURL>

og:type

トップページの場合websiteまたはblog、下層ページはarticleを記述。

og:image

未指定の場合はページ内の画像がランダムで表示される。

Twitter専用OGPの設定方法

カードのタイプ指定する。

<meta name="twitter:card" content="summary_large_image">

summary

画像とテキスト情報が横並びに表示される。

summary_large_image

画像が横いっぱいに表示され、その下にテキスト情報が続く。

正しく設定できたか確認する方法

以下のツールで確認可能。

Twitter

https://cards-dev.twitter.com/validator

サムネイル画像の確認

http://ogimage.tsmallfield.com/

ブックマーク

いまさら聞けない！OGPとは？
https://www.e-webseisaku.com/column/marketing/3947/

アクセスされやすくなる！？ 忘れがちな「OGP」を設定しよう