SEO与前端开发中的实践

关于SEO

SEO由英文Search Engine Optimization缩写而来， 中文意译为“搜索引擎优化”。SEO是指从自然搜索结果获得网站流量的技术和过程，是在了解搜索引擎自然排名机制的基础上， 对网站进行内部及外部的调整优化， 改进网站在搜索引擎中的关键词自然排名， 获得更多流量， 从而达成网站销售及品牌建设的目标。

SEO优化点

  • 网站标题、关键字、描述
  • 网站内容优化(原创/持续更新)
  • 合理设置Robot.txt文件
  • 生成对搜索引擎友好的网站地图
  • 增加外链引用
  • 网站结构布局优化
  • 网页代码优化

网站标题、关键字、描述

对应HTML文档中head的title,meta name="keywords"和meta name="description”

  • Title

网站标题，显示在浏览器最上边的文字，也是搜索结果页每条搜索结果的标题，标题中的关键词相对keywords、description权重都要高得多。

title写法

首页:网站名称 – 主做的几个词语或简单描述
分类页:分类名 – 网站名称
内容页:内容标题 – 分类名 – 网站名称
  • Keywords

网页关键词，用户不能直接在网页中看到，主要是把网页的内容用几个简明扼要的词来反馈给搜索引擎。写法就是直接提取几个对应网页相关且主要优化的几个关键词。(3~5个)

  • Description

网页的描述，用一句完整通顺的话，对网页进行简要概括，用户在网页上看不到，但是在搜索结果页一般标题下面展现的内容就是description。

description写法

首页,分类页:根据网页主要展示的内容并穿插一些主要优化的关键词，整理成一句通顺、让用户有点击欲望的话
内容页:简介或者导语，200个字符以内

Robot.txt

robots协议（也称爬虫协议、机器人协议等），“全称是网络爬虫扫除规范“（Robots Exclusion Protocol）。经过robots协议告诉搜索引擎哪些页面能够抓取，哪些页面不能够抓取。

说明

User-agent: *
代表所有搜索引擎，后面的*号可以自定义为想要设置的搜索引擎（如Baiduspider）
Disallow：/目录名/（作用：隐藏相应目录）
allow：/目录名/（作用：允许相应目录）
Disallow: /abc
后面没有“/”表示abc目录下的所有文件（包括子目录）不被蜘蛛抓取。
Disallow: /abc/
后面有“/”表示abc目录不被蜘蛛抓取，但不包括子目录。

Robot.txt文件最后可以写上站点地图的地址，方便蜘蛛更全更快的索引你的站点。

可以通过robots-txt在线生成网站进行自动生成：https://www.seoptimer.com/robots-txt-generator

站点地图site Map

Sitemap 可方便网站管理员通知搜索引擎他们网站上有哪些可供抓取的网页。最简单的 Sitemap 形式，就是XML 文件，在其中列出网站中的网址以及关于每个网址的其他元数据（上次更新的时间、更改的频率以及相对于网站上其他网址的重要程度为何等），以便搜索引擎可以更加智能地抓取网站。

Sitemap分为三种格式：txt文本格式、xml格式、Sitemap索引格式；具体格式可以参考：https://baike.baidu.com/item/sitemap/6241567

可以通过sitemaps在线生成网站进行自动生成： https://www.xml-sitemaps.com/

外链

外链全称外部链接，需要运用互联网上在别的网站平台发布自己的网站链接，目的就是提高内页的权重。

类型包括：纯文本URL/带超链接的URL/锚文本URL(关键字加链接)

网站结构布局优化

使用扁平化结构。网站的目录层级要尽可能少，中小型网站不要超过3级。

  1. 控制首页的链接数量（网站首页的权重最高）。保证链接的有效性，爬虫通过首页的连接到达内页，如果没有有效的链接就会直接影响网站的收录数量。中小企业网站首页的链接数量应该在100个以内。链接的性质可以是页面导航、锚链。
  2. 扁平化的目录层次。尽量让Spider跳转3次就可以到达网站的任意一个内页。

image

  1. 导航SEO优化。导航可以分为主导航和父导航。导航应该使用文字，如果为了用户体验采用图片导航，则应该为图片设置必要的alt和title属性。

代码SEO优化

  • title创建唯一且准确的网页标题，使用 meta 的 keywords 元数据来提炼网页重要关键字，以及 description 元数据准确总结网页内容。
  • 使用语义化元素
正文标题要使用<h1>标记，副标题要使用<h2>。可以让“蜘蛛”知道这是很重要的内容。
使用 <em> 或 <strong> 来表示强调。
导航使用<nav>,通过使用ol、ul组成路径集合。
  • 利用 中的 alt 属性alt 属性可以在图片未成功显示时候，使用文本来代替图片的呈现，使“蜘蛛”可以抓取到这个信息。此外它还可以解决浏览器禁用图像或屏幕阅读器解析等问题。
  • a标记要加上说明（title属性）
  • 设置rel='nofollow’ 忽略跟踪如果某个a的链接不需要跟踪，那么添加 rel='nofollow’ 即可通知“蜘蛛”忽略跟踪。
  • 尽量保证 HTML 的纯粹和高质量——结构（HTML）、表现（CSS）及行为（JavaScript）三者分离。
  • 尽量少使用iframe框架。