Vue を使用してユニバーサル SSR と SEO の最適化を実装するにはどうすればよいですか?-Vue.js-php.cn

ホームページ

ウェブフロントエンド

Vue.js

Vue を使用してユニバーサル SSR と SEO の最適化を実装するにはどうすればよいですか?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 27, 2023 am 11:00 AM

vue seo ssr

随着前端技术的发展和应用越来越广泛，用户对于Web页面的交互和性能有着越来越高的要求。在这样的背景下，Vue作为一种受欢迎的前端框架，早已成为众多开发者眼中的热门选择。同时，随着搜索引擎优化（SEO）越来越受到企业和网站拥有者的重视，如何使用Vue实现通用SSR和SEO优化已成为一个重要议题。本文将介绍如何使用Vue实现通用SSR和SEO优化。

一、什么是通用SSR?

首先，了解一下通用SSR是什么。SSR，即服务器端渲染（Server-side rendering），它是一种将服务端直接生成HTML文件并返回给客户端的技术。简单来说，SSR就是通过服务端去渲染网页，然后将渲染好的结果返回给浏览器端，这样可以提高页面加载速度和搜索引擎的可访问性。

而通用SSR是指使用同一套代码既能运行在服务器端，生成HTML文件返回客户端，又能在浏览器端运行，实现SPA（Single-page Application）所具有的交互性、速度和美观性。通用SSR在实现上相对比较复杂，但可以解决传统SSR的一些局限性，兼顾用户体验和开发调试。

二、如何使用Vue实现通用SSR？

Vue官网提供了一个基于Webpack的SSR模板工程，可以快速上手使用。下面我们来一步步介绍如何使用Vue实现通用SSR。

1、创建项目

首先，我们需要安装Vue CLI，并使用命令行创建一个新项目：

vue create my-project

ログイン後にコピー

2、安装和配置SSR插件

在项目根目录下，我们需要安装两个插件，分别是vue-server-renderer和webpack-node-externals，可以使用以下命令进行安装：

npm install vue-server-renderer webpack-node-externals --save

ログイン後にコピー

安装好后，在项目的package.json文件中可以看到这两个插件的依赖。

然后我们需要在项目中创建一个新的文件夹src/entry-server.js和src/entry-client.js，分别用来作为服务端和客户端的入口脚本。随后需要在vue.config.js配置文件中添加如下代码：

const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
const nodeExternals = require('webpack-node-externals')

const TARGET_NODE = process.env.WEBPACK_TARGET === 'node'
const target = TARGET_NODE ? 'server' : 'client'

module.exports = {
  css: {
    extract: false
  },
  outputDir: './dist/' + target,
  configureWebpack: () => ({
    entry: `./src/entry-${target}.js`,
    devtool: 'source-map',
    target: TARGET_NODE ? 'node' : 'web',
    node: TARGET_NODE ? undefined : false,
    output: {
      libraryTarget: TARGET_NODE ? 'commonjs2' : undefined
    },
    optimization: {
      splitChunks: TARGET_NODE ? false : undefined
    },
    externals: TARGET_NODE ? nodeExternals({
      allowlist: [/.css$/]
    }) : undefined,
    plugins: [
      TARGET_NODE ? new VueSSRServerPlugin() : new VueSSRClientPlugin()
    ]
  }),
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        options.optimizeSSR = false
        return options
      })
  }
}

ログイン後にコピー

然后，在服务器端入口文件entry-server.js中添加如下代码：

import { createApp } from './app'

export default context => {
  return new Promise((resolve, reject) => {
    const { app, router, store } = createApp()

    router.push(context.url)

    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents()

      if (!matchedComponents.length) {
        return reject({ code: 404 })
      }

      Promise.all(matchedComponents.map(Component => {
        if (Component.asyncData) {
          return Component.asyncData({
            store,
            route: router.currentRoute
          })
        }
      })).then(() => {
        context.state = store.state

        resolve(app)
      }).catch(reject)
    }, reject)
  })
}

ログイン後にコピー

在客户端入口文件entry-client.js中添加如下代码：

import { createApp } from './app'

const { app, router, store } = createApp()

router.onReady(() => {
  if (window.__INITIAL_STATE__) {
    store.replaceState(window.__INITIAL_STATE__)
  }

  app.$mount('#app')
})

ログイン後にコピー

此外，我们还需要创建一个src/app.js文件，包含Vue实例创建、路由、状态管理等代码，具体如下：

import Vue from 'vue'
import App from './App.vue'
import { createRouter } from './router'
import { createStore } from './store'

Vue.config.productionTip = false

export function createApp() {
  const router = createRouter()
  const store = createStore()

  const app = new Vue({
    router,
    store,
    render: h => h(App)
  })

  return { app, router, store }
}

ログイン後にコピー

最后，在public/index.html中添加<div id="app"></div>标签作为Vue实例挂载的目标。

3、启动开发环境

在完成以上配置后，我们可以通过以下命令启动开发环境：

npm run serve

ログイン後にコピー

4、构建并启动生产环境

在开发完成后，我们需要对项目进行构建，并启动生产环境。构建命令：

npm run build

ログイン後にコピー

启动生产环境命令：

npm run start

ログイン後にコピー

启动生产环境后，可以在浏览器中输入http://localhost:端口号/进行访问。此时，我们就成功地使用Vue实现了通用SSR。

三、如何进行SEO优化？

在使用Vue实现通用SSR后，要想实现SEO优化，需要注意以下几点。

1、为页面添加Meta标签

Meta标签对于SEO优化是非常重要的。在当前网页即将被搜索引擎抓取时，搜索引擎会读取Meta标签中的信息，并根据这些信息来判断关键词、网页描述、页面语言等内容。在Vue中，我们可以通过在服务端渲染时添加Meta标签来进行优化。

以添加网页标题为例，我们可以在entry-server.js中添加如下代码：

context.title = '页面标题'

ログイン後にコピー

而在网页模板中，可以使用Vue的模板语法来动态设置Meta标签，例如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>{{ title }}</title>
  <meta name="keywords" content="{{ keywords }}">
  <meta name="description" content="{{ description }}">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <div id="app">{{ APP }}</div>
  <script src="{{ shasum }}/js/vendor.js"></script>
  <script src="{{ shasum }}/js/app.js"></script>
</body>
</html>

ログイン後にコピー

2、使用预渲染，生成静态HTML文件

预渲染是指在开发阶段，将需要进行SEO优化的页面提前生成静态HTML文件，并在生产环境中使用这些静态HTML文件，而不是每次请求都需要从服务器端重新生成。

我们可以使用插件例如prerender-spa-plugin来进行预渲染。在Vue中，我们可以通过在vue.config.js中添加如下代码来配置prerender-spa-plugin：

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

module.exports = {
  // ...其他配置
  configureWebpack: config => {
    if (process.env.NODE_ENV !== 'production') return

    return {
      plugins: [
        new PrerenderSPAPlugin({
          staticDir: path.join(__dirname, 'dist'),
          routes: ['/route1', '/route2', '/route3'],
          renderer: new Renderer({
            renderAfterDocumentEvent: 'render-event'
          })
        })
      ]
    }
  }
}

ログイン後にコピー

其中，staticDir属性为静态文件存放路径，routes属性是需要生成静态文件的路由，renderAfterDocumentEvent属性是页面内容渲染完成后，触发的事件名称。

3、使用Schema.org标记

Schema.org是一个以描述数据为主要目标的、由搜索引擎联盟所维护的标准。通过使用Schema.org标记，我们可以向搜索引擎提供更加详细的页面描述和结构化数据，有利于提升网站在搜索引擎排名中的地位。

在Vue中，可以使用vue-meta-info插件来动态设置Schema.org标记，例如：

export default {
  metaInfo() {
    return {
      meta: [
        { name: 'author', content: 'author_name' },
        { name: 'keywords', content: 'keywords1,keywords2' }
      ],
      link: [
        { rel: 'author', href: 'author_link' }
      ],
      script: [
        {
          type: 'application/ld+json',
          json: {
            '@context': 'https://schema.org',
            '@type': 'Person',
            'name': 'John Doe',
          },
        },
      ],
    }
  }
}

ログイン後にコピー

总结

在本文中，我们介绍了如何使用Vue实现通用SSR，以及如何进行SEO优化。通过使用通用SSR可以提高网站的加载速度和搜索引擎的可访问性，而通过SEO优化可以进一步提高网站在搜索引擎中的排名。为了更好地优化网站，我们需要不断地学习和实践，并不断调整自己的优化策略。

以上がVue を使用してユニバーサル SSR と SEO の最適化を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Java チュートリアル

1653

CakePHP チュートリアル

1413

Laravel チュートリアル

1305

PHP チュートリアル

1251

C# チュートリアル

1224

Related knowledge

VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。

VUEのボタンに関数を追加する方法 Apr 08, 2025 am 08:51 AM

HTMLテンプレートのボタンをメソッドにバインドすることにより、VUEボタンに関数を追加できます。 VUEインスタンスでメソッドを定義し、関数ロジックを書き込みます。

VueでWatchの使用方法 Apr 07, 2025 pm 11:36 PM

Vue.jsの監視オプションにより、開発者は特定のデータの変更をリッスンできます。データが変更されたら、Watchはコールバック関数をトリガーして更新ビューまたはその他のタスクを実行します。その構成オプションには、すぐにコールバックを実行するかどうかを指定する即時と、オブジェクトまたは配列の変更を再帰的に聴くかどうかを指定するDEEPが含まれます。

Vue Multi-Page開発とはどういう意味ですか？ Apr 07, 2025 pm 11:57 PM

VUEマルチページ開発は、VUE.JSフレームワークを使用してアプリケーションを構築する方法です。アプリケーションは別々のページに分割されます。コードメンテナンス：アプリケーションを複数のページに分割すると、コードの管理とメンテナンスが容易になります。モジュール性：各ページは、簡単に再利用および交換するための別のモジュールとして使用できます。簡単なルーティング：ページ間のナビゲーションは、単純なルーティング構成を介して管理できます。 SEOの最適化：各ページには独自のURLがあり、SEOに役立ちます。

Vueによる前のページに戻る方法 Apr 07, 2025 pm 11:30 PM

vue.jsには、前のページに戻る4つの方法があります。$ router.go（-1）$ router.back（）outes＆lt; router-link to =＆quot;/＆quot; Component Window.history.back（）、およびメソッド選択はシーンに依存します。

vue.jsでJSファイルを参照する方法 Apr 07, 2025 pm 11:27 PM

vue.jsでJSファイルを参照するには3つの方法があります。タグ;; mounted（）ライフサイクルフックを使用した動的インポート。 Vuex State Management Libraryを介してインポートします。

VUEトラバーサルの使用方法 Apr 07, 2025 pm 11:48 PM

Vue.jsには配列とオブジェクトを通過するには3つの一般的な方法があります。V-Forディレクティブは、各要素をトラバースしてテンプレートをレンダリングするために使用されます。 V-BindディレクティブをV-Forで使用して、各要素の属性値を動的に設定できます。 .mapメソッドは、配列要素を新しい配列に変換できます。

VueのDivにジャンプする方法 Apr 08, 2025 am 09:18 AM

VUEにDIV要素をジャンプするには、VUEルーターを使用してルーターリンクコンポーネントを追加するには、2つの方法があります。 @clickイベントリスナーを追加して、これを呼び出します。$ router.push（）メソッドをジャンプします。

See all articles

Vue を使用してユニバーサル SSR と SEO の最適化を実装するにはどうすればよいですか?

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック