【HTML】 SEO・SNS向けhead設定

【HTML】 SEO・SNS向けhead設定

head要素内のタグは、検索エンジンやSNSに対して、ページの情報をどのように解釈し、表示させるかを指定することができます。

HTML #HTML#構造化#SNS

【HTML】 SEO・SNS向けhead設定

サムネイル

head要素内のタグは、検索エンジンやSNSに対して、ページの情報をどのように解釈し、表示させるかを指定することができます。

更新日: 7/28/2025

ここでは、SEOとSNS共有の最適化に用いられるlink rel="canonical"、Open Graphプロトコル、Twitter Card、構造化データを解説します。

canonical 正規URLの明示

同一または類似のコンテンツが複数のURLでアクセス可能な場合、検索エンジンからの評価がそれぞれに分散することがあります。link rel="canonical"は、そのページの「正規」となるURLを検索エンジンに伝え、評価を一本化するために使用します。

<link rel="canonical" href="https://example.com/current-page">

SNSでの表示制御

Open Graph (OGP)
FacebookなどのSNSでページが共有された際の、タイトル、説明文、画像、URLなどを指定するプロトコルです。meta要素のproperty属性で設定します。

<meta property="og:title" content="ページのタイトル">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/current-page">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="ページの説明文">
<meta property="og:site_name" content="サイト名">

Twitter Card
Twitter上で、リッチな形式(大きい画像など)で表示させるための設定です。meta要素のname属性で設定します。設定がない場合、多くの項目は上記のOpen Graph設定が利用されます。

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@TwitterID">
<meta name="twitter:title" content="ページのタイトル">
<meta name="twitter:description" content="ページの説明文">
<meta name="twitter:image" content="https://example.com/image.jpg">

構造化データ

構造化データは、ページの内容(例えば「この記事の見出しは何か」「著者は誰か」など)を、検索エンジンが解釈可能な共通の語彙(スキーマ)で記述するものです。JSON-LD形式を使い、<script>タグで埋め込むのが現在の主流です。

検索結果で「リッチリザルト」として、詳細な情報が表示される可能性が上がります。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "記事の見出し",
  "image": "https://example.com/image.jpg",
  "author": {
    "@type": "Person",
    "name": "著者名"
  },
  "publisher": {
    "@type": "Organization",
    "name": "出版社名",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.png"
    }
  },
  "datePublished": "2025-07-10"
}
</script>

これらのタグは、検索エンジンやSNSに対し、コンテンツの情報を正確に伝え、意図した通りに表示させるために使用します。

検索

検索条件に一致する記事が見つかりませんでした