Rumah >hujung hadapan web >tutorial js >Amalan pemaparan bahagian pelayan bertindak balas: cara meningkatkan kesan SEO bagi aplikasi bahagian hadapan

Amalan pemaparan bahagian pelayan bertindak balas: cara meningkatkan kesan SEO bagi aplikasi bahagian hadapan

王林asal: 2023-09-26 09:30:261124semak imbas

Amalan pemaparan bahagian pelayan bertindak balas: Cara meningkatkan kesan SEO aplikasi bahagian hadapan

Ikhtisar:
Dengan perkembangan pesat teknologi bahagian hadapan, semakin banyak tapak web dan aplikasi menggunakan React sebagai bahagian hadapan rangka kerja. Walau bagaimanapun, disebabkan oleh ciri-ciri React, enjin carian mempunyai kesukaran tertentu dalam mengindeks dan menghuraikan kandungannya. Untuk meningkatkan kesan pengoptimuman enjin carian (SEO) tapak web, pemaparan sisi pelayan (SSR) telah menjadi penyelesaian penting.

Artikel ini akan memperkenalkan amalan menggunakan React untuk pemaparan bahagian pelayan dan memberikan contoh kod khusus untuk membantu pembangun meningkatkan kesan SEO bagi aplikasi bahagian hadapan.

1. Kelebihan pemaparan bahagian pelayan

1.1 Memperbaik kesan SEO:
Perenderan bahagian pelayan boleh membolehkan enjin carian menghuraikan dan merangkak kandungan tapak web dengan lebih baik, serta meningkatkan kedudukan dan pendedahan tapak web. Berbanding dengan pemaparan sisi pelanggan tradisional (CSR), pemaparan sebelah pelayan boleh memaparkan sepenuhnya struktur dan kandungan halaman pada lawatan pertama, mengurangkan kesukaran perangkak enjin carian untuk menghuraikan kandungan halaman.

1.2 Tingkatkan kelajuan pemuatan skrin pertama:
Memandangkan pemaparan sebelah pelayan boleh menjana kandungan halaman lengkap terlebih dahulu, pengguna boleh terus mendapatkan halaman yang diberikan apabila mereka melawat buat kali pertama, mengurangkan keperluan untuk memuat turun dan menghuraikan fail JS terlebih dahulu semasa pemaparan sisi pelanggan Proses ini meningkatkan kelajuan pemuatan skrin pertama tapak web dan meningkatkan pengalaman pengguna.

2. Amalan pemaparan bahagian pelayan

2.1 Menggunakan React.js
React.js ialah rangka kerja bahagian hadapan yang sangat baik dengan ciri-ciri pembahagian dan DOM maya yang cekap, dan sesuai untuk pemaparan bahagian pelayan. Apabila menggunakan React.js untuk pemaparan bahagian pelayan, terdapat dua konsep teras untuk difahami: Komponen React dan penghalaan bahagian pelayan.

2.1.1 Komponen React
Komponen React ialah unit paling asas untuk membina antara muka pengguna Anda boleh membina pelbagai bahagian halaman dengan menentukan komponen. Apabila membuat pada bahagian pelayan, anda perlu memastikan bahawa semua komponen React boleh dijalankan dalam kedua-dua persekitaran sisi pelayan dan sisi klien.

Sebagai contoh, kita boleh mentakrifkan komponen React yang mudah:

import React from 'react';

class Hello extends React.Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

export default Hello;

2.1.2 Penghalaan bahagian pelayan
Penyebaran bahagian pelayan perlu memaparkan kandungan halaman yang berbeza mengikut laluan akses yang berbeza, jadi penghalaan bahagian pelayan perlu digunakan untuk mengendalikan permintaan. Dalam React, anda boleh menggunakan react-router sebagai perpustakaan penghalaan sebelah pelayan.

Sebagai contoh, kami boleh mentakrifkan laluan sebelah pelayan yang mudah:

import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter, matchPath } from 'react-router-dom';
import App from './App';

function renderApp(req, res) {
  const context = {};

  const content = renderToString(
    <StaticRouter location={req.url} context={context}>
      <App />
    </StaticRouter>
  );

  res.send(`
    <!DOCTYPE html>
    <html>
      <head>
        <title>My App</title>
      </head>
      <body>
        <div id="root">${content}</div>
        <script src="bundle.js"></script>
      </body>
    </html>
  `);
}

export default renderApp;

2.2 Optimumkan kesan SEO

2.2.1 Hasilkan halaman statik
Selain menyediakan kandungan HTML yang lengkap semasa membuat persembahan di bahagian pelayan, kami juga boleh memaparkan keputusan pelayan Simpan ia sebagai fail statik untuk rangkak terus oleh perangkak enjin carian. Dengan cara ini, enjin carian boleh menghuraikan dan mengindeks kandungan halaman dengan lebih mudah dan meningkatkan kesan SEO.

Sebagai contoh, kami boleh menggunakan express.js untuk menjana halaman statik:

import fs from 'fs';
import express from 'express';
import renderApp from './renderApp';

const app = express();

app.get('/', (req, res) => {
  const content = renderApp(req, res);
  fs.writeFileSync('index.html', content);
  res.send(content);
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

2.2.2 Optimumkan maklumat Meta
Maklumat meta sangat penting untuk SEO, dan anda boleh meningkatkan kesan SEO tapak web dengan menetapkan tag Meta untuk berbeza muka surat. Dalam React, anda boleh menggunakan perpustakaan react-helmet untuk mengubah suai maklumat Meta setiap halaman secara dinamik.

Sebagai contoh, kita boleh mentakrifkan komponen Meta mudah:

import React from 'react';
import { Helmet } from 'react-helmet';

class Meta extends React.Component {
  render() {
    return (
      <Helmet>
        <title>{this.props.title}</title>
        <meta name="description" content={this.props.description} />
      </Helmet>
    );
  }
}

export default Meta;

Kemudian gunakan komponen ini dalam halaman untuk menetapkan maklumat Meta:

import React from 'react';
import Meta from './Meta';

class Home extends React.Component {
  render() {
    return (
      <div>
        <Meta title="首页" description="这是我的首页" />
        {/* 页面内容 */}
      </div>
    );
  }
}

export default Home;

Ringkasan:
Melalui pemaparan sebelah pelayan, kita boleh meningkatkan kesan SEO bahagian hadapan aplikasi. Artikel ini memperkenalkan amalan menggunakan React untuk pemaparan bahagian pelayan dan memberikan contoh kod khusus saya harap ia akan membantu pembangun dalam meningkatkan kesan SEO bagi aplikasi bahagian hadapan. Sudah tentu, pemaparan sebelah pelayan adalah topik yang rumit, dan terdapat banyak kaedah pengoptimuman dan pertimbangan lain untuk dipertimbangkan.

Atas ialah kandungan terperinci Amalan pemaparan bahagian pelayan bertindak balas: cara meningkatkan kesan SEO bagi aplikasi bahagian hadapan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html 前端框架 express JS dom 搜索引擎 SEO router

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Cara menggunakan React dan Redux untuk melaksanakan pengurusan data bahagian hadapan yang kompleksArtikel seterusnya：Cara menggunakan React dan Redux untuk melaksanakan pengurusan data bahagian hadapan yang kompleks

Artikel berkaitan

Lihat lagi