SEOにおけるアノテーション（サンプルコード付）

アノテーションとは「annotation」と書いて、「注釈」や「注記」という意味を持つ言葉です。
実のところ、アノテーションとは、SEO以外でもよく使われている言葉で、IT界隈ではいろんな意味合いを持つ言葉になっているかもしれません。

アノテーションの解釈について、あまり言及されてはいませんが、弊社ではOpen GraphやTwitter Cards（X Cards）、総じてOGP（Open Graph Protocol）もアノテーションの一種だと認識しています。
ですが、ここではOGPは解説から省かせていただきます。
OGPについては別途解説いたします。

ここでは、一般的なSEOにおけるアノテーションという位置付けで解説を進めていきたいと思います。

アノテーションとは？

アノテーションを使うべきシーン

アノテーションとは、いろんな種類のコンテンツがある際に、検索エンジンに各ページの正しいデータを渡すためのタグのことを指しています。

例えば、PCとスマホのページのURLを分けている時や日本語と英語のページを分けている場合です。
大きくはこの二パターンになるんですが、サイトの仕様によっては細かい設定が必要になってきます。

さて、ここでもcanonicalタグが重要な役割を果たすことになります。
canonicalタグの書き方などは以下の記事を参考にしてください。

アノテーションのためのタグ

正規URLデータを渡すアノテーション

<link rel="canonical" href="https://www.semlaboratory.jp/">

前述のリンクのcanonicalタグです。
実はcanonicalも、アノテーションの一種なんですね。
デバイスごとにURLがあったりしても、どこがトップページとして正しいのかを伝えるタグですね。

デバイスごとのページのURLデータを渡すアノテーション

<link rel="alternate" media="screen and (max-width:499px;)" href="https://www.oosaka-web.jp/sp/">

最大の横幅が499pxまでのデバイスで閲覧した際に表示されるURLデータを差ししめすタグです。
デバイスごとに横幅を指定して設定するようにしましょう。

言語ごとのページのURLデータを渡すアノテーション

<link rel="alternate" hreflang="en" href="https://www.oosaka-web.jp/en/">

上記の様な書き方になるわけですが、多言語については細かい補足もありますので、Googleがアップしているコンテンツもチェックするようにしてください。

XMLで記述するケース

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
<loc>https://www.oosaka-web.jp/</loc>
<xhtml:link rel="alternate" media="screen and (max-width:499px;)" href="https://www.oosaka-web.jp/sp/" />
</url>
</urlset>

このタグを手書きするケースは稀なケースのような気もします。
上記のタグをコピーしていただき、URLだけを書き換えていただき、デバイス分岐を増やすなら増やしていただき、そのままXMLサイトマップにペーストしていただければと思います。
手書きするにしても、システムで管理するにしても、データの出力をきちんとコントロールするようにしましょう。

注意点

上記のタグは、単独で使われるタグではなく、それぞれを組み合わせて利用するケースが大半です。
Googleのコンテンツを引用させていただきます。

<link rel="canonical" href="https://www.oosaka-web.jp/">
<link rel="alternate" href="https://www.oosaka-web.jp/en-gb" hreflang="en-gb">
<link rel="alternate" href="https://www.oosaka-web.jp/en-us" hreflang="en-us">
<link rel="alternate" href="https://www.oosaka-web.jp/en-au" hreflang="en-au">
<link rel="alternate" href="https://www.oosaka-web.jp/" hreflang="x-default">

上記が多言語時のサンプルです。
日本語での表示がトップになっていて、そのことをx-defaultとcanonicalで伝達しているケースです。

Googleの考え・・・かどうかは分かりませんが、サンプルを見ていましたら、言語セレクターページを作り言語ごとにページを分けることを推奨しているように見えました。
ですので、言語セレクターページをトップページにするならば、以下の様に修正すると適切かもしれません。
以下は、ルートのindexページを言語セレクターとして、セカンドディレクトリから言語ごとに分岐していて、日本語ページをメインにして考えた場合のアノテーションです。

<link rel="canonical" href="https://www.oosaka-web.jp/ja">
<link rel="alternate" href="https://www.oosaka-web.jp/en-gb" hreflang="en-gb">
<link rel="alternate" href="https://www.oosaka-web.jp/en-us" hreflang="en-us">
<link rel="alternate" href="https://www.oosaka-web.jp/en-au" hreflang="en-au">
<link rel="alternate" href="https://www.oosaka-web.jp/" hreflang="x-default">

上記を英語バージョンをメインとしたページにする場合は、以下の様に修正することになります。

<link rel="canonical" href="https://www.oosaka-web.jp/en-us">
<link rel="alternate" href="https://www.oosaka-web.jp/ja" hreflang="ja">
<link rel="alternate" href="https://www.oosaka-web.jp/en-gb" hreflang="en-gb">
<link rel="alternate" href="https://www.oosaka-web.jp/en-au" hreflang="en-au">
<link rel="alternate" href="https://www.oosaka-web.jp/" hreflang="x-default">

また、デバイスごとにページを出し分ける際も同じ要領でアノテーションを設置し、検索エンジンに効率よくクローリングしてもらいインデックスしていただけるように配慮しましょう。

締め

アノテーションについて以上です。

細かいことを言うとしますと、AMPページにもアノテーションの設置が必要だったりしますが、2025年1月現在、AMPに対して積極的な取り組みは見られないのでここでは解説しませんでした。
AMPに関しましては、また別途ページを作成して解説していこうと思います。
弊社保有の旧ドメイン「oosaka-web.jp」ではAMPページを配信していたこともあり、AMPについてはかなり実践的な感じで取り組んでまいりました。

あの頃、AMPの恩恵を受けたか否かで言うと、かなり恩恵を受けたように感じています。
というのも、スマホの検索結果に「⚡️」の表示が付いてたので、いろんな方に質問をいただきました。
また、AMPの解説については、いろんなところで引用されました。
今となっては、その解説が必要かどうかは分かりませんが、いろんな情報を見ながら適宜判断していこうと思います。

アノテーションの有無は、検索エンジン上での動きに大きな影響が出ますので、きちんと理解してデータ配信したいところです。