SoFunction
Updated on 2025-04-07

Vue pre-render: prerender-spa-plugin generates static HTML and vue-meta-info update meta

Vue pre-render: prerender-spa-plugin generates static HTML and vue-meta-info update meta

Updated: October 19, 2024 10:23:25 Author: jywud
In this article, the combination of prerender-spa-plugin and vue-meta-info plug-ins provides solutions to SEO problems. Prerender-spa-plugin generates static HTML through prerendering technology, while vue-meta-info can dynamically manage page metadata. This article will explore how to use these two tools to optimize the SEO performance of the project, including installation, configuration and precautions.

In the wave of front-end development, it has won the favor of developers with its lightweight, easy to use and efficient features. However, the shortcomings of single-page applications (SPA) in SEO have always been a challenge that developers need to face. In order to optimize SEO, prerender-spa-plugin and vue-meta-info are the leaders in this field. This article will explore in-depth how the two work together to improve the SEO capabilities of the project.

prerender-spa-plugin: Cracking SEO problems in SPA

What is prerender-spa-plugin?

prerender-spa-plugin is a Webpack plugin for projects that is able to generate static HTML files for specified routes at build time. These files contain the complete HTML structure of the page, allowing search engine crawlers to directly capture the content of the page, thereby greatly improving the SEO effect.

How to install and configure?

  1. Install plug-ins：
    First, you need to install prerender-spa-plugin via npm or yarn.

    npm install prerender-spa-plugin --save-dev
# oryarn add prerender-spa-plugin --dev

  2. Configure Webpack：
    In the webpack configuration file of a Vue project (usually yes or), you need to add the prerender-spa-plugin configuration. This includes specifying the routes that require pre-rendering, configuring renderers (such as PuppeteerRenderer), etc.

    const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = ;
const path = require('path');

 = {
  configureWebpack: config => {
    if (.NODE_ENV !== 'production') return;
    (
      new PrerenderSPAPlugin({
        // Output directory of static files        staticDir: (__dirname, 'dist'),
        // List of routes that require pre-rendering        routes: ['/', '/about', '/contact'],
        // Renderer configuration        renderer: new Renderer({
          inject: { foo: 'bar' }, // Optional: variables injected into the page          headless: true, // Whether to run the browser in headless mode          renderAfterDocumentEvent: 'render-event' // The name of the event that triggers pre-rendering        })
      })
    );
  }
};

  3. Trigger rendering event：
    In Vue instancemountedIn the hook, you need to triggerrender-eventevent so that prerender-spa-plugin knows when to start rendering the page.

    new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App),
  mounted() {
    (new Event('render-event'));
  }
});

vue-meta-info: Dynamically manage page metadata

Although prerender-spa-plugin has greatly improved SEO, meta-information (such as title, keywords, and description) for each page still needs to be set manually. At this time, vue-meta-info comes in handy.

What is vue-meta-info?

vue-meta-info is a plugin that allows you to declare meta information in Vue components and implement dynamic updates in SPA. This means that you can dynamically modify metadata such as the page title, keywords, and description based on the content of the current page or the behavior of the user.

How to install and configure?

  1. Install plug-ins：
    Install vue-meta-info via npm or yarn.

    npm install vue-meta-info --save

  2. Introduce and use plug-ins：
    Introduce and use vue-meta-info in the entry file of the Vue project (such as)

    import Vue from 'vue';
import MetaInfo from 'vue-meta-info';

(MetaInfo);

  3. Define meta information in the component：
    In Vue components, you can usemetaInfoProperties to define the meta information of the component. This information will be automatically injected into HTML when the page is rendered.<head>part.

    export default {
  name: 'Home',
  metaInfo: {
    title: 'Home - My Vue Project',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'This is the homepage of the Vue project' },
      { name: 'keywords', content: 'Vue, SEO, prerender-spa-plugin, vue-meta-info' }
    ]
  }
};

Things to note

  1. Ensure route matching: When configuring prerender-spa-plugin, you need to make sure that the specified route exactly matches the route in Vue Router.
  2. Process asynchronous data: If the page depends on asynchronous data (such as data fetched from the API), you need to make sure that it is triggeringrender-eventBefore the event, the data has been loaded.
  3. Testing and Optimization: Be sure to conduct adequate testing before deploying to production to ensure that both pre-rendering and meta information are set as expected. At the same time, you can also make further optimization based on search engine feedback.

Summarize

By combining prerender-spa-plugin and vue-meta-info, you can greatly improve your project's SEO capabilities. prerender-spa-plugin is responsible for generating static HTML files at build time, allowing search engine crawlers to crawl the content of the page. vue-meta-info allows you to dynamically set meta information based on the content of the current page to further improve the SEO effect.

prerender-spa-plugin and vue-meta-info are two major tools for optimizing SEO in projects. By using both reasonably, you can make your Vue project stand out in search engines and attract more traffic and users.

This is the article about Vue pre-rendering: prerender-spa-plugin generates static HTML and vue-meta-info update meta. This is the end of this article. For more related Vue pre-rendering: prerender-spa-plugin and vue-meta-info content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!

  • Vue
  • Pre-rendering
  • prerender-spa-plugin
  • vue-meta-info

Related Articles

  • +element-ui instance of dynamic configuration menu

    Today, the editor will share with you an example of +element-ui dynamic configuration menu, which has good reference value and hope it will be helpful to everyone. Let's take a look with the editor
    2018-09-09

  • How to use Sass in vite project

    Vite integrates support for Sass by default. You only need to install Sass itself. This article mainly introduces how to use Sass in the vite project. Friends who need it can refer to it.
    2024-04-04

  • Vue2 template command element binding event execution order analysis

    This article mainly introduces the analysis of the execution sequence of Vue2 template instruction element binding event. Friends in need can refer to it for reference. I hope it can be helpful. I wish you more progress and get promoted as soon as possible to get a salary increase as soon as possible.
    2022-08-08

  • Detailed explanation of the scheduler function and usage of vue3 scheduler

    Scheduler is a very important feature in the vue3 responsive system. Schedulability refers to the ability to determine the timing, number and method of the side effect function execution when the trigger action triggers the side effect function to be re-execute. This article introduces to you through code examples what the scheduler is, what functions it has, and how it is used. Interested students can learn from it.
    2023-06-06

  • How to implement the element-ui table component using render attribute

    This article mainly introduces how the element-ui table component is implemented using the render attribute. The example code is introduced in this article in detail, which has certain reference learning value for everyone's learning or work. Friends who need it, please learn with the editor below.
    2019-11-11

  • The way to cache cookies in vue is super simple

    This article mainly introduces the way cookies cache values ​​in vue, which is super simple! It has good reference value, and I hope it will be helpful to everyone. If there are any mistakes or no complete considerations, I hope you will be very grateful for your advice
    2022-08-08

  • How to develop uniapp using vscode

    This article will share with you some configurations I developed using vscode. These include uniapp component syntax prompts, uniapp code prompts, and automatic code formatting issues. Friends who are interested in the relevant knowledge of VScode development of uniapps will take a look.
    2021-08-08

  • vue router-link default a tag removal implementation

    This article mainly introduces the implementation of vue router-link default a tag removal operation, which has good reference value and hopes to be helpful to everyone. Let's take a look with the editor
    2020-11-11

  • Vue+Element Customized Vertical Table Header Tutorial

    This article mainly introduces the Vue+Element custom vertical table header tutorial, which is of good reference value and hopes it will be helpful to everyone. Let's take a look with the editor
    2020-10-10

  • vue implements dynamic addition and removal of components in the same interface

    This article mainly introduces the dynamic addition and deletion of components in the same interface by vue implementation. This article introduces you very detailed through the example code, which has certain reference value for your study or work. Friends who need it can refer to it.
    2020-06-06

Latest Comments