What if a page written with VUE is not good for SEO? Another way to implement VUE single-page application SEO
May 30, 2021 Article blog
Table of contents
2. 2. Global introduction of vue-meta-info
3. 3. MetaInfo is used statically within the component
4. 4. If your title or meta is asynchronously loaded, you may need to use it this way
- vue-meta-info Official address: vue-meta-info
(Setting up vue single-page meta info information that, if a single-page SEO is required, can form a better fit with prerender-spa-plugin) single-page apps shine on the front end. T he three frameworks, Angular, Vue, and React, are well known to women and children. W ith the popularity of single-page applications, it seems inevitable that people will have to deal with the needs of SEO while experiencing the perfect user experience and great development efficiency. T his article focuses on vue 2.0 single-page Meta SEO optimization: In fact, solving SEO problems doesn't have to be handled with service-side rendering, which is not so friendly for novices new to vue, although there are official SSR Chinese documentation. B ut it's a challenge for a developed vue project to pick up SSRs, both in terms of effort and technology. But how can these be hard to get great front-end programmers!
If you are investigating server-side rendering (SSR) that is only used to improve the SEO of a few marketing pages (e.g. /, /about, /contact, etc.), you may need to pre-render. I nstead of using a web server to compile HTML dynamically in real time, you use pre-rendering to simply generate static HTML files for a specific route at build time. T he advantage is that it's easier to set up pre-rendering and you can use your front end as a completely static site. I f you use webpack, you can easily add pre-rendering using prerender-spa-plugin. I t has been extensively tested by Vue applications. Pre-rendering provides another possibility for SEO, which simply means that when a vue-cli-built project makes
npm run buildthe corresponding html file is dynamically rendered according to the level of routing.
// webpack.conf.js
var path = require('path')
var PrerenderSpaPlugin = require('prerender-spa-plugin')
module.exports = {
// ...
plugins: [
new PrerenderSpaPlugin(
// 编译后的html需要存放的路径
path.join(__dirname, '../dist'),
// 列出哪些路由需要预渲染
[ '/', '/about', '/contact' ]
)
]
}Eventually, a directory structure like this is generated
The contents are rendered as static html files
Compared to the previous possible only
<html>
<head>
<meta charset="utf-8">
<title>tangeche-pc</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="/app.js"></script></body>
</html>
Can be intuitively discovered, pre-rendered role. W
ith pre-rendering, we can solve many SEO problems, but sometimes we also need changes in Meta information, such as
title
such as
Meta keyWords
or
link
... H
ere Amiens
vue-meta-info
A vue plug-in that dynamically sets meta information can form a better fit with
prerender-spa-plugin
if a single-page SEO is required.
vue-meta-info
is a vue 2.0-based plug-in that lets you better manage
meta
information in your app. Y
ou can set
metaInfo
directly within the component and you can automatically mount it to your page. I
f you need to automatically update your
title
meta
and more as your data changes, then this plug-in can't be more appropriate.
Of course, sometimes we may also have a headache SEO problem, so it's perfect to use this
prerender-spa-plugin
1. Installation
yarn:
yarn add vue-meta-infonpm:
npm install vue-meta-info --save
2. Global introduction of vue-meta-info
import Vue from 'vue'
import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)
3. MetaInfo is used statically within the component
<template>
...
</template>
<script>
export default {
metaInfo: {
title: 'My Example App', // set a title
meta: [{ // set meta
name: 'keyWords',
content: 'My Example App'
}]
link: [{ // set link
rel: 'asstes',
href: 'https://assets-cdn.github.com/'
}]
}
}
</script>
4. If your title or meta is asynchronously loaded, you may need to use it this way
<template>
...
</template>
<script>
export default {
name: 'async',
metaInfo () {
return {
title: this.pageName
}
},
data () {
return {
pageName: 'loading'
}
},
mounted () {
setTimeout(() => {
this.pageName = 'async'
}, 2000)
}
}
</script>
Writing here, you should all understand what I'm talking about as another idea for SEO,
preRender
and
metaInfo
can solve SEO problems at a certain level, with the advantage that code intrusiveness is minimal and development costs are minimal.
But there are drawbacks:
-
User uniqueness routing is not handled well: for example, there is a route is
/my-profilepre-rendering may not be very useful, because this content page is based on user information changes, so the page content is not uniquely determined. You may use a routing path like this/users/:username/profilebut this is not appropriate. - Documents that change frequently
- Thousands of routing files need to be pre-rendered: This may cause you to compile time: Well, maybe you'll compile for a long time
Author: Wang Wei
Original: https://muwoo.github.io/pager5/