【seo规则优化-语义化标签-set用法】

时间：2022-12-08 22:53:31

seo规则优化-语义化标签-set用法

什么是seo

SEO（Search Engine Optimization）：汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位，获得品牌收益。很大程度上是网站经营者的一种商业行为，将自己或自己公司的排名前移。

说白了就是你的SEO做的越好，当别人搜索某个关键词时，你的网站在搜索结果中就排的越靠前。

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

SEO优化大致包含内部结构优化、内容优化、内链优化、外链优化四个方面。

内部结构优化就是 title和meta的name属性值中的 description和keyword添加关键字
内容结构优化：多使用语义化标签，不能一昧使用div
内联优化：增多站内的链接的密度，是每个页面都能息息相关
外联优化：一个且都是内容相关的，找到规律增加友链，否则相反

外联优化:
一个原则是内容相关，找到规律增加，很多人为了快速增多外部链，疯狂添加，
权重却不能上升的原因就在这里。外部链的主要的方法是增多友链，调查友链质量，
包含PR值，是否有nofollow标签，正常网站友链约30个，如果你添加朋友链网站超过50个友链，
它不会对你的网站有多少价值，相反，你可能会把你的权重分给他。
除了友链增多，论坛、新闻、博客、SNS、软文的相关链接也是增多网站外链的方法。

html 普通页面

1.合理的title，description，keywords

title，description，keywords他们的权重逐渐减小。

  • title 就是我们看到的网页标题
  • description 为对该网页的简要描述
  • keywords 的作用就是告诉搜索引擎，本网页中主要围绕着哪些方面的关键词展开
<title>cloud-Bamboo的博客</title>
<meta name="description" content='cloud-Bamboo，一名前端工程师，主要分享前端。公众号《前端工作者》'>
<meta name="keywords" content="个人博客,cloud-Bamboo,前端,技术,WEB,blog,BLOG,搭建博客,前端技术,VUE博客,cloud-Bamboo的博客">
<meta name="anthor" content="cloud-Bamboo,304833****@qq.com,《cloud-Bamboo博客》">
<meta name="robots" content="博客,前端,blog,个人博客,cloud-Bamboo,Yong,cloud-Bamboo的博客,前端工作者,公众号,web,VUE,《cloud-Bamboo博客》">
<meta name="viewport" content="width=device-width,initial-scale=1.0">

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

多使用语义化的HTML标签，什么叫语义化标签，说白了就是对号入座，不要什么地方都永远是div，span。

为了让文档结构更加清晰，HTML5增加了 < header > 、< nav>、< article>、< section>、< aside> 和 < footer> 等标签作为区块元素。

扩展：
什么是w3c规范？

  • W3C 指万维网联盟（World Wide Web Consortium）
  • W3C 创建于1994年10月
  • W3C 由 Tim Berners-Lee 创建
  • W3C 是一个会员组织
  • W3C 的工作是对 web 进行标准化
  • W3C 创建并维护 WWW 标准
  • W3C 标准被称为 W3C 推荐（W3C 规范）

语义化的作用

1.使用html语义化，能使页面结构更加清晰，便于解析。
2.有利于SEO。搜索引擎爬虫依赖于html标签来确定上下文和关键字权重。
3.在没有css样式的的情况下，页面也能正确清晰的呈现。
4.有利于各种设备解析，如盲人阅读器。
5.有利于团队开发与维护，使页面更具可读性。

语义化标签

1.< header>：用于定义文章的页眉信息。
2.< nav>：用于定义页面中的各种导航。在一个页面中可以有多个< nav>标签。常见的导航有顶部导航、侧边栏导航、页内导航等。
3.< article>：用于表示文档、页面的内容。该内容可以是一篇文章、一篇短文、一个帖子或一个评论等。
4.< section>：用于对文章内容进行分块。
5.< aside>：用于定义当前页面或当前文章的附属信息。比如广告、侧边栏、当前文章或页面的引用。
6.< main>: 主要的内容，可以出现多个，但不推荐
7.< footer>：用户定义脚注部分。包括文章的版权信息、做着授权等信息。

article是作为一个整体而存在；而section是作为整体的某一个部分存在的，且section在有标题和内容时使用；div是没有意义的，当某个内容需要使用样式情况下使用div。

<head></head>
<body>

<!-- header -->
<header></header>
<!-- header end-->

<!--nav-->
<nav></nav>
<!--nav end-->

<!-- main -->
<main>
    <article>
        <section>
            <h2></h2>
            <div></div>
        </section>
        <section>
            <h2></h2>
            <div></div>
        </section>
        <section>
            <h2></h2>
            <div></div>
        </section>
    </article>
</main>
<!-- main end-->

<!-- footer -->
<footer></footer>
<!-- footer end-->


</body>

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

< img> 标签的 alt 属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。对于非装饰性图片必须添加alt，非装饰性图片是指除了那些作为元素背景图的图片。

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

4友情链接

友链就是在你的网站和别人的网站上相互放上对方的网站超链接，通过点击链接可以调到对方的网站上。 友情链接是网站流量来源的根本，比如一种可以自动交换链接的友情链接网站（每来访一个IP，就会自动排到第一），这是一种创新的自助式友情链接互联网模式。

5.外链

外链就是指在别的网站导入自己网站的链接。导入链接对于网站优化来说是非常重要的一个过程。导入链接的质量（即导入链接所在页面的权重）间接影响了我们的网站在搜索引擎中的权重。

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

搜索引擎收录了你的网站后，会很大程度上提升网站的排名。下面是常见搜索引擎的收录入口：

百度提交入口：链接奉上

Google提交入口：链接奉上

360提交入口：链接奉上

搜狗提交入口：链接奉上

必应提交入口：链接奉上

7.重要的内容放在前面

搜索引擎抓取是自上而下进行的，把主要的关键性的内容放在前面，可以保证所抓取的内容更符合或代表网站的特征。

8.其他

  • 少用iframe：iframe中的内容是不会被抓取到的
  • 提高网站速度：这也是搜索引擎排序的一个重要指标
  • 流量：访问你的网站的人越多，排名也会越靠前

如何对VUE进行SEO优化？

与VUE的本质相关的，VUE是一个SPA应用，就是只有一个Web页面的应用，是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序。

为什么说VUE不利于SEO，SEO本质是一个服务器向另一个服务器发起请求，解析请求内容。但一般来说搜索引擎是不会去执行请求到的js的。也就是说，如果一个单页应用，html在服务器端还没有渲染部分数据数据，在浏览器才渲染出数据，而搜索引擎请求到的html是没有渲染数据的， 所以就很不利于内容被搜索引擎搜索到。

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

  • SSR服务器渲染；
  • 静态化；
  • 预渲染prerender-spa-plugin；
  • 使用Phantomjs针对爬虫做处理。

SSR服务器渲染

服务端渲染就是尽量在服务器发送到浏览器前就将页面渲染到页面上。

Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。

服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用"，因为应用程序的大部分代码都可以在服务器和客户端上运行。

详细操作可以见官网：Server-Side Rendering (SSR) | Vue.js

静态化

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

详细操作可以见官网：Nuxt - The Intuitive Vue Framework

预渲染prerender-spa-plugin

如果你只是用来改善少数页面的 SEO，那么你可能需要预渲染。无需使用 web 服务器实时动态编译 HTML，而是使用预渲染方式，在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单，并可以将你的前端作为一个完全静态的站点。

这里就详细的讲解下如何在VUE-CLI3的项目中使用prerender-spa-plugin。

使用Phantomjs针对爬虫做处理

Phantomjs是一个基于webkit内核的无头浏览器，即没有UI界面，即它就是一个浏览器，只是其内的点击、翻页等人为相关操作需要程序设计实现。

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

源码在这里：GitHub - lengziyu/vue-seo-phantomjs: vue seo phantomjs方案

为什么要用set？

在vue中，并 不是任何时候 数据都是双向绑定的。

在官方文档中，有这样一段话，如下：
由于JavaScript 的限制，Vue 不能检测 以下数组或对象的变动：

  1. 当你利用索引值直接设置一个数组项时，例如： vm.item[ indexOfItem ] = newValue
  2. 当你修改数组的长度时，例如：vm.items.length = newLength
  3. 由于 JavaScript 的限制，Vue不能检测对象属性的添加或删除

从文档得知，当数据没有被双向绑定的时候，我们就需要使用set了

set用法

解决数据没有被双向绑定我们可以使用 vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名。

this.$set(原数组, 索引值, 需要赋的值)

length的问题还需要用splice方法。

vm.items.splice(newLength)

如果我们添加的属性很多条，

可能就需要写一个循环来多次set。当然你也可能使用Object.assign，这里有一些需要注意的地方。

如果你想添加新的响应式属性，下面这样写是不行的。

Object.assign(vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

下面这样是正确的，vue中响应式对象

vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

These walls are funny. First you hate them, then you get used to them. Enough time passes, you get so you depend on them. That’s institutionalized.

*里的高墙实在是很有趣。刚入狱的时候，你痛恨周围的高墙；慢慢地，你习惯了生活在其中；最终你会发现自己不得不依靠它而生存。这就是*化。

标签：

相关文章