Bagaimana Mengurus SEO dalam aplikasi Vue SSR atau NUXT?

Kunci untuk SEO dengan VUE SSR atau NUXT adalah untuk memastikan kandungannya diberikan pada sisi pelayan dan tetapkan metadata dengan betul. 1. Secara dinamik menetapkan tajuk dan perihalan menggunakan useHead (NUXT 3) atau VUE-META; 2. Dapatkan data sebelum membuat melalui UseasyncData dan kaedah lain untuk memastikan bahawa HTML mengandungi kandungan sebenar; 3. Tetapkan URL kanonik yang unik untuk setiap halaman untuk mengelakkan kandungan pendua; 4. Menjana sitemap dan robots.txt untuk meningkatkan penemuan crawler; 5. Tambah Graf Terbuka, Kad Twitter dan data berstruktur JSON-LD untuk meningkatkan perkongsian dan paparan klip yang kaya; 6. Mengoptimumkan gambar dan metrik web teras untuk meningkatkan prestasi, dan akhirnya mencapai kesan SEO yang sama seperti laman web tradisional.

Menguruskan SEO dalam aplikasi VUE SSR (Rendering Sider-Side) atau NUXT jauh lebih mudah daripada dalam SPA standard (aplikasi halaman tunggal), kerana kandungannya diberikan pada pelayan dan dihantar kepada klien sebagai HTML yang terbentuk sepenuhnya. Ini bermakna crawler enjin carian boleh membaca dan mengindeks kandungan anda dengan mudah. Walau bagaimanapun, SEO yang betul masih memerlukan persediaan yang disengajakan -terutamanya untuk tag meta, data berstruktur, URL kanonik, dan kandungan dinamik. Inilah caranya dengan berkesan.

1. Gunakan vue-meta (atau useHead terbina dalam Nuxt) untuk tag meta dinamik

Kunci kepada SEO yang baik adalah mengawal <title></title> , <meta description> , tag graf terbuka, dan elemen kepala lain setiap halaman.

Dalam NUXT 3 (disyorkan)

NUXT 3 menggunakan useHead() yang boleh dikomposisikan, yang bersih dan mudah:

 // halaman/blog/[slug] .vue
<persediaan skrip>
Route Const = userOute ()
const {data: post} = menunggu useFetch (`/api/posts/$ {route.params.slug}`)

UseHead ({
  Tajuk: Post.Value? .Title,
  Meta: [
    {name: &#39;description&#39;, content: post.value? .excerpt},
    {harta: &#39;og: tajuk&#39;, kandungan: post.value? .title},
    {harta: &#39;og: keterangan&#39;, kandungan: post.value? .excerpt},
    {property: &#39;og: type&#39;, content: &#39;article&#39;},
    {name: &#39;twitter: card&#39;, content: &#39;summary_large_image&#39;}
  ],
  Pautan: [
    {rel: &#39;canonical&#39;, href: `https://yoursite.com/blog/$ {route.params.slug}`}
  ]
})
</script>

Ini memastikan bahawa setiap catatan blog mempunyai metadata yang unik dan boleh diindeks.

Di Vue SSR (dengan Vue 2/3 dan vue-meta )

Jika anda menggunakan Vue SSR tanpa NUXT, pasang vue-meta :

 NPM Pasang Vue-Meta

Kemudian dalam komponen anda:

 Eksport Lalai {
  moKainfo () {
    kembali {
      Tajuk: this.post.title,
      Meta: [
        {name: 'description', content: this.post.excerpt},
        {Property: 'Og: Title', Content: This.post.title}
      ]
    }
  },
  async dicipta () {
    this.post = menunggu FetchPost (ini. $ route.params.id)
  }
}

? PENTING: Sentiasa gunakan fungsi reaktif (seperti metaInfo() ) supaya data dinilai semula apabila beban kandungan.

2. Laluan dinamik pra-render atau SSR dengan betul

Bagi SEO, setiap halaman awam mesti diberikan pelayan dengan kandungan penuh dan metadata .

Dalam NUXT: Gunakan defineRouteRules

Anda boleh mengawal tingkah laku rendering dan caching:

 // app/router.options.ts
Eksport definerouterul lalai ({
  '/blog/**': {ssr: true},
  '/admin/**': {ssr: false}
})

Ambil data sebelum membuat

Gunakan asyncData (nuxt 2) atau useAsyncData (nuxt 3) untuk mengambil kandungan sebelum halaman membuat:

 // nuxt 3
const {data: post} = menunggu useasyncdata ('pos', () =>
  $ ambil (`/api/pos/$ {route.params.slug}`)
)

Ini memastikan HTML yang dihantar dari pelayan termasuk kandungan sebenar -bukan hanya memuatkan keadaan.

3. Mengoptimumkan untuk crawler dan pengindeksan

Walaupun dengan SSR, anda perlu membantu enjin carian memahami laman web anda.

Tetapkan URL Canonical

Elakkan kandungan pendua dengan menetapkan pautan kanonik:

 UseHead ({
  Pautan: [
    {rel: 'canonical', href: `https://example.com/blog/$ {slug}`}
  ]
})

Menjana sitemap

Gunakan @nuxtjs/sitemap (NUXT 2) atau nuxt-simple-sitemap (NUXT 3):

 // nuxt 3: nuxt.config.ts
Eksport definenuxtconfig lalai ({{
  Modul: ['Nuxt-Simple-sitemap'],
  sitemap: {
    URL: ['/kira -kira', '/kenalan'],
    Kecualikan: ['/admin/**']
  }
})

Atau menghasilkannya secara dinamik dari API kandungan anda.

Tambah robots.txt

 // nuxt.config.ts
Robot: {
  UserAgent: '*',
  Tidak membenarkan: '/admin/'
}

4. Meningkatkan Vitals Web Teras (Boost SEO tidak langsung)

Google meletakkan halaman berdasarkan prestasi. SSR membantu, tetapi anda masih memerlukan:

• Imej yang dioptimumkan : Gunakan nuxt-img atau @nuxt/image
• JavaScript yang minimum : Elakkan menghidratkan komponen yang tidak perlu
• CSS Kritikal Inlining : NUXT mengendalikan ini dengan lalai
• Kandungan Offscreen Lazy-Load

 <Nuxtimg src = " /hero.jpg" alt = "hero" loading = "malas" />

Bonus: Data Struktur (schema.org)

Tambahkan JSON-LD untuk coretan yang lebih baik:

 UseHead ({
  Skrip: [
    {
      Jenis: 'Aplikasi/LD JSON',
      kanak -kanak: json.stringify ({
        '@context': 'https://schema.org',
        '@type': 'Blogposting',
        tajuk utama: post.title,
        Penerangan: Post.Excerpt,
        pengarang: {'@type': 'orang', nama: post.author}
      })
    }
  ]
})

Senarai Semak Ringkasan

• ✅ Gunakan useHead() (nuxt 3) atau vue-meta untuk menetapkan tajuk & meta dinamik
• ✅ Ambil Data Sebelum Rendering (SSR Termasuk Kandungan Sebenar)
• ✅ Tetapkan URL Canonical untuk mengelakkan pendua
• ✅ Menjana sitemap dan robots.txt
• ✅ Tambah Graf Terbuka dan Kad Twitter untuk Perkongsian Sosial
• ✅ Termasuk data berstruktur (JSON-LD)
• ✅ Mengoptimumkan imej dan prestasi

Dengan VUE SSR atau NUXT, anda sudah mempunyai HTML HTML yang ditutupi oleh SeO yang ditutupi. Selebihnya adalah metadata penalaan halus, struktur kandungan, dan penemuan. Lakukan dengan betul, dan aplikasi Vue anda akan berpangkat seperti mana -mana laman tradisional.

Pada asasnya: memberi awal, tag dengan bijak, dan beritahu enjin carian apa yang anda tunjukkan.

Atas ialah kandungan terperinci Bagaimana Mengurus SEO dalam aplikasi Vue SSR atau NUXT?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!