FIVE

緣起

以往的前端頁面都是排版好使用標籤或者直接在後台渲染（MVC模式），一個頁面一個功能，或者使用參數做不同功能顯示（index.asp?f=bill）。

SPA 單頁式應用程式，讓不同網頁都是連同一份index.html，而搜尋引擎爬蟲會抓取index.html中的meta資訊作為搜尋的顯示結果，導致不同功能都是同一份結果。

一般來說SEO會需要的meta物件可以在 https://metatags.io/ 這個網站可以知道

大致上就是要加入這些 meta tag

<!-- Primary Meta Tags -->
<title>Meta Tags — Preview, Edit and Generate</title>
<meta name="title" content="Meta Tags — Preview, Edit and Generate">
<meta name="description" content="With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://metatags.io/">
<meta property="og:title" content="Meta Tags — Preview, Edit and Generate">
<meta property="og:description" content="With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!">
<meta property="og:image" content="https://metatags.io/assets/meta-tags-16a33a6a8531e519cc0936fbba0ad904e52d35f34a46c97a2c9f6f7dd7d336f2.png">

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://metatags.io/">
<meta property="twitter:title" content="Meta Tags — Preview, Edit and Generate">
<meta property="twitter:description" content="With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!">
<meta property="twitter:image" content="https://metatags.io/assets/meta-tags-16a33a6a8531e519cc0936fbba0ad904e52d35f34a46c97a2c9f6f7dd7d336f2.png">

一般的解法為SSR, Server-Side Rendering(伺服器端渲染)，由後端伺服器做入口，透過後端判斷路徑，來Render meta物件

因為老實說一個服務只要基本html就可以執行 ，還要加工搞伺服器網頁程式有點蠢，

這邊研究後提一個作法是在 npm run build後，寫一個小程式，把index.html複製多分功能的html頁面，修正網頁中的meta資料，然後設定nginx判斷路徑導引到不同html，來解決SEO問題

以下是 Vue Nginx流程與設定方式

圖上 getMetaList 是 meta資訊的物件集合 可協助製作XXX.html 並且 修正裡面的內容

ex ...

var getMetaList = [
    {
      name: 'Bill',
      title: 'Bill首頁',
      meta: [
        {
          name: 'description',
          content:
            'With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!'
        },
        { property: 'og:url', content: 'https://xxx.ccc.cc/' },
        {
          property: 'og:title',
          content: 'Meta Tags — Preview, Edit and Generate'
        },
        {
          property: 'og:description',
          content:
            
'With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!'
        },
        },
        {
          property: 'og:site_name',
          content: 'Meta Tags — Preview, Edit and Generate'
        },
        {
          property: 'og:image',
          content: 'https://img.ccc.cc/logo.jpg'
        }
      ]
    },
...]

nginx.conf設定方式

        #vue-router配置
        location / {
            index index.html;
            try_files $uri $uri/ @router;
        }

        location @router {
            # 是否有符合
            set $is_matched 0;
            
            if ($request_uri = /Bill) {
                rewrite ^.*$ /Bill.html last;
                set $is_matched 1;
            }
            if ($request_uri = /AllItems) {
                rewrite ^.*$ /AllItems.html last;
                set $is_matched 1;
            }
            if ($request_uri = /Trouble) {
                rewrite ^.*$ /Trouble.html last;
                set $is_matched 1;
            }
            
            
            # 其他沒有符合的頁面...
            if ($is_matched = 0) {
                rewrite ^.*$ /index.html last;
            }
        }