Search Engine Optimization (SEO)

Principle

i18n.site adopts a non-refreshing single-page architecture. In order to facilitate search indexing, a separate static page and sitemap.xml will be generated for crawlers to crawl.

When the User-Agent of the access request is that of a search engine crawler, the request will be redirected to the static page via 302.

On static pages, use link to indicate the links to different language versions of this page, such as:

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

Configure Object Storage for Uploading Static Files

Static files can be generated locally, but a more common approach is to upload them to object storage.

Taking the .i18n/htm/ol.yml configuration file in the demo project as an example

host:
seo: true
out:
  - s3
v: //unpkg.com/i18n.site
x: 18x
importmap:
  i/: //unpkg.com/@i18n.site/

Please first modify the value of host: above to your domain name, such as i18n.site.

Then, edit ~/.config/i18n.site.yml and add the following configuration:

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

In the configuration, please change i18n.site to the value of host: in .i18n/htm/ol.yml, multiple object stores can be configured under s3, and the region field is optional (many object stores do not need to set this field).

Then run i18n.site -n to republ

If you have modified ~/.config/i18n.site.yml and wish to re-upload, please execute the following command within the project's root directory to purge the upload cache:

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

Cloudflare Configuration

Host your domain name with Cloudflare.

Conversion Rules

Implement the conversion rules depicted in the following image:

The corresponding rule code is provided below; please replace "i18n.site" with your actual domain name:

(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")
)

Caching Rules

Incorporate the following caching rules:

(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")

Redirect Rules

Configure the redirection rules as indicated below, ensuring to substitute "i18n.site" with your domain name:

(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*"
)

Select "Dynamic Redirect" for the URL redirect option, and modify the redirection path concat("/en",http.request.uri.path,".htm") by replacing /en with the default language you wish search engines to index.

Baidu Intelligent Cloud Configuration

For services targeting mainland China, utilize Baidu Smart Cloud.

数据上传到百度对象存储，并绑定到百度内容分发网络。

Next, create the script as follows in the EdgeJS Edge Service:

var uri=r.uri,p=uri.lastIndexOf('.');

if(
  p<0 || !/html?|css|rss|avif|md|ico|gz|js|json|png|svg|txt|webmanifest|xml/.test(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')
    return
  }
  r.uri = '/index.html'
}

r.respHeader(()=>{
var t = [];
r.rawHeadersOut.forEach((i)=>{
    var out = r.headersOut;
    var key = i[0].toLowerCase();
    if(key.startsWith('x-')||key.startsWith('ohc-')){
        delete out[key]
    }
    out['Cache-Control']='max-age='+9e5;
    ['Content-MD5','Age','Expires','Last-Modified'].forEach((i)=>delete out[i])
})

})

点击Debug，然后点击全网发布。

Advanced Usage: Traffic Distribution Based on Geographical Resolution

如果你既想在中国大陆地区提供服务，又想要cloudflare的免费国际流量，可以使用带有地域解析的DNS。

比如华为云DNS就提供了免费的地域解析，借助它可以实现中国大陆流量走百度智能云，国际流量走cloudflare。

cloudflare的配置有不少坑，这里说几个注意点:

域名托管在其他DNS，怎么用cloudflare

首先绑定一个任意域名到cloudflare，然后借助 SSL/TLS → 自定义域名，关联主域名到此域名。

cloudflare R2 无法通过自定义域名访问

因为cloudflare自带的对象存储R2无法自定义域名访问，所以需要用第三方的对象存储来放置静态文件。

这里以 backblaze.com 为例，演示怎么绑定第三方对象存储到cloudflare。

Create a bucket on backblaze.com, upload any file, click to browse the file, and obtain the domain name of the Friendly URL, which is f003.backblazeb2.com in this case.

在cloudflare将域名CNAME到f003.backblazeb2.com，并开启代理。

修改 cloudflare 的 SSL → 加密模式，设置为 Full

Add the conversion rule as shown in the following image, placing it at the top (highest priority):

Select "Dynamic" for Rewrite to, and replace your_bucketname in concat("/file/your_bucketname",http.request.uri.path) with the name of your bucket.

此外，上文的 cloudflare转换规则 中 index.html 改为 file/your_bucketname/index.html，其他配置照旧。