ここでは、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に対し、コンテンツの情報を正確に伝え、意図した通りに表示させるために使用します。