Web の進化により、フロントエンドコーディングはデザインを再現するだけでは済まなくなりました。
「ふぅ～。デザイン通りにコーディングしてやったぜぇ～
」
では終われません！
デザインを再現する以外にも注力することがいっぱい増えました…
というわけで、フロントエンドコーディングでやっておきたい検索エンジン対策をまとめてみました！
構造化データ
構造化データを利用すると、検索エンジンがコンテンツを理解しやすくなります。
また、検索結果にリッチリザルトが表示されるようになります。
構造化データはページの読者に表示されないコンテンツをマークアップしてはいけません。ないものをマークアップした場合、スパムとしてマークされることがあります。
schema.org で定義されているボキャブラリは非常に多く、コンテンツのマークアップはかなり大変です。
定型化されているパンくずリストのマークアップから導入するのがオススメです。
<html>
<head>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "ホーム",
"item": "https://example.com/"
},
{
"@type": "ListItem",
"position": 2,
"name": "カテゴリー",
"item": "https://example.com/category/"
},
{
"@type": "ListItem",
"position": 3,
"name": "詳細"
}
]
}
</script>
</head>
<body>
<nav>
<ol>
<li>
<a href="https://www.example.com/">ホーム</a>
</li>
<li>
<a href="https://www.example.com/category/">カテゴリー</a>
</li>
<li>詳細</li>
</ol>
</nav>
</body>
</html>
URL 正規化
URL 正規化は、検索エンジンに評価してもらいたい URL を1つに集約するための作業です。
リダイレクト
1つのページでも色々な URL でアクセスできてしまうため、正規 URL へのリダイレクト設定を .htaccess に記述します。
- http or https
- www あり or なし
- index.html あり or なし
Apache はデフォルト設定だと URL の末尾がスラッシュではなく、且つディレクトリを指している場合、スラッシュ有りの URL にリダイレクトします。（DirectorySlash ディレクティブ）
<IfModule mod_rewrite.c>
RewriteEngine On
# http → https
RewriteCond %{HTTPS} off
RewriteCond %{HTTP:X-Forwarded-Proto} !^https$
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
# https → http
RewriteCond %{HTTPS} on
RewriteRule ^(.*)$ http://%{HTTP_HOST}%{REQUEST_URI} [R,L]
# www ありに統一
RewriteCond %{HTTP_HOST} !^www\. [NC]
RewriteRule ^(.*)$ https://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
# www なしに統一
RewriteCond %{HTTP_HOST} ^www\.(.*) [NC]
RewriteRule ^(.*)$ https://%1%{REQUEST_URI} [R=301,L]
# index.htmlなしに統一
RewriteCond %{THE_REQUEST} ^.*/index\.html
RewriteRule ^(.*)index\.html$ http://●●●.★★★/$1 [R=301,L]
</IfModule>
canonical
URL にパラメータが付くと別の URL として認識されてしまいます。
別の URL として認識させないために、canonical タグに自ページの URL を指定しておきます。
href 属性の URL は相対パスではなく絶対パスを指定します。
<link rel="canonical" href="https://example.com/">
多言語サイト
多言語サイトの場合、言語や地域に応じたページの URL を明示しておきます。
hreflang 属性に言語や地域に応じた、以下の3種類の URL を指定します。
- 他言語版ページのURL（1つ以上）
- 自ページのURL（1つだけ）
- デフォルト言語ページのURL（1つだけ）
href 属性の URL は相対パスではなく絶対パスを指定します。
<link rel="alternate" hreflang="ja" href="https://example.com/">
<link rel="alternate" hreflang="en" href="https://example.com/en/">
<link rel="alternate" hreflang="x-default" href="https://example.com/">
sitemap.xml
sitemap.xml は、クローラに対して、サイト内に存在する URL を伝えることができ、インデックスを促すことができます。
Google 検索セントラルによると、sitemap.xml は必ずしも必要というわけではないようです。
sitemap.xml のタグの内容は以下となります。
| タグ | 有無 | 内容 |
|---|---|---|
<urlset> |
必須 | 全体を囲むタグ。現在のプロトコル標準を参照 |
<url> |
必須 | 各 URL 情報の囲むタグ |
<loc> |
必須 | ページの URL |
<lastmod> |
任意 | ファイルの最終更新日 |
<changefreq> |
任意 | ページの更新頻度 |
<priority> |
任意 | URL の優先度。0.0 から 1.0 までの値が指定できる |
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>http://www.example.com/</loc>
<lastmod>2023-01-01</lastmod>
<changefreq>weekly</changefreq>
<priority>1.0</priority>
</url>
</urlset>
robots.txt
robots.txt は、クローラに対して、アクセスしてほしい／してほしくない URL を伝えることができ、クロールの最適化が見込めます。
robots.txt の設定項目は以下となります。
| 項目 | 内容 |
|---|---|
| User-agent: * | すべてのクローラを対象 |
| User-agent: Googlebot | Google 検索のクローラを対象 |
| User-agent: bingbot | Bing 検索のクローラを対象 |
| User-agent: baidu | 百度（バイドゥ）のクローラを対象 |
| Disallow | クロールを拒否するページ |
| Allow | クロールを許可するページ |
| Sitemap | 省略可。サイトマップがある場所 |
User-agent: *
Disallow: /nobot/
Allow: /
Sitemap: https://example.com/sitemap.xml
関連記事