Cara menggunakan Vue untuk pemaparan sebelah pelayan dan pengoptimuman SEO

Cara menggunakan Vue untuk pemaparan sebelah pelayan dan pengoptimuman SEO

Pengenalan:
Memandangkan pemisahan bahagian hadapan dan bahagian belakang menjadi semakin popular, Vue, sebagai rangka kerja JavaScript yang popular, digunakan secara meluas di bahagian hadapan pembangunan. Walau bagaimanapun, memandangkan pendekatan lalai Vue ialah pemaparan sebelah pelanggan, ini mungkin menyebabkan beberapa isu berkaitan SEO (pengoptimuman enjin carian). Untuk menyelesaikan masalah ini, Vue memperkenalkan konsep pemaparan sisi pelayan (SSR) Artikel ini akan memperkenalkan secara terperinci cara menggunakan Vue untuk pemaparan bahagian pelayan dan pengoptimuman SEO.

1. Konsep dan kelebihan pemaparan sebelah pelayan (SSR)

1. Apakah pemaparan sebelah pelayan?
   Server Side Rendering (SSR) merujuk kepada pemaparan rentetan HTML aplikasi Vue terus pada bahagian pelayan dan mengembalikannya kepada klien, bukannya hanya mengembalikan fail HTML kosong dan kemudian menjana halaman secara dinamik melalui kandungan klien.
2. Kelebihan pemaparan sebelah pelayan
3. Sokong rangkak enjin carian: Memandangkan perangkak enjin carian terutamanya menghuraikan berdasarkan kandungan HTML, halaman HTML yang lengkap boleh dikembalikan kepada enjin carian melalui pemaparan sebelah pelayan, yang bermanfaat untuk pengoptimuman SEO.
4. Mempercepatkan masa pemuatan skrin pertama: Memandangkan pemaparan sebelah pelayan mengembalikan halaman yang dipaparkan secara langsung, pengguna hanya perlu menunggu kandungan akhir dimuatkan, yang sangat mengurangkan masa pemuatan skrin pertama.
5. Prestasi yang lebih baik: Dengan mengurangkan bilangan dan saiz data yang dihantar antara hujung hadapan dan belakang, pemaparan bahagian pelayan boleh meningkatkan kelajuan respons keseluruhan halaman dan meningkatkan pengalaman pengguna.

2. Langkah menggunakan Vue untuk pemaparan sebelah pelayan

1. Buat projek Vue
   Pertama, buat projek Vue, yang boleh dibina dengan cepat menggunakan Vue CLI.

vue create ssr-app
cd ssr-app

2. Tambah sokongan pemaparan bahagian pelayan
   Dalam direktori akar projek, pasang pakej vue-server-renderer dan buat fail pelayan. vue-server-renderer包，并创建一个服务器文件。

npm install vue-server-renderer
mkdir server
touch server/index.js

在服务器文件server/index.js中，引入所需的模块，并创建一个Express服务器。

const express = require('express');
const { createBundleRenderer } = require('vue-server-renderer');
const server = express();

3. 配置服务器端渲染
   接下来，我们需要配置服务器端渲染的参数。首先，需要导入Vue的实例和项目的入口文件，以及一个渲染器函数。

const fs = require('fs');
const path = require('path');
const serverBundle = require('../dist/server-bundle.json');
const clientManifest = require('../dist/client-manifest.json');
const template = fs.readFileSync(path.resolve(__dirname, '../public/index.html'), 'utf-8');
const renderer = createBundleRenderer(serverBundle, {
  runInNewContext: false, // 推荐
  template, // （可选）页面模板
  clientManifest // （可选）客户端构建 manifest
});

4. 处理路由请求
   使用服务器端渲染的关键是处理路由请求，并将渲染结果返回给客户端。在服务器文件中，需要定义路由和对应的处理程序。

server.get('*', (req, res) => {
  const context = { url: req.url };
  renderer.renderToString(context, (err, html) => {
    if (err) {
      if (err.code === 404) {
        res.status(404).end('Page not found');
      } else {
        res.status(500).end('Internal Server Error');
      }
    } else {
      res.end(html);
    }
  });
});

5. 启动服务器
   最后，我们需要启动服务器来监听请求。

server.listen(3000, () => {
  console.log('Server running');
});

三、SEO优化

1. 基本SEO优化
   在使用服务器端渲染的基础上，我们还可以采取一些额外措施来进一步优化SEO效果。
2. 合理设置meta标签：通过在页面中添加meta标签，包括description、title等元信息，可以帮助搜索引擎更好地理解网页内容。
3. 创建友好的URL：使用有意义的URL结构，注意使用关键词和描述性词语，便于搜索引擎和用户更好地理解页面内容。
4. 使用预渲染技术
   预渲染是指在构建过程中预先渲染静态页面，并将其保存到服务器上。这种方式利用了服务器的计算能力，生成静态页面，并在访问时直接返回给客户端，提高了首屏加载速度。

在Vue项目的vue.config.js文件中，添加以下配置：

module.exports = {
  pages: {
    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html',
      prerender: true // 启用预渲染
    }
  }
}

在运行npm run build

rrreee

Dalam fail pelayan server/index.js, perkenalkan modul yang diperlukan dan buat pelayan Express.
rrreee

Konfigurasikan pemaparan sebelah pelayan🎜Seterusnya, kita perlu mengkonfigurasi parameter pemaparan sebelah pelayan. Mula-mula, anda perlu mengimport contoh Vue dan fail kemasukan projek, serta fungsi pemapar. 🎜🎜rrreee
🎜Mengendalikan permintaan penghalaan🎜Kunci untuk menggunakan pemaparan sebelah pelayan adalah untuk mengendalikan permintaan penghalaan dan mengembalikan hasil pemaparan kepada pelanggan. Dalam fail pelayan, laluan dan pengendali yang sepadan perlu ditakrifkan. 🎜🎜rrreee
🎜Mulakan pelayan🎜Akhir sekali, kita perlu memulakan pelayan untuk mendengar permintaan. 🎜🎜rrreee🎜3. Pengoptimuman SEO🎜🎜🎜Pengoptimuman SEO Asas🎜Atas dasar menggunakan pemaparan sebelah pelayan, kami juga boleh mengambil beberapa langkah tambahan untuk mengoptimumkan lagi kesan SEO. 🎜🎜Tetapkan tag meta dengan sewajarnya: Dengan menambahkan tag meta pada halaman, termasuk penerangan, tajuk dan maklumat meta lain, anda boleh membantu enjin carian memahami kandungan halaman web dengan lebih baik. 🎜🎜Buat URL mesra: Gunakan struktur URL yang bermakna, beri perhatian kepada penggunaan kata kunci dan perkataan deskriptif, supaya enjin carian dan pengguna dapat memahami kandungan halaman dengan lebih baik. 🎜🎜Gunakan teknologi prapemarahan 🎜 Prapemarahan bermaksud prapemarahan halaman statik semasa proses binaan dan menyimpannya ke pelayan. Kaedah ini menggunakan kuasa pengkomputeran pelayan untuk menjana halaman statik dan terus mengembalikannya kepada klien apabila diakses, meningkatkan kelajuan pemuatan skrin pertama. 🎜🎜🎜Dalam fail vue.config.js projek Vue, tambahkan konfigurasi berikut: 🎜rrreee🎜Apabila menjalankan npm run build, proses binaan Vue akan diteruskan Pra-paparan secara automatik dan simpan halaman pra-paparan ke pelayan. 🎜🎜Kesimpulan: 🎜Dengan menggunakan Vue untuk pemaparan sebelah pelayan dan mengambil satu siri langkah pengoptimuman SEO, anda boleh mencapai kesan SEO yang lebih baik, meningkatkan kedudukan tapak web dalam enjin carian dan juga menambah baik pengalaman pengguna. Saya harap artikel ini dapat membantu pembangun bahagian hadapan dan digunakan dalam projek. 🎜

Atas ialah kandungan terperinci Cara menggunakan Vue untuk pemaparan sebelah pelayan dan pengoptimuman SEO. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!