ogタグはSNSに自分のサイト(WEBページやホームページ)のリンクをシェアした時に表示される情報を定義出来ます。

ogタグを設定するとどうなるのか

例えばLINEに自分のホームページのリンクを掲載すると以下のように表示されます。

LINEだとogタグで設定された以下の内容が表示される事がわかります。

タイトル
説明
画像

設定方法

2箇所に定義します。

headタグ

htmlのheadタグに定義します。お決まりだと思って下さい。

<head prefix="og: https://ogp.me/ns#">

meta(メタ)タグ

htmlのmeta(メタ)タグに定義します。以下は例になります。

<meta property="og:site_name" content="デニーツアー" />
<meta property="og:title" content="デニーツアーのホームページ" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://dennie.tokyo/tour/" />
<meta property="og:image" content="https://dennie.tokyo/tour/og_image.png" />
<meta property="og:description" content="デニーツアーの内容を説明するサイトです。" />

タグの説明

site_name

WEBページの名前を設定します。

title

WEBページのタイトルを設定します。

type

WEBページのタイプを設定します。
タイプは他にも種類がありますが、以下の通りです。

website: Webサイトのトップページや一般的な下層ページ
article: ブログ記事、ニュース記事など
profile: プロフィールページ
product: ECサイトの商品ページ

url

webページのurlを設定します。
“http://〜” もしくは “https://〜” のような絶対パスで指定します。

image

シェアした時に表示させたい画像のurlを絶対パスで指定します。

description

WEBページの説明を設定します。

最後に

特にありません。