Vue ?? ?? ??: SEO ?? ?? ? ?? ?? ???

??? ???? ? ??? ??? ???? ? ???? ?? ??? ??? ??????? ??? ?? ?? ??? ?? ? ?????. ????? ?? ??? ??? ????? ?? SEO(???????)? ?? ?????. ???? Vue ??? ???? ? ?? ????? ?? SEO ? ?? ?? ???? ??? ??? ? ?????

Vue? ??? ????? ??? ?? ???? JavaScript ????????. ??? ????? ???? ?? ???? ??? ??? ?? ????? ????. ??? ????? ??? ??? ???? ??? ?? ?? ????? ??? ??? ????. ??? Vue?? ??? ? ???? ?? SEO ? ?? ?? ???? ???? ?? ?? ?????.

1. Vue

Meta ??? HTML ??? ?????? ???? ??? ????.

??? ?? ??? ???? ?? ???? ?? ??? HTML ??? ? ? ???? ? ??? ???. ????? ??? ??. Vue?? ?? ??? ???? ??? ??? ????.

<template>
  <div>
    <h1>這是Vue項目的主頁</h1>
  </div>
</template>

<script>
  export default {
    name: 'home',
    metaInfo: {
      title: 'Vue項目',
      meta: [{
        hid: 'description',
        name: 'description',
        content: '這是一篇Vue項目的主頁'
      }]
    }
  }
</script>

? ? MetaInfo? Vue?? ???? ?? ??? ???? ????, ??? ??? ?? ? ??? ??? ?? ??? ???? ??? ?? ??? ? ????. .

2. Vue? ??? ??? ??

Vue? ?? ?? DOM ??? ?? ??? ?? ???? ???? ??? ????? ????? ? ??? ???? ????. ??? ?? ??? ?? Vue? ??? ??? ????? ??? ? ?? ??? Vue ????? ??? ??? ??? SEO? ??? ????. ?? ?? Vue?? ???? asyncData ???? ???? ??? ?? ???? ???? ?? ??? ???? ?? ????? ??? ? ????.

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
  export default {
    name: 'news',
    asyncData ({ params, service }) {
      return service.getNews(params.id)
    },
    data () {
      return {
        title: ''
      }
    },
    created () {
      this.title = this.$route.params.title
    }
  }
</script>

? ???? asyncData? Vue?? ???? ????, service.getNews() ???? ???? ??? ???? ?? ? ???, ???? ??? ? ??? ??????? ???? ? ????. ??? ???? SEO? ???? ???? ??? ??? ??? ? ????.

3. Vue? ?? ? ???

Vue? ?? ??? Vue ?? ??? ???? ?? ??? ??? ?????? ???? ????? ??? ? ?? SSR(?? ? ???) ??? ?????. ?? SEO? ?? ??? ?? ???? ?? ??? ??? ? ????. Vue??? ?? ? ???? ???? ??? ?? ?????. Vue?? ???? VueSSRServerPlugin ????? VueSSRClientPlugin ????? ???? Vue ?? ??? ??? ?????? ?? ????? ???.

// webpack.server.config.js
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')

module.exports = {
  target: 'node',
  entry: './src/entry-server.js',
  output: {
    filename: 'server-bundle.js',
    libraryTarget: 'commonjs2'
  },
  plugins: [
    new VueSSRServerPlugin()
  ]
}

// webpack.client.config.js
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')

module.exports = {
  entry: './src/entry-client.js',
  plugins: [
    new VueSSRClientPlugin()
  ]
}

? ???? webpack.server.config.js ? webpack.client.config.js? ?? ?? ? ??? ? ????? ? ???? ?? ?? ????, ??? VueSSRServerPlugin ? VueSSRClientPlugin? ?? ?? ? ??????. Vue?? ???? ???????. ??? ????? ???? Vue ????? ?? ? ???? ?? ??? ? ?? SEO ??? ?????.

????? Vue? ????? ?????? ??????? SEO? ?? ?? ??? ????. ??? ?? ??, ??? ??? ?? ? ?? ? ???? ?????? Vue ????? SEO ? ?? ?? ??? ??? ? ??? ? ??? ?? ?? ? ?? ??? ??? ???? ??? ?? ? ????.

? ??? Vue ?? ?? ??: SEO ?? ? ?? ?? ??? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!