フロントエンドコーディングでやっておきたい検索エンジン対策

Web の進化により、フロントエンドコーディングはデザインを再現するだけでは済まなくなりました。

「ふぅ～。デザイン通りにコーディングしてやったぜぇ～:smirk:」
では終われません！

デザインを再現する以外にも注力することがいっぱい増えました…:persevere:

というわけで、フロントエンドコーディングでやっておきたい**検索エンジン対策**をまとめてみました！

## 構造化データ

:::note info
構造化データを利用すると、検索エンジンがコンテンツを理解しやすくなります。<br>また、検索結果にリッチリザルトが表示されるようになります。
:::

https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data?hl=ja

:::note alert
構造化データはページの読者に表示されないコンテンツをマークアップしてはいけません。ないものをマークアップした場合、スパムとしてマークされることがあります。
:::

https://developers.google.com/search/docs/appearance/structured-data/sd-policies?hl=ja#content

schema.org で定義されているボキャブラリは非常に多く、コンテンツのマークアップはかなり大変です。

https://schema.org/

定型化されているパンくずリストのマークアップから導入するのがオススメです。

https://developers.google.com/search/docs/appearance/structured-data/breadcrumb?hl=ja

```html:HTML
<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 正規化

:::note info
URL 正規化は、検索エンジンに評価してもらいたい URL を1つに集約するための作業です。
:::

https://developers.google.com/search/docs/advanced/crawling/consolidate-duplicate-urls?hl=ja

### リダイレクト

1つのページでも色々な URL でアクセスできてしまうため、正規 URL へのリダイレクト設定を `.htaccess` に記述します。

* http or https
* www あり or なし
* index.html あり or なし

:::note info
Apache はデフォルト設定だと URL の末尾がスラッシュではなく、且つディレクトリを指している場合、スラッシュ有りの URL にリダイレクトします。（DirectorySlash ディレクティブ）
:::

```apache:.htaccess
<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 を指定しておきます。

:::note warn
`href` 属性の URL は相対パスではなく絶対パスを指定します。
:::

```html:HTML
<link rel="canonical" href="https://example.com/">
```

## 多言語サイト

:::note info
多言語サイトの場合、言語や地域に応じたページの URL を明示しておきます。
:::

https://developers.google.com/search/docs/specialty/international/localized-versions?hl=ja

`hreflang` 属性に言語や地域に応じた、以下の3種類の URL を指定します。

1. 他言語版ページのURL（1つ以上）
2. 自ページのURL（1つだけ）
3. デフォルト言語ページのURL（1つだけ）

:::note warn
`href` 属性の URL は相対パスではなく絶対パスを指定します。
:::

```html:HTML
<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

:::note info
`sitemap.xml` は、クローラに対して、サイト内に存在する URL を伝えることができ、インデックスを促すことができます。
:::

:::note warn
Google 検索セントラルによると、sitemap.xml は必ずしも必要というわけではないようです。
:::

https://developers.google.com/search/docs/crawling-indexing/sitemaps/overview?hl=ja

`sitemap.xml` のタグの内容は以下となります。

https://www.sitemaps.org/ja/protocol.html

|タグ|有無|内容|
|:-|:-|:-|
|`<urlset>`|必須|全体を囲むタグ。現在のプロトコル標準を参照|
|`<url>`|必須|各 URL 情報の囲むタグ|
|`<loc>`|必須|ページの URL|
|`<lastmod>`|任意|ファイルの最終更新日|
|`<changefreq>`|任意|ページの更新頻度|
|`<priority>`|任意|URL の優先度。0.0 から 1.0 までの値が指定できる|

```xml:sitemap.xml
<?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

:::note info
`robots.txt` は、クローラに対して、アクセスしてほしい／してほしくない URL を伝えることができ、クロールの最適化が見込めます。
:::

https://developers.google.com/search/docs/crawling-indexing/robots/intro?hl=ja

`robots.txt` の設定項目は以下となります。

https://developers.google.com/search/docs/crawling-indexing/robots/create-robots-txt?hl=ja

|項目|内容|
|:-|:-|
|User-agent: *|すべてのクローラを対象|
|User-agent: Googlebot|Google 検索のクローラを対象|
|User-agent: bingbot|Bing 検索のクローラを対象|
|User-agent: baidu|百度（バイドゥ）のクローラを対象|
|Disallow|クロールを拒否するページ|
|Allow|クロールを許可するページ|
|Sitemap|省略可。サイトマップがある場所|

```text:robots.txt
User-agent: *
Disallow: /nobot/
Allow: /

Sitemap: https://example.com/sitemap.xml
```

## 関連記事

https://qiita.com/taqumo/items/3660b04400c28c5c2aa5

https://qiita.com/taqumo/items/d69522e2f3b95bf02996

https://qiita.com/taqumo/items/76a47a588b896e3c9840