Skip to main content

meta タグについて

OGP

一般的な OGP 向けのメタタグ

以下と同等の meta タグはサイト作成の際必須に導入します。(参考

const DOMAIN = "";
const URL = "";
const SITE_NAME = "";
const DESCRIPTION = "";

<meta property="og:title" content={`${title}| ${SITE_NAME}`} />
<meta property="og:type" content="website" />
<meta property="og:url" content={URL} />
<meta property="og:image" content=`${DOMAIN}/ogp-icon.png` />
{/* <meta property="og:image" content=`${DOMAIN}/ogp-image.png` /> 大きい画像で表示したい場合 */}
<meta property="og:site_name" content={SITE_NAME} />
<meta property="og:description" content={DESCRIPTION} />
<meta property="og:locale" content="ja_JP" />

X 向けの meta タグ

X 上での投稿に OGP とは別に画像や説明文を表示できるため、下記のような対応をします。

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@maki_saki" />
<meta name="twitter:title" content=`${title} | ${SITE_NAME}` />
<meta name="twitter:description" content={DESCRIPTION} />

大きいタイプのリンクカード(summary_large_image)は悪用する人が出始めたので、原則summary で対応します。(参考
※Facebook は基本対応しません。

Favicon について

Favicon は以下のパターンで用意します(参考

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
<link rel="manifest" href="/manifest.webmanifest">

manifest は以下のようになります。

// manifest.webmanifest
{
"name": "",
"short_name": "",
"start_url": "/index.html",
"display": "standalone",
"theme_color": "",
"background_color": "",
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]
}

Figma での切り出し設定

参考

URL備考
Favicon ジェネレーターについて画像ファイルから favicon 用の画像(favicon.ico)を生成・変換するサービス
OGP 確認:facebook、twitter、LINE、はてなのシェア時の画像・文章を表示 ラッコツールズ様々なサービスの OGP の横断確認