
<head>
内で最低限設定しておきたいHTMLタグを紹介します。
ほぼすべてのサイトで使用するページメタデータから、SNS用のOGP設定、コーポレートサイトやブログ記事、パンくずリストの構造化データ(JSON-LD)のをメモ。
他に実務で使用したものが出てきたら、ここに追記していきます。
サイト全般
<meta name="format-detection" content="telephone=no,address=no,email=no">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>ページタイトル</title>
<meta name="description" content="ページ説明文">
<link rel="canonical" href="正規ページのURL">
<link rel="icon" href="./favicon.ico" sizes="any"> <!-- ファビコン -->
<link rel="icon" href="./icon.svg" type="image/svg+xml"> <!-- モダンブラウザ用SVGアイコン -->
<link rel="apple-touch-icon" href="./apple-touch-icon.png"> <!-- スマホホーム画面ショートカット用アイコン -->
<link rel="manifest" href="./manifest.webmanifest"> <!-- Android用pngアイコンマニフェスト -->
<meta property="og:title" content="SNS用タイトル">
<meta property="og:description" content="SNS用ページ説明文">
<meta property="og:url" content="SNS用URL">
<meta property="og:image" content="SNS用サムネイル画像URL">
<meta property="og:type" content="website or blog">
<meta property="og:site_name" content="SNS用サイト名">
<meta property="og:locale" content="ja_JP">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@twitter id">
manifest.webmanifest内の記述
Android用pngアイコンマニフェストファイル内に記述。
{
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]
}
コーポレートサイト用構造化データ
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "企業名",
"founder": "創業者指名",
"foundingDate": "2000-04-01", /*企業設立日*/
"description": "企業説明文",
"url": "トップページのURL",
"logo": "ロゴ画像URL",
"telephone": "+81-00-0000-0000", /*電話番号*/
"faxNumber": "+81-00-0000-0000", /*FAX番号*/
"address": {
"@type": "PostalAddress",
"addressLocality": "区市町村",
"addressRegion": "都道府県",
"postalCode": "郵便番号",
"streetAddress": "番地以降",
"addressCountry": "JP"
},
"contactPoint": [
{
"@type": "ContactPoint",
"telephone": "+81-00-0000-0000", /*問い合わせ電話番号*/
"contactType": "customer service"
}
]},
"sameAs": [ <!-- 関連サイトやSNS -->/**/
"https://kanrensite.jp",
"https://www.facebook.com/kanren",
"https://twitter.com/kanren"
]
}
</script>
一般的なWebサイト用構造化データ
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "website",
"name": "サイト名",
"inLanguage": "jp",
"publisher": {
"@type": "Organization",
"name": "ウェブサイト運営会社名",
"logo": {
"@type": "ImageObject",
"url": "ロゴ画像URL"
}
},
"copyrightYear": "2023-01-01T10:50:37+0000", /*コピーライトの日時*/
"headline": "ページのタイトル",
"description": "ページ説明文",
"url": "ページURL"
}
</script>
パンくずリスト構造化データ
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"item": {
"@id": "Home url",
"name": "Home"
}
},
{
"@type": "ListItem",
"position": 2,
"item": {
"@id": "2階層目url",
"name": "2階層目ページタイトル"
}
},
{
"@type": "ListItem",
"position": 3,
"item": {
"@id": "3階層目url",
"name": "3階層目ページタイトル"
}
}
]
}
</script>
記事構造化データ
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BlogPosting", /*記事のタイプ*/
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "ページURL"
},
"headline": "記事タイトル",
"description": "説明文",
"image": "サムネイル画像URL",
"author": { /*著者情報*/
"@type": "Person",
"name": "著者名",
"url": "著者プロフィールページURL"
},
"publisher": { /*サイト情報*/
"@type": "Organization",
"name": "サイト名",
"logo": {
"@type": "ImageObject",
"url": "サイトロゴ画像URL"
}
},
"datePublished": "2021-01-27T15:20:30+09:00", /*記事を最初に公開した日時*/
"dateModified": "2021-01-28T09:10:55+09:00" /*記事を最後に更新した日時*/
}
</script>