2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

AlphabetAdvent Calendar 2022

Day 13

【M】metaタグでOGPを指定すればTwitterやDiscordのリンク表示をカスタマイズできる

Last updated at Posted at 2022-12-12

これ意外と情報が見つからないんですよね……
OGPという言葉にたどり着かないと検索難易度が高い。

使いそうなOGP一覧

ページタイトル

<meta property="og:title" content="ページのタイトル">
title要素より優先されるがtitle要素があればそれが見られることがほとんどらしいから設定しなくてもいいのでは……?

ページの種類

<meta property="og:type" content="article">
トップページならcontent="website"とか。他にも色々あるらしい。
http://ogp.me/#types などを参照するといい気がする(英語)

ページURL

<meta property="og:url" content="https://example.com/">
絶対パスでURLを指定する。相対NG

サイトイメージ画像指定

<meta property="og:image" content="https://example.com/example.jpg">
絶対パスで画像URLを指定する。相対NG

サイト名

<meta property="og:site_name" content="サイト名">
ページじゃなくてサイトなことに注意。

ページの説明文

<meta property="og:description" content="ページの説明">

Twitterでの表示形式

<meta name="twitter:card" content="summary">
contentはsummary, summary_large_image, app, playerのいずれか。
summary_large_imageの例 : ライブドアニュース様
(すいません他の例見つかりませんでした……)

位置情報

<meta property="og:latitude" content="緯度">
<meta property="og:longitude" content="経度">
<meta property="og:country-name" content="国名">
<meta property="og:postal-code" content="郵便番号">
<meta property="og:region" content="都道府県">
<meta property="og:locality" content="市区町村">
<meta property="og:street-address" content="住所(市区町村のあとの部分?)">

連絡先情報

<meta property="og:email" content="メールアドレス">
<meta property="og:phone_number" content="電話番号">
<meta property="og:fax_number" content="FAX番号">
2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?