ゼロから始める SEO 対策 ～ HTML ヘッダー編
HTML ヘッダーで行う SEO TO DO リスト
スマートフォン対応
スマートフォンページが別に用意されている場合を除き、スマートフォン表示への対応は SEO で重要です。以下の一文を HTML の <head> 節に加えます。
<meta name="viewport" content="width=device-width,initial-scale=1">canonical 設定
Facebookからのリンクなど、URLにパラメータが付与された形でアクセスされた場合など、アクセス履歴上分散してしまうことを避けるため、page.html?fbclid=abcde というアクセスであっても page.html へのアクセスとみなすよう、以下の一文をページ個別に設定します。
<link rel="canonical" href="https://（ドメイン名）/xxxx.html">外部リソースサーバーに対して Preconnect
Bootstrap などのライブラリを利用する際、外部サーバーを参照するケースがあります。そうした際に、「後で読み込むからまず接続しておいて」という指示をブラウザに出すのがこの一文です。
これにより、実際に読み込もうとした際に、すでにサーバーには接続されている状態なのでその分の時間を短縮できます。
<link rel="preconnect" href="https://cdn.jsdelivr.net">外部リソースファイルの Preload
上記と同様、「後で読み込むからまず読み込んでおいて」と指示を出すのがこのタグです。実際に読み込もうとした際には、すでにファイルが読み込まれている状態なので、その分の時間を短縮できます。
<link rel="preload prefetch" as="style" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="preload prefetch" as="script"href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous">サイトトップページのみ：サイト情報の構造化データの付与
構造化データの付与は SEO にとって重要です。以下の構造化データは会社情報とサイト情報を検索エンジンに教えてあげる構造化のデータになります。
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"Name": "（会社名）",
"url": "（ドメイン名）",
"logo": "（ドメイン名）/（企業ロゴのパス: img/logo.png など）",
"address": {
"@type": "PostalAddress",
"addressLocality": "（都道府県）",
"addressRegion": "（市区町村）",
"postalCode": "000-0000",
"streetAddress": "（住所・番地）"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "（会社名）",
"alternateName": "（英語会社名）",
"url": "（ドメイン名）"
}
</script>JavaScript の配置・読み込み方法（高度）
JavaScript の読み込みには注意が必要です。高速化のために、JavaScript の読み込み方法として、defer や async といったパラメータを指定することができますが、JavaScript の内容によっては defer や async 設定だと動作しないものや、読み込みの順番に依存関係のあるものなどもありますので、ここはひとつづつ検証をしながら実装を進めることを推奨します。
<script async src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
上記は Bootstrap の標準 JavaScript である bootstrap.bundle.min.js を async 設定で読み込む指示をした HTML の例です。Bootstrap の JS はこの設定で動作しますので、async による並列読み込みが SEO に貢献することになります。
