headに設定しておきたいHTMLメタデータやOGP、構造化データ – 2023年版

Coding

headで設定するHTMLマークアップ - 2023年版

<head>内で最低限設定しておきたいHTMLタグを紹介します。

ほぼすべてのサイトで使用するページメタデータから、SNS用のOGP設定、コーポレートサイトやブログ記事、パンくずリストの構造化データ(JSON-LD)のをメモ。
他に実務で使用したものが出てきたら、ここに追記していきます。

サイト全般

HTML

<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アイコンマニフェストファイル内に記述。

HTML

{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

コーポレートサイト用構造化データ

HTML

<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サイト用構造化データ

HTML

<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>

パンくずリスト構造化データ

HTML

<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>

記事構造化データ

HTML

<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>

Contact

BUILDにご興味をもっていただきありがとうございます。
ウェブデザインやロゴデザイン、その他クリエイティブに関するご相談は、 フォームよりお気軽にご連絡ください。

お問い合わせはこちら