前端与SEO

SEO相关的HTML标签
1.title

<title>页面的标题</title>,必须有的东西,非常之重要

2.keyrowds

<meta name="keywords" content="keyWord1,keyWord2"/>,定义为搜索引擎提供的关键字列表,页面的呃主关键词都可以列举在这里

3.description

<meta name="description" content="页面描述">。这一部分告诉搜索引擎当前网页的主要内容,对有些搜索引擎的排名影响不大(如百度)但是对用户体验方面还是很有用的

4.robots

<meta name="Robots" content="nofollow"/>,告诉搜索引擎哪些页面需要索引,哪些页面则不需要,它对页面上的所有标签生效,包括站内站外。比如nofollow属性,如果在a标签上加上了nofollow,如<a rel="external nofollow" href="">锚文本</a>,搜索引擎将不会抓取这个连接,这样可以防止权重分散到一些无关页面。
content中的参数可以设定为all,none,index,noindex,follow,nofollow,默认为all。

5。H1

<h1>标题</h1>,告诉搜索引擎一段文字的标题,h1标题的权重较大,而h2、h3、h4对搜索引擎没有多大价值,加上可以增加用户体验

6.alt和title

尽量在img标签中加入alt属性如<img src="" alt="这里加上关键词"/>,alt会影响搜索排名
而a标签中的title也是一样,虽然效果微弱

7.语义化HTML

HTML5中新增了很多语义化的HTML5元素,如<header>,<section>,<footer>,<article>,<aside>,<nav>等等,这些语义化元素能帮助搜索引擎快速过滤掉不重要的信息,而从中快速提取出网页的主题内容,同时语义化的HTML也能够有较强的可访问性
8.网站布局要做到样式与页面分离,删除页面中不必要的标签和元素。 
9.所有的CSS、JS都要使用外部调用。 
10.外部调用的JS文件的代码能放在底部的尽量放在底部,页面调用的css文件的代码尽量都放在head内,同一页面尽量不要超过3个JS外部调用。 
11.每个页要只能出现一次H1标签,H2~H6标签可以多次,这样做是为了加重H1标签的权重。
12.网站一定要兼容脑残的IE各版本和FF等主流浏览器,这个虽然感觉对SEO影响不大,但是作为前端,这也是最基本的吧。 
13.网站结构呈扁平状树型,目录结构不宜过深,每个页面离首页最多点击3次,过深不利于搜索引擎的抓取。 
14做好404页面,并测试其返回状态码为404。 

15.对搜索引擎不友好的示例

    • 网页中大量采用图片或者Flash等富媒体形式,没有可以检索的文本信息
    • 网页没有标题,或者标题中不包含有效关键字
    • 正文中有效关键词比较少(小于文章的2%~8%)
    • 网站导航系统让搜索引擎看不懂
    • 大量动态网页让搜索引擎无法检索
    • 没有被其他已经被搜索引擎收录的网站所链接
    • 网站中充值大量欺骗搜索引擎的垃圾信息,如过渡页,桥页、颜色与背景色相同的文字
    • 网站中缺少原创内容,完全照搬别人的内容9
原文地址:https://www.cnblogs.com/boonook/p/8524934.html