SEO要点:
1.语义化html标签,用合适的标签嵌套合适的内容,不可过分依赖div,对浏览器更友善就能更容易被抓取。
2.重要的内容html代码放在前面/左边。搜索引擎爬虫是从左往右,从上到下进行抓取的,利用布局来实现重要的代码在上面
3.重要内容要写在html架构里面,蜘蛛不会抓取js的内容,
4.尽量减少使用iframe,因为蜘蛛不会抓取iframe的内容。
5.为图片img加上alt属性,加了alt就不必加title了,避免搜索引擎认为我们恶意优化。alt能让图片没加载时都能有文字提示。
6.需要强调的地方加上title,本页面内跳转a标签内也要加title。
7.重要的地方可以保留文字,有些地方必须用图,但是蜘蛛不会爬img,这时应该设置文本,再用缩进隐藏的方法去掉文字,例如logo的优化就是这样做的。注意隐藏不能用display:none,蜘蛛不会检索display:none的内容,应用这个方法的标签一般是logo,标题等重要信息
8.尽量做到js、css、html的分离,不要在html中写样式代码。
9.注释的东西能去掉应该去掉,对搜索引擎更加友好
10.css放在头部,js放在尾部,这样不会阻塞页面渲染,让页面长时间的空白
11.减少http的请求,使页面更快加载。
12.使用本地缓存更快地访问网站,使用cdn网络,加快用户访问速度。

  • 一些公共库可以使用第三方提供的静态资源地址,(比如jquery,Normalize.css),一方面增加并发下载量,另一方面能够和其他网站共享缓存。
  • 免费的cdn网站 http://www.bootcdn.cn/

13.使用G-ZIP压缩,浏览速度更快,搜索引擎抓取信息量更大,对文本资源非常有效,对图片资源则没那么大的压缩比率
14.压缩源码和图片

  • JavaScript 文件源代码可以采用混淆压缩()的方式,css文件源代码进行普通压缩,jpg图片可以根据质量压缩为50%到70%,PNG可以用一些开源软件来压缩,比如24色变成8色,去掉一些PNG格式信息等。
  • js代码混淆压缩工具  站长工具:http://tool.chinaz.com/js.aspx
  • png格式,压缩工具 https://tinypng.com/
  • 腾讯出品的压缩工具:智图 http://zhitu.isux.us/

15.选择合适的图片格式

  • 如果图片颜色比较多就用JPG格式,如果图片颜色比较多就用JPG格式,较少就用PNG格式,透明的图片都用PNG格式,如果能够通过服务器判断浏览器支持webP格式,那就用WebP格式和SVG。
  • 其中webP格式是谷歌大力推崇的图片格式,体积比PNG小45%。关于WebP格式的具体请看https://isux.tencent.com/introduction-of-webp.html

16.合并静态资源

  • 包括CSS,Javascript和小图片,减少HTTP请求
  • 其中小图片的优化我我知道的有2种,

    • 第一种:使用css精灵图sprites(也有人称为雪碧图),将小图标全部放在一张图片上(可以使用这个网站来制作雪碧图 http://csssprites.com/),通过background-position属性来偏移图片。节省了大量的http请求。缺点当然有,需要耐心调整图片位置。
    • 第二种:使用iconfont字体,图片以字体的形式展现,注明的bootstrap框架就用到了这个技术。国内比较著名的免费开源iconfont是阿里是Iconfont(http://iconfont.cn/),可以根据自己的需求选择不同的兼容文件,低至IE6.

17.延长静态资源缓存时间,这样频繁访问网站的访客就能够更快的访问,不过这里要通过修改文件名的方式,确保在资源更新的时候,用户会拉取到最新的内容。

关键一点是头部的title,description,keyword的设置。
1.title设置不宜过长,要简短,网站的名字与相关的小内容,一般为10-20个字。不能重复
2.keywords设置10个关键词,每个词不能太长,简短且符合你网站的特点,不能重复
3.description,50个字内描述你的网站

细说title,keywords,description

1、title(网站标题)

title,就是浏览器上显示的那些内容,不仅用户能看到,也能被搜索引擎检索到(搜索引擎在抓取网页时,最先读取的就是网页标题,所以title是否正确设置极其重要。)title一般不超过80个字符,而且词语间要用英文“-”隔开,因为计算机只对英语的敏感性较高,对汉语的敏感性不高。

用法:<title>网站标题</title>

1)首页title写法,一般是“网站名称-主关键词或一句含有主关键词的描述”。小编在做优化时习惯把主关键词放最前面,网站名称放后面,因为搜索引擎给予标题最前面的词比后面的高。比如,做“招聘”这个词,就这样写“企业招聘-创业公司招聘技巧-xx招聘”。

2)栏目页title写法,一般有2种:“栏目名称-网站名称”、“栏目名称栏目关键词-网站名称”。小编建议用“栏目名称-网站名称”。而且栏目名称最好用关键词来确定,比如企业招聘栏目最好就用企业招聘,而不要起个让人无法识别的名字如企业来人,企业看看,或企业加上一些特殊符号,这种写法虽然很有个性,但会让你的网站在优化上占了下风。

3)分类列表页title写法,一般是“分类列表页名称-栏目名称-网站名称”,这个和栏目页差不多。

4)文章页title写法,一般有3种:“文章标题-网站名称”、“内容标题-栏目名称”、“内容标题-栏目名称-网站名称”。其中,“内容标题-栏目名称-网站名称”的写法最为规范,但也相对复杂,它能给用户很好的提示,让用户知道他在访问哪篇文章,并且是在哪个网站的哪个栏目下。

2、keywords(关键词)

keywords,是用户不查看源代码看不到的。主要作用是告诉搜索引擎本页内容是围绕哪些词展开的。因此keywords的每个词都要能在内容中找到相应匹配,才有利于排名。keywords一般不超过3个,每个关键词不宜过长,而且词语间要用英文“,”隔开。为什么用英文上文已经说过。而且,尽量将重要的关键字靠前放,因为靠后的关键字排名较差,除非你站有很高的权重。

小道消息称keywords曾被百度、谷歌、雅虎等搜索引擎剔除,将不会再影响搜索引擎的排序结果,小编认为设置一下总没坏处,还是有一些搜索引擎比较重视keywords标签的。

用法:<meta name=”Keywords” Content=”关键词1,关键词2,关键词3,关键词4″>

1)首页keywords写法,一般是“网站名称,主要栏目名,主要关键词”。

2)栏目页keywords写法,一般是“栏目名称,栏目关键字,栏目分类列表名称”。

3)分类列表页keywords写法,这个就比较简单了,只要将你这个栏目中的主要关键字写入即可。

4)文章页keywords写法,建议大家提取文章中的关键词,比如此文章主要是讲SEO优化的,那么关键词肯定是SEO优化,如果觉得提取关键词的能力较差,也可以选择文章中出现比较多的词来作为关键词,比如现在写的内容是关于title、keywords、description的,那此文章页关键词就是这3个。

3、description(内容摘要)

description,和上面的keywords一样,是用户不查看源代码看不到的,而且也是对于一个网页的简要内容概况。不同的是,keywords是由几个词语的组成的,而description则是完整的一句话。description一般不超过150个字符,描述内容要和页面内容相关。

用法:<meta name=”Description” Content=”你网页的简述”>

1)首页description写法,一般是将首页的标题、关键词和一些特殊栏目的内容融合到里面,写成简单的介绍。

2)栏目页description写法,一般是将栏目的标题、关键字、分类列表名称融合到里面,写成简单的介绍。

3)分类列表页description,这个就比较简单了,一般只需要把分类列表的标题、关键词融合在一起,写成简单的介绍。

4)文章页description写法,一般有2种写法,标准写法就和前面的一样,将文章标题、文章中的重要内容和关键词融合在一起,写成简单的介绍。这是最好最标准的写法。但是这样写比较麻烦,还有一种偷懒的方法,你可以在文章首段和标题中加入关键词,比如这篇文章是讲title、keywords、description的,那么在文章首段和标题中就加入这些内容,然后直接将文章首段的内容复制到description中即可。

PS:3个标签按重要性来分:title>description>keywords,大家在设置时要注意

前端页面 SEO 优化的更多相关文章

  1. web前端页面性能优化

    影响用户访问的最大部分是前端的页面.网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢?其实应该是属于功能的表现. 而我 ...

  2. web前端页面性能优化小结

    影响用户访问的最大部分是前端的页面.网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢?其实应该是属于功能的表现. 而我 ...

  3. SEO 网站页面SEO优化之页面title标题优化

    在seo优化中,标题的优化占着举足轻重的地位,无论是从用户体验的角度出发,还是从搜索引擎的排名效果出发,title标题都是页面优化最最重要的因素.笔者总结了优化title标题应该注意的六个方面: ①. ...

  4. 移动端页面SEO优化需要注意的10个要点

    如今,移动互联网已经成为互联网组成的非常重要的一个分支,如果说以前对移动页面没有很规范的优化和高质量内容评判划分标准,但现在随着各大搜索引擎发布了移动建站指南,图文并茂的描述了如何提高移动站在百度质量 ...

  5. 一张图片优化5k带来的带宽成本及其前端页面的优化方法

    上周,我参加了公司的一门课程<网站性能优化>,讲师提出了一个问题:一张图片优化后减少5K,1年内可以大概省下多少宽带成本呢?非常好奇,仔细听完讲师分析,计算出来的数据让小伙伴们都惊呆了,仅 ...

  6. web前端页面常见优化方法

    (1)减少http请求,尽量减少向服务器的请求数量 (2)避免重定向 (3)利用缓存:使用外联式引用CSS.JS,在实际应用中使用外部文件可以提高页面速度,因为JavaScript和CSS文件都能在浏 ...

  7. web页面性能优化

    web前端页面性能优化 网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢? 其实应该是属于功能的表现.并且影响用户访问 ...

  8. web前端之性能优化

    作为一个前端工作人员,而且只会写点HTML5和CSS3的“假”前端工程师,为了能更好地理解一下前端的花花世界,最近拜读了<高性能网站建设指南>一书,对作者提出的前端性能优化的14个规则获益 ...

  9. 前端SEO优化

    结构优化 1.扁平化结构,目录层次越少越好

随机推荐

  1. input输入框限制(座机,手机号码)

    记录一下 座机input输入框: <input style="width:100px;" id="tel" type="text" o ...

  2. JDBC处理事务

    一.什么是事务? 在人员管理系统中,你删除一个人员,你即需要删除人员的基本资料,也要删除和该人员相关的信息,如信箱,文章等等,这样,这些数据库操作语句就构成一个事务! 二.事务是必须满足4个条件(AC ...

  3. 《JavaWeb从入门到改行》注册时向指定邮箱发送邮件激活

    javaMail API javaMail是SUN公司提供的针对邮件的API . 两个jar包  mail.jar 和 activation.jar java mail中主要类:javax.mail. ...

  4. 一类划分关系和指数级生成函数,多项式exp的关系

    划分关系 姑且这么叫着 设满足性质 \(A\) 的集合为 \(S_A\),每个元素有标号 如果 \(S_B\) 是由若干个 \(S_A\) 组成的一个大集合 设 \(a_i\) 表示大小为 \(i\) ...

  5. 有标号的DAG计数系列问题

    传送门 II 设 \(f_i\) 表示 \(i\) 个点的答案 那么枚举至少 \(j\) 个点的出度为 \(0\) \[\sum_{j=0}^{i}(-1)^j\binom{i}{j}f_{i-j}2 ...

  6. 【SPOJ】MGLAR10 - Growing Strings

    Gene and Gina have a particular kind of farm. Instead of growing animals and vegetables, as it is us ...

  7. JS算法之八皇后问题(回溯法)

    八皇后这个经典的算法网上有很多种思路,我学习了之后自己实现了一下,现在大概说说我的思路给大家参考一下,也算记录一下,以免以后自己忘了要重新想一遍. 八皇后问题 八皇后问题,是一个古老而著名的问题,是回 ...

  8. 12 步 30 分钟,完成用户管理的 CURD 应用 (react+dva+antd)

    Getting Started https://github.com/dvajs/dva/blob/master/docs/GettingStarted.md -------------------- ...

  9. 一、ionic 图片轮播问题

    使用ion-slide可以实现图片轮播,但是如果在html中仅仅增加ion-slide是远远不够的,会出现两个问题:图片加载不出来和图片轮播至最后一个不轮播的问题 1.如何解决图片加载不出来的问题 i ...

  10. 路飞学城知识点3缓存知识点之二redis

    redis:支持的字符类型多,可以做持久化 memchache:只能存储到内存中,不能做持久化,仅支持字符串类型. 参考博客 redis安装服务端: github安装包 安装客户端: pip inst ...