前端网站优化技巧：从SEO标签到语义化HTML代码的全方位指南

hwyzw 发表于 2025-2-26 00:51:02

加入【前端筱园交流群】，与大家一起交流，共同进步！

普通的一个前端网站可以通过哪些地方来做优化呢？

1.合理的title、、

 <pre><code class="language-html"><title>邓占勇的博客</title>
<meta name="description" content='邓占勇，一名前端工程师，这是我的个人博客，主要分享前端但不限于前端技术。公众号《前端校园》'>
<meta name="keywords" content="个人博客,邓占勇,前端,技术,WEB,blog,BLOG,搭建博客,前端技术,VUE博客,邓占勇的博客">
<meta name="anthor" content="邓占勇,2657179843@qq.com">
<meta name="robots" content="博客,前端,blog,个人博客,邓占勇,Yong,邓占勇的博客,《前端校园》,公众号,web,VUE">
<meta name="viewport" content="width=device-width,initial-scale=1.0"></code></pre>
title，，他们的权重逐渐减小。

2.语义化的HTML代码，符合W3C规范

使用较多语义化的 HTML 标签。所谓语义化标签，简单来说就是要做到对号入座，不能在任何地方都一直使用 div 和 span。在 HTML5 中，提供了很多语义化的标签，例如、nav、、等。

3.非装饰性图片必须加alt

标签的 alt 属性规定了替代文本。此替代文本在图像无法显示时会被显示出来，或者当用户禁用图像显示时也会显示。它会代替图像显示在浏览器中。对于非装饰性图片，必须添加 alt。非装饰性图片指的是除了那些作为元素背景图的图片之外的图片。

alt可以增强内容相关性，提高关键词密度

4友情链接

友链是在你的网站与别人的网站上相互放置对方的网站超链接，通过点击这些链接能够调到对方的网站。友情链接是网站流量来源的基础。有一种友情链接网站可以自动交换链接，每来访一个 IP 就会自动排到第一，这是一种创新的自助式友情链接互联网模式。

5.外链

外链指的是其他网站导入自己网站的链接。导入链接对于网站优化而言是一个极为重要的过程。导入链接的质量，也就是导入链接所在页面的权重，会间接对我们的网站在搜索引擎中的权重产生影响。

6.向各大搜索引擎提交收录自己的站点

搜索引擎将你的网站收录之后，会在很大程度上使网站的排名得以提升。以下是常见搜索引擎的收录入口：

百度提交入口：

提交入口：

360提交入口：

搜狗提交入口：

必应提交入口：

7.重要的内容放在前面

搜索引擎抓取是自上而下进行的。将主要的关键性内容放在前面，这样就能保证所抓取的内容更符合网站的特征，也能更代表网站的特征。

8.其他

如何对VUE进行SEO优化？

说了这么多关于 SEO 的优化方式，为何还要单独把 VUE 的 SEO 优化提出来讲呢？

这和 VUE 的本质有联系。VUE 是一种 SPA 应用，也就是仅包含一个 Web 页面的应用。它是加载单个 HTML 页面的，并且在用户与应用程序进行交互时，会对该页面进行动态更新的 Web 应用程序。

为什么说 VUE 不利于 SEO 呢？SEO 的本质是一个服务器向另一个服务器发起请求，并且对请求内容进行解析。然而，一般情况下，搜索引擎是不会去执行请求到的的。如果一个单页应用，在服务器端 html 尚未渲染部分数据，而是在浏览器端才渲染出数据。而搜索引擎请求到的 html 是没有渲染数据的。所以这种情况很不利于内容被搜索引擎搜索到。

现在主要采用的有以下四种方式：

1.SSR服务器渲染

服务器发送到浏览器之前，服务端渲染会尽量将页面渲染到页面上。

Vue.js 是用于构建客户端应用程序的框架。在默认情形下，能够在浏览器中输出 Vue 组件，以此来生成 DOM 以及对 DOM 进行操作。不过，还可以把同一个组件渲染为服务器端的 HTML 字符串，接着把这些字符串直接发送到浏览器，最终把这些静态标记转变为客户端上完全可交互的应用程序。

Vue.js 应用程序通过服务器渲染，也可被视为“同构”或“通用”。因为其大部分代码既能在服务器上运行，也能在客户端上运行。

在官网中可以看到详细的操作：-Side (SSR) | Vue.js

2.静态化

这里使用的是 Nuxt.js 框架，其官方有这样的介绍。从头开始搭建一个服务端渲染的应用是很复杂的。幸运的是，存在一个优秀的社区项目 Nuxt.js，它让这一切变得很简单。Nuxt 是一个基于 Vue 生态的更高级的框架，能为开发服务端渲染的 Vue 应用提供极为便利的开发体验。更酷的是，你甚至可以用它来做为静态站生成器。推荐尝试。

详细操作可以见官网：Nuxt - TheVue

3.预渲染-spa-

如果你只是为了改善部分页面的 SEO，那么或许需要进行预渲染。不用通过 web 服务器实时动态编译 HTML，而是采用预渲染的方式，在构建阶段（build time）直接生成针对特定路由的静态 HTML 文件。其优点在于设置预渲染较为简单，并且能够将前端当作一个完全静态的站点。

这里详细讲解在 VUE-CLI3 的项目中使用 -spa- 的方法。具体如下：首先，要明确 VUE-CLI3 的相关配置和环境搭建；然后，找到在项目中引入 -spa- 的合适位置和方式；接着，根据 -spa- 的特性和需求，进行相应的代码编写和配置调整；最后，确保整个过程符合项目的架构和规范，以实现 -spa- 在 VUE-CLI3 项目中的有效使用。

安装

 <pre><code class="language-javascript">使用 cnpm 来安装 prerender-spa-plugin 并将其保存到项目中。</code></pre>
在 VUE-CLI3 的项目里，调整配置最为简单的办法是在 vue.js 当中的选项处提供一个对象。

官方文档：相关 | Vue CLI

 <pre><code class="language-javascript">// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
 new MyAwesomeWebpackPlugin()
]
}
}</code></pre>
https://img0.baidu.com/it/u=1617954485,887144085&fm=253&fmt=JPEG&app=138&f=PNG?w=984&h=500

如果你需要依据环境来有条件地进行行为配置，或者希望直接对配置进行修改，那么就换成一个函数，这个函数会在环境变量被设置之后进行懒执行。该方法的第一个参数会接收到已经解析好的配置。在函数内部，你既可以直接修改配置，也可以返回一个将会被合并的对象。

 <pre><code class="language-javascript">// vue.config.js
module.exports = {
configureWebpack: config => {
如果 process.env.NODE_ENV 的值为 'production' 。
 // 为生产环境修改配置...
} else {
 // 为开发环境修改配置...
}
}
}</code></pre>
有了基础知识就来开始实践

 <pre><code class="language-javascript">需要引入名为“prerender-spa-plugin”的模块，该模块被赋值给常量 PrerenderSPAPlugin
Renderer 是 PrerenderSPAPlugin 的 PuppeteerRenderer
需要使用 require 函数来引入路径模块 path 。
module.exports = {
configureWebpack: config => {
如果 process.env.NODE_ENV 不等于 'production'，就返回；
 return {
 plugins: [
 new PrerenderSPAPlugin({
 //网页包的路径将应用程序输出到prerender
staticDir 等于 path.join(__dirname, 'dist') ；即静态文件目录为 __dirname 与 'dist' 拼接后的路径；它指定了 dist 文件夹在项目中的具体位置；这个路径用于确定静态资源的存储路径；以便在应用程序中正确地访问和提供这些静态资源。
Routes 用于渲染与之对应的自己的 router。
- 字符串 '/message'。
 renderer: new Renderer({
 inject: {
 foo: 'bar'
 },
 //渲染时显示浏览器窗口。对调试有用。
 headless: false,
在 main.js 里，会发生 document.dispatchEvent(new Event('render-event'))这样的操作，并且需要让两者的事件名称相互对应起来。
renderAfterDocumentEvent 为 'render-event'
 })
 }),
 ],
 };
}
}</code></pre>
在main.js中添加如下内容

 <pre><code class="language-javascript">new Vue({
router,
store,
render: h => h(App),
 //这里与vue.config.js中的事件名相对应
mounted () {
文档触发了一个新的事件，这个事件是“render-event”。文档将这个事件进行了分发。
}
}).$mount('#app')</code></pre>
最后有点一定要注意，中必须是模式。

已经配置完成了。只需像传统打包方式那样进行打包。在打包过程中，会看到浏览器自动打开许多页面然后自动关闭，这就是打包的过程。

 <pre><code class="language-javascript">npm run build</code></pre>
打开打包后的 dist 文件夹，你会发现它的结构与传统的不一样，传统的结构只有以下这些内容。

现在你看到的比之前多了几个文件夹，多出来的这些文件夹就是你配置的那几个路由。每个文件夹里都有一个 index.html 文件。原本只有一个 index.html 的单页应用，如今变成了多页应用，这样就提升了你的网页被抓取的概率。

https://img2.baidu.com/it/u=1558342112,3427158199&fm=253&fmt=JPEG&app=138&f=JPEG?w=722&h=500

本地打开打包后的 index.html 无法看到内容。只有将其上传到服务器上，才能够看到内容。

我们在这里还能继续进行优化。现在已经形成了多个页面，然而，每个页面的 title 都是相同的。这通常是不符合实际情况的，因为每个页面都有其自身的主题内容。

我们可以针对每个页面，分别对它们的 meta-info 进行设置。这里能够使用 vue-meta-info 插件。

安装：

 <pre><code class="language-javascript">使用 npm 安装 vue-meta-info 并将其保存。</code></pre>
引用，在main.js中

 <pre><code class="language-javascript">从“vue-meta-info”这个库中导入 MetaInfo 。
Vue.use(MetaInfo)</code></pre>
在你需要的页面中使用

 <pre><code class="language-javascript">export default {
metaInfo:{
title: 'message',
meta: [
 {
 name: 'description',
这是一个关于 Message 的页面。
 },
 {
 name: 'keywords',
 content: 'message'
 }
]
 },
data(){
return {
}
 },
}</code></pre>
可以看到页面的head的关键信息已经更改

当然你也可以写成函数的形式来动态修改

 <pre><code class="language-javascript">export default {
metaInfo() {
return {
 title: this.title,
 meta: [
 {
 name: "关键词",
 content: "关键字"
 }
 ]
};
 },
data() {
return {
 title: "我是动态更新的标题"
};
 },
};
</code></pre>
 <pre> </pre>
4.使用针对爬虫做处理

它是一个基于内核的无头浏览器，没有 UI 界面。它本身就是一个浏览器，不过其中的点击、翻页等人为相关操作需要通过程序设计来实现。

这个我也还没有去接触，等后面我去看懂了有机会再来讲讲。

源码位于： - /vue-seo-，这是 vue 的 seo 方案。

我的网站：

页: [1]

【华网优展网】's Archiver

前端网站优化技巧：从SEO标签到语义化HTML代码的全方位指南