Ringkasan pengalaman pembangunan Vue: Berlatih dalam menyelesaikan SEO dan pengoptimuman enjin carian

Ringkasan pengalaman pembangunan Vue: Amalan dalam menyelesaikan SEO dan pengoptimuman enjin carian

Dalam era perkembangan pesat Internet mudah alih dan teknologi Web semasa, enjin carian masih merupakan salah satu cara yang paling penting untuk mendapatkan maklumat di Internet. Untuk laman web yang perlu mendapat pendedahan tinggi dalam enjin carian, SEO (Pengoptimuman Enjin Carian) adalah tugas yang penting. Jadi, untuk projek pembangunan web menggunakan teknologi Vue, bagaimana untuk mencapai SEO dan pengoptimuman enjin carian?

Vue ialah rangka kerja JavaScript progresif untuk membina antara muka pengguna. Ia ringan, cekap, mudah digunakan, mudah digunakan, dsb., dan mempunyai pelbagai aplikasi. Walau bagaimanapun, kerana ia menggunakan teknologi pemaparan bahagian hadapan, ia mempunyai had tertentu untuk merangkak enjin carian Oleh itu, untuk tapak web yang dibangunkan oleh Vue, adalah amat penting untuk melaksanakan SEO dan pengoptimuman enjin carian.

1. Meta tag dalam Vue

Meta tag merujuk kepada teg yang menyediakan metadata dalam dokumen HTML Dengan menambahkan teg Meta dalam teg

halaman web dan struktur. Kaedah menambah tag Meta dalam Vue adalah seperti berikut:

<template>
  <div>
    <h1 id="这是Vue项目的主页">这是Vue项目的主页</h1>
  </div>
</template>

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

Antaranya, metaInfo ialah kaedah menambah tag Meta yang disediakan oleh Vue, di mana tajuk dan meta masing-masing mewakili tajuk halaman web dan maklumat meta, dan boleh diubah suai mengikut keperluan. .

2. Pemerolehan data tak segerak dalam Vue

Vue melaksanakan pemaparan bahagian hadapan melalui teknologi DOM mayanya sendiri, menjadikan kemas kini antara muka pengguna lebih pantas dan lancar. Walau bagaimanapun, untuk enjin carian, kerana mereka tidak dapat mengenali proses pemaparan tak segerak dalam Vue, pemerolehan data tak segerak dalam projek Vue akan memberi kesan kepada SEO. Untuk melakukan ini, kami boleh menggunakan kaedah asyncData yang disediakan oleh Vue untuk melaksanakan proses mendapatkan data tak segerak sebelum pemaparan bahagian hadapan selesai.

<template>
  <div>
    <h1 id="title">{{ 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>

Dalam kod di atas, asyncData ialah kaedah yang disediakan oleh Vue, di mana data tak segerak boleh diperolehi dengan memanggil kaedah service.getNews() Selepas mendapat data, ia boleh dipaparkan dalam antara muka pengguna. Dengan cara ini, ketepatan SEO dapat dijamin dan pengalaman pengguna dapat dipertingkatkan.

3. Perenderan bahagian pelayan dalam Vue

Vue menyediakan kaedah pemaparan sebelah pelayan (SSR), yang boleh menyebabkan komponen Vue pada bahagian pelayan, dan kemudian mengembalikan hasil pemaparan kepada klien untuk dipaparkan kepada pengguna, seperti ini Ini boleh menyelesaikan masalah kesan rendering bahagian hadapan pada SEO. Dalam Vue, kaedah menggunakan pemaparan sebelah pelayan juga sangat mudah Anda hanya perlu menggunakan pemalam VueSSRServerPlugin dan pemalam VueSSRClientPlugin yang disediakan oleh Vue untuk memaparkan komponen Vue pada pelayan dan klien masing-masing.

// 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()
  ]
}

Dalam kod di atas, webpack.server.config.js dan webpack.client.config.js ialah fail konfigurasi untuk pemaparan sebelah pelayan dan pemaparan sebelah pelanggan, di mana VueSSRServerPlugin dan VueSSRClientPlugin masing-masing ialah pemaparan sebelah pelayan pemalam yang disediakan oleh Vue. Dengan menggunakan pemalam ini, kami boleh melaksanakan pemaparan bahagian pelayan bagi projek Vue dengan mudah, dengan itu meningkatkan kesan SEO.

Ringkasnya, Vue, sebagai rangka kerja progresif bahagian hadapan, mempunyai had tertentu dalam SEO. Walau bagaimanapun, dengan menambahkan teg Meta, pemerolehan data tak segerak dan pemaparan sebelah pelayan, kami boleh menyelesaikan masalah SEO dan pengoptimuman enjin carian projek Vue dengan baik, seterusnya mencapai pengalaman pengguna dan hasil perniagaan yang lebih baik.

Atas ialah kandungan terperinci Ringkasan pengalaman pembangunan Vue: Berlatih dalam menyelesaikan SEO dan pengoptimuman enjin carian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!