検索エンジン最適化 (SEO)

原理

i18n.site非更新の単一ページアーキテクチャを採用しており、検索インデックス作成を容易にするために、クローラーがクロールするために別の静的ページとsitemap.xml生成されます。

アクセスリクエストのUser-Agentが検索エンジンクローラーによって使用される場合、リクエストは302を介して静的ページにリダイレクトされます。

静的ページでは、このページの別の言語バージョンへのリンクを示すにはlink使用します ( :など)。

<link rel=alternate hreflang=zh href="https://i18n.site/zh/.htm">
<link rel=alternate hreflang=en href="https://i18n.site/en/.htm">

ローカルの nginx 構成

デモプロジェクトの.i18n/htm/main.yml構成ファイルを例として取り上げます

host: i18n-demo.github.io
seo: true
out:
  - fs

pkg:
  i: i18n.site
  md: i18n.site

cdn:
  v:
  jsd:

まず、上記のhost:の値をドメイン名に変更してください ( xxx.comなど)。

次に、 i18n.site -n 、静的ページがout/main/htmディレクトリに生成されます。

もちろん、最初にmainの構成を参照して.i18n/htm/dist.package.jsonと.i18n/htm/dist.ymlを作成するなど、他の構成ファイルを有効にすることもできます。

次に、 i18n.site -n -c dist実行すると、静的ページがout/dist/htmに生成されます。

以下の設定を参照するとnginx設定可能です。

map $http_user_agent $botLang {
  "~*baidu|yisou|sogou|360|byte" "/zh";
  "~*facebookexternalhit|slurp|bot|spider|curl" "/en";
  default "";
}

server {
  http2 on;
  listen 443 quic ;
  listen 443 ssl ;
  listen [::]:443 quic ;
  listen [::]:443 ssl ;

  add_header Alt-Svc 'h3=":443";ma=99999;persist=1';

  server_name doc.flashduty.com;

  ssl_certificate /root/.acme.sh/doc.flashduty.com_ecc/fullchain.cer;
  ssl_certificate_key /root/.acme.sh/doc.flashduty.com_ecc/doc.flashduty.com.key;

  root /mnt/doc.flashduty.com;

# サーバーワーカースクリプトを長時間キャッシュしないでください
  location = /S.js {
    add_header Cache-Control "max-age=600";
  }

# 他の静的リソースのキャッシュ時間を長く設定する
  location ~* \.(js|css|htm|html|md|avif|json|ico|xml|rss|gz|mp4|png|svg|txt|webmanifest)$ {
    add_header Cache-Control "max-age=999999";
  }

# クローラーがホームページのエントリとして使用する静的ファイルを設定します
  location = / {
    # $botLangが空でない場合は、設定された言語パスに従ったクローラーのアクセスとリダイレクトを意味します。
    if ($botLang) {
        return 301 $botLang/flashduty.htm;
    }
    add_header Cache-Control "max-age=600";
    rewrite ^ /index.html break;
  }

# シングルページアプリケーション構成
  location / {
    if ($botLang) {
      return 302 $botLang$request_uri.htm;
    }
    add_header Cache-Control "max-age=600";
    rewrite ^ /index.html break;
  }
}

server {
  server_name doc.flashduty.com;
  listen      80;
  listen      [::]:80 ;
  location    / {
    rewrite ^(.+) https://$host$1 permanent;
  }
  location /.well-known/acme-challenge/ {
    root /mnt/doc.flashduty.com/;
  }
}

静的ファイルをアップロードするためのオブジェクトストレージを構成する

静的ファイルはローカルで生成できますが、より一般的なアプローチは、静的ファイルをオブジェクトストレージにアップロードすることです。

上記で設定したout :に変更します。

out:
  - s3

次に、 ~/.config/i18n.site.ymlを編集して次の設定を追加します:

site:
  i18n.site:
    s3:
      - endpoint: s3.eu-central-003.backblazeb2.com
        ak: # access key
        sk: # secret key
        bucket: # bucket name
        # region:

設定では、 i18n.site host: in .i18n/htm/main.ymlの値に変更してください。複数のオブジェクトストアはs3下に設定でき、 regionフィールドはオプションです (多くのオブジェクトストアではこのフィールドを設定する必要はありません)。

次に、 i18n.site -n実行してプロジェクトを再公開します。

~/.config/i18n.site.yml変更して再アップロードしたい場合は、プロジェクトのルートディレクトリで次のコマンドを使用してアップロードキャッシュをクリアしてください:

rm -rf .i18n/data/seo .i18n/data/public

クラウドフレア構成

にホストされているcloudflare名。

変換ルール

以下に示すように変換ルールを追加します。

ルールコードは次のとおりです。コード「i18n.site」をドメイン名に変更してください。

(http.host in {"i18n.site"}) and not (
substring(http.request.uri.path,-3) in {".js" ".gz"} or
substring(http.request.uri.path,-4) in {".htm" ".rss" ".css" ".svg" ".ico" ".png" ".xml" ".txt"} or
substring(http.request.uri.path,-5) in {".html" ".avif" ".json"} or
ends_with(http.request.uri.path,".webmanifest")
)

キャッシュルール

次のようにキャッシュルールを追加します。

(substring(http.request.uri.path,-4) in {".htm" ".rss"}) or ends_with(http.request.uri.path,"/sitemap.xml") or ends_with(http.request.uri.path,".xml.gz")

リダイレクトルール

次のようにリダイレクトルールを設定します。コード「i18n.site」をドメイン名に変更してください。

(http.host in {"i18n.site"}) and not (
substring(http.request.uri.path,-3) in {".js" ".gz"} or
substring(http.request.uri.path,-4) in {".htm" ".rss" ".css" ".svg" ".ico" ".png" ".xml" ".txt"} or
substring(http.request.uri.path,-5) in {".html" ".avif" ".json"} or
ends_with(http.request.uri.path,".webmanifest")
) and (
http.user_agent wildcard "*bot*" or
http.user_agent wildcard "*spider*" or
http.user_agent wildcard "*facebookexternalhit*" or
http.user_agent wildcard "*slurp*" or
http.user_agent wildcard "curl*" or
http.user_agent wildcard "*InspectionTool*"
)

URL redirect動的リダイレクトを選択します。リダイレクトパスconcat("/en",http.request.uri.path,".htm")の/en 、検索エンジンに含めるデフォルトの言語に変更してください。

Baidu インテリジェントクラウド構成

中国本土にサービスを提供する必要がある場合は、 Baidu Smart Cloud を使用できます。

データは Baidu Object Storage にアップロードされ、Baidu コンテンツ配信ネットワークにバインドされます。

次に、次のようにEdgeJSサービスでスクリプトを作成します。

const uri = r.uri, p = uri.lastIndexOf(".");
if (
  p < 0 ||
  !"|js|css|htm|html|md|avif|json|ico|xml|rss|gz|mp4|png|svg|txt|webmanifest|".includes(
    "|" + uri.slice(p + 1) + "|",
  )
) {
  const ua = r.headersIn["User-Agent"].toLowerCase()
  if (/facebookexternalhit|slurp|bot|spider|curl/.test(ua)) {
    r.return(
      302,
      (/baidu|yisou|sogou|360|byte/.test(ua) ? "/zh" : "/en") + r.uri + ".htm",
    )
  } else {
    r.uri = "/index.html"
  }
}

r.respHeader(() => {
  const t = [], out = r.headersOut;
  ["Content-MD5", "Age", "Expires", "Last-Modified"].forEach(
    i => delete out[i]
  )
  r.rawHeadersOut.forEach(i => {
    const key = i[0].toLowerCase()
    if (key.startsWith("x-") || key.startsWith("ohc-")) {
      delete out[key]
    }
  })
  out["Cache-Control"] = "max-age=" + 9e5
  // 応答ヘッダーは、out.XXX = 'MSG'; などのデバッグ出力に設定できます。
})

Debugをクリックし、[ネットワーク全体に公開] をクリックします。

高度な使用法: 地域解像度に基づいてトラフィックを分散します。

中国本土でサービスを提供し、無料の国際トラフィックもcloudflareにしたい場合は、地域解像度でDNS使用できます。

たとえば、 Huawei Cloud DNSは無料の地域分析を提供しており、これにより中国本土のトラフィックは Baidu Smart Cloud を通過でき、国際トラフィックはcloudflareを通過できます。

cloudflareの設定には落とし穴がたくさんあります。注意点をいくつか紹介します:

ドメイン名は他のホストでホストされています`DNS` 、使用方法`cloudflare`

まず任意のドメイン名をcloudflareにバインドし、次にSSL/TLS → カスタムドメイン名を使用してメインドメイン名をこのドメイン名に関連付けます。

`cloudflare R2`カスタムドメイン名を介してアクセスできません

cloudflareのオブジェクトストレージR2にはカスタマイズされたドメイン名ではアクセスできないため、静的ファイルを配置するにはサードパーティのオブジェクトストレージを使用する必要があります。

ここでは、サードパーティのオブジェクトをバインドしてcloudflareに保存する方法を例としてbackblaze.comを取り上げます。

backblaze.comでバケットを作成し、任意のファイルをアップロードし、クリックしてファイルを参照し、ドメイン名Friendly URL (ここではf003.backblazeb2.comを取得します。

ドメイン名をCNAMEからf003.backblazeb2.comのcloudflareに変更し、プロキシを有効にします。

cloudflare SSL変更 → 暗号化モード、 Fullに設定

以下に示すように変換ルールを追加し、最初に置きます (最初のルールの優先順位が最も低くなります)。

Rewrite to動的を選択し、 your_bucketname in concat("/file/your_bucketname",http.request.uri.path)バケット名に変更します。

また、上記のcloudflare変換ルールでは、 index.html file/your_bucketname/index.htmlに変更され、その他の構成は変わりません。