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
,其他配置照旧。