SEO: 在新增 meta tag 之後額外補上的設定

前言

在完成網頁服務的基本功能之後，為了 SEO，還有一些設定要處理。

說明

nginx - http2

強制要求 nginx 使用 http2 [1]

1
2
3
4
5
6
7
8


server {
    listen 443 ssl ;
    http2 on;

    location / {
          #  ...
    }
}

Note

啟用 http2 會因為要提升效率 (multiplexing)，而 (稍微) 增加 CPU 使用率。

HSTS

1

add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload";

強制來的 client 使用 HTTPS 連線，並且不允許使用不安全的連線。

設定完之後可以在 [2] 驗證

新增 H1 H2 heading tag

原本是只用 chakra UI 中的 Heading 控制標題大小，後來 SEO 檢測出來建議要有 H1 H2 tag，所以新增了：

1

<Heading as='h1' fontSize='xl' px={2}>xxxxxxxx</Heading>

Next JS third-parties - GoogleTagManager

參考了 [3]、[4]，在 Next JS 中設定 Google Analytics 的方法：

npm install @next/third-parties@latest next@latest

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


import { GoogleAnalytics } from '@next/third-parties/google'
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
      <GoogleAnalytics gaId="G-XYZ" />
    </html>
  )
}

以及 sitemap & robots.txt

這邊我也是直接依照 Next JS 的文件來設定，就直接附上連結：

圖片改用 webp

原先的插圖是 png，共 70KB，轉檔改成 webp 之後只有 37 KB！

預計未來所有的圖片都會這樣做。

當然更好的方式是再把圖片放到 CDN 上，這樣可以更快載入。

JSON-LD

在 google 文件 [5]

中查找對應的類別，然後補上類似以下欄位：

1
2
3
4
5
6
7
8


{
  "@context": "https://schema.org",
  "@type": "WebApplication",
  "name": "{你的 APP 名稱}",
  "url": "{你的 APP 網址}",
  "description": "{你的 APP 描述}",
  ...
}

這個可以參考 Next JS 的 JSON-LD 文件 [6]