写文章
二叔
2019-06-23 16:22
手摸手教你,如何让谷歌给你的网站体验打100分
本篇优秀文章被收录在“平台引流的秘密”专题

web-design-user-experience.jpg


从萌新到痴汉的不归路,新手看了沉默,老手看了流泪!


 你可能做了个假网站


你也许看了很多关于网站推广的视频教程,
你也许膜拜了很多大神,
你也许参加了很多线下培训。
喊过666,叫过老师机带带我。
然而现实却是残酷的,你并没有沿着大神的足迹成为你想要成为的样子。
因为你可能选择了相信感觉,而不是科学和数据!
你可能选择了相信一篇爆文或者某个大神的高谈阔论,而不去问问自己这些理论站得住脚吗?
本期二叔将带你用科学的手段,帮你达成一个让用户满意,谷歌满意,你满意的网站。

 

网站的站内优化

 

1.!DOCTYPE html和lang="en"

 
!DOCTYPE html


它应该出现在你网页的第一行。
其实浏览器不只是用来查看html网页的,还可以查看PDF,图片,以及其它的一些文档。
如果你不设置这个标签会发生什么?
有一些老式的浏览器,会直接把网页原样输出,你网页的效果不会被渲染出来。

 

spacer.gifspacer.giflang="en"

机智的你也许已经尝试过有些网站的语音阅读功能了,虽然目前来看大部分网页阅读器的效果听起来不是很好。
但是有很大一部分人群是非常喜欢和依赖语音阅读网页内容的。
他们可能是懒人,喜欢听不喜欢看内容,可能是残障人士,有视力问题......
这个lang标签就是帮助网页阅读器,辨别你网页内容的依据。
如果你不添加这个标签,那阅读器会使用用户的默认设置。
这时候,网页阅读器就可能发生致命的失误了。同理你的用户马上就会跳出你的网页了。
为什么要重视?
随着语音革命的发展,语音阅读的能力会越来越高,同样使用网页阅读器的人也会越来越多。
也保不齐,你的用户就是语音阅读爱好者或者残障人士,
当所有人都不能很好的提供语音阅读体验的时候,你提供了,你就脱颖而出了。

 

2.meta name="viewport"

移动端的重要性就不言而喻了。
因此如果你花了很多钱和精力,却没有在你的网页代码里发现这个标签,
那你就应该陷入深深的沉思,或者拉伸一下筋骨了。
如果没有这个标签,移动设备会按照桌面设备的方式渲染页面,再缩放到移动设备的宽度。
这样你的用户体验会非常的差,用户不得不通过拉伸放大网页才能看清内容。


3.  title


Title就是网页的名字了,你如果不好好设置title会大大增加用户和搜索引擎理解你网页内容的难度。
就相当于你去单身联谊聚会,却不告诉大家你的名字。
导致任何对你感兴趣的人都不敢轻易接近你。
同理搜索引擎必须通过网页内容通过算法去努力的猜,
你的网页究竟是讲啥的,能给用户提供什么价值?
二叔还真见过页面title都没设置还被搜索引擎收录的网站。
当然最后他们没有多少排名,跳出率也高。


4.meta name="Description" content="简介"

 


如果title是名字,那么description就是网页的简介了。
相当于聚会时候的自我介绍了,如果自我介绍做的好,
那你应该能马上收获一群志同道合想跟你发生关系或间接关系的小伙伴了。
是的,一群!


5. [alt]


你的网站或许有图片,那你就不应该错过[alt]。
原理和lang="en"类似,网页阅读器目前来说还没有能阅读图片的能力。
只能通过alt尽可能的给用户更多信息。

请看腾讯网给我们的正确示范:

RYZ8RVNYWnLxEpM1n4QN3d7ZkfQdrqT5yRhGYnvc


6. hreflang 


如果你有多个站点,那么hreflang就能帮助你让搜索引擎把正确的网页收录到正确的站点,展示给正确的用户。
就好比你是个聪明伶俐的小可爱,学会了5种语言。那么你应该印5张名片!
加了这个标签,你可以给对应的用户发不同的名片。
同时你应该给每个关联的站点添加标签,A页面链接到B页面,那么B页面也应该链接回A页面。
否则搜索引擎可能会出现解析错误,甚至忽略你的标签。

请看***的正确示范:

EMVL3RDEkeLViGKCzDpgkhfVY2LGVnC42Y4UD7Vp

7. 使用合适的字体


网页的字体不应该低于12px,再低就真的看不清了,尤其是在移动端。


8. 不使用flash等插件


使用一些外部插件,你应该是非常慎重的,能不用就别用。
尤其是flash这类的会让用户在本地安装程序才能执行的插件。
第一,搜索引擎是不能获取到插件的内容。对搜索引擎优化是没有帮助的。
第二,给用户浏览网站提高了操作门槛。
第三,增加了安全隐患。

 

9. 页面返回正确的状态码

rX3eugwZxfkFJFFgInMvwNZknGX5ptydPSf0vUbB
搜索引擎能够正确识别和索引的页面状态码是2**-3**的。
如果你的页面返回的状态码是4**或5**,搜索引擎是不会收录的,甚至很快会放弃之前已经收录的页面。
那你就应该迅速解决,多半是bug或服务器出现问题了。

 

10. 链接或按钮有合适的文字描述


每个网页都或多或少有一些按钮或链接。你应该给这些链接和按钮添加有明确指向的描述。
就好比你要约人家小姑娘出去,你得告诉她,你们要去干嘛!是去唱歌,吃饭,还是其它?
你不能只是告诉人家,先出来,有好处!
是的,谷歌也知道这点。
所以你的链接或按钮不能是"click","click me","click here","tap"...
这些没有明确指向的描述。

11. 链接或按钮的尺寸


链接或按钮的尺寸应该是合适的。
(1)不能太小了
(2)周围留足够多的空间。
因为在手机端,全靠用户的手指去敲,手指的大小比鼠标的光标是大很多的。
你不能指望每个人都人手一只触控笔的。因为绝大部分人还是喜欢自己用手指去完成一些物理行为的。

 

12. 正确的robots.txt文件


每个网站都应该有robots文件,因为它可以避免搜索引擎抓取到不应该抓取的敏感信息。
但是你应该确保你网站的robots.txt是内容和格式正确的。
另外来自二叔的忠告,不要使用记事本,Word等非专业的代码编辑器来修改robots.txt。
容易造成乱码,导致搜索引擎看不懂你的robots.txt。
从而让搜索引擎陷入一个非常尴尬的窘境,这个网站的内容是抓取还是不抓取呢?
最后为你尊重你的权力,选择不抓取......


13. 正确的robots策略


你应该按你的实际情况正确的编辑robots.txt。
如果你的网页是和网页内容是想要被收录的,就不应该使用disallow
更多的内容请看这里robots.txt规则


14. 外部链接


给你的外部链接添加`rel="noopener"` 或者`rel="noreferrer"`
(1)别让别人的网站,影响你网站的性能。
如果你的外链不加以上其中一个属性,那么新打的页面和你的页面会共享同一个进程。
假设你的网站有js在不停的运行,如采集用户行为,从服务端获取数据,那么新开的网页会大大降低你网页的性能。
(2)别让别人的网站,获取你网站的信息。
冰雪聪明的你,现在已经明白了如果不加以上两个属性,新打开的页面和你的页面是共享进程的,
那么那些不怀好意且猥琐的站长是可以通过一些不为人知的手段从你那弄一些敏感的东西的。

正确的做法是这样添加你的外部链接:

<a href="https://examplepetstore.com" target="_blank" rel="noopener">...</a>

15. 请求用户物理位置


为什么要通过浏览器获取用户的物理位置呢?
有的时候我们会需要通过用户地址,动态提供网页内容。
这时候我们就需要申请获取用户地理位置的权限了。
也许你会感觉奇怪,通过网站后台,web服务器,不就可以获取用户位置了吗?
实际情况是,这些方式都没有前端通过H5 Api获取到用户位置的方式更可靠。
大家都知道调用这个API有多么好,
但是有很多网站是非常rude和不合理的,网站一打开就先来个弹窗,向你获取位置权限。
这样的做法是非常不可取,伤害用户体验的。
正确的做法是,在页面做一个按钮,
当用户需要使用定位服务的时候点击按钮,再请求获取用户地址的权限。


16. 请求网站订阅许可


网站许可订阅营销,是一种新型的许可式订阅营销方式,其转化率比传统的邮件订阅营销要高出很多倍。
二叔在这篇文章中有专门介绍。网站许可订阅营销,让你网站的转化率再翻几翻!
但是同样的问题是,大部分网站是滥用这个接口的。网页一加载出来就问别人要不要订阅。
正确的做法同样是应该把主动权交给用户,做一个按钮,让用户点击按钮后再弹出请求。

17. 自动播放视频


网页中提供自动视频播放可以极大的吸引用户注意力,从而降低跳出率。
但是你应该把声音关闭了,因为你突然播放的声音可能吓坏没有思想准备的用户。
就好比你表弟去你家做客,你悄悄的躲在门后,等他一进门,你忽然出来大吼一声:来啦,老弟!?

 

18. 使用第三方JS库


你可能会被网上很多炫酷的网页特效吸引的不要不要的,
但是二叔告诉你,在选择添加第三方js库的时候,你应该是小心谨慎的。
因为你不知道,你心仪的插件是不是安全的,你可以用杀毒软件扫描。
但同样不能保证绝对安全,稳妥的方式是你要使用行业内最优秀的第三方js库。

 

19. 图片的显示


图片的显示应该要有正确的显示比例,否则会严重印象用户使用体验。
简单的说,你不能把200*200的图片显示成300*300。
也不能把200*200的图片显示成200*300。
你可以把200*200的图片显示成100*100。

 

20. 页面控制台没有错误输出


打开页面,按F12,打开页面控制台。
如果页面控制台有错误输出,搜索引擎会认为你的网站是有bug的,不完善的,有安全隐患的。
自然会降低你的权重。
你应该第一时间解决控制台输出的错误。

 

21. 页面导航


一个网站,好导航是至关重要的。好的导航可以帮助用户快速到达他想要到达的页面。
导航不应该建立太多的层级。
导航的交互不应该太复杂。

 

22. 每个HTML标签都应该保持完整性


HTML标签大体有两种类型,一种是一对的比如

<p></p>


还有一种是只有一个独立的,比如

</br>


你应该保证每个HTML的完整性,因为有的浏览器是不支持显示不规范的破坏的HTML标签的。
因为这个问题,搜索引擎会担心你影响用户体验,从而降低你的权重。

 

 

23. 网站的静态文件都用合适的名称来命名


你应该清晰的认识到,搜索引擎它不单只是为用户提供网页的,它还可以帮用户搜索到用户想要获取的文件。
所以只要你网站内的比如,图片,PDF,视频等以合适的名称命名,那么你是有机会获取更多展示的机会的。

 

24.其它滥用js的行为


不应该用Js来完成一些并不是用户主导的行为。
比如,点击页面空白处直接跳转的支付页面。
打开页面,强制下载一个PDF给用户,也是不可以的。

 网站的体验优化进阶


1. 链接,按钮和页面的颜色关系


链接、按钮和页面颜色应该是有合适的对比度的。
如果对比度太低了,有两种现象发生。
(1)用户想点击你的按钮,但是没发现。
(2)用户不想点击你的按钮,但是点到了。
这两种现象都不是用户想要的,也不是搜索引擎想看到的。


2. 页面的颜色搭配


并没有什么颜色组合是最好的,但是有一定你应该记住
页面颜色的搭配不应该超过3种,
因为超过3种颜色,会使页面看起来花哨,
增加用户获取信息的难度。

 

3. 页面的设计逻辑


在我们着手网页设计的时候,首先要做的是确定目标。
更精准的说法是,确定用户行为的目标。详情请看二叔的另外一篇关于行为模型的文章:

学会这个教授的方法,你的网站也能赚大钱

4. 页面的设计原则


当你把目标确定以后,就应该围绕着这个目标去设计了。
也就是说所有的页面元素都应该是围绕着那一个或两个按钮、链接服务的。
因此任何不以转换目标行为,为目标的设计都是徒劳的,效率底下的。


5. 首页Banner的设计原则
图片:不能太花哨,不能妨碍用户查看文字和按钮,
能突出你的产品和服务,让用户一眼就能看出你的产品或服务是什么。
文字和按钮:颜色和背景要和banner图片有合适的区分,

不要用长句,增加用户阅读的难度。

 

6. 能素一点就尽量素一点


你想在页面添加各式各样的内容和模块,最大限度的给用户提供价值,初衷是好的。
但实际情况并不是我们想象中那样的。举个例子,像二叔忽然心血来潮,想做一下形象设计。
带个帽子,看起来很酷,留着胡子看起来成熟稳重,打个男士耳钉看起来坏坏的潮,披个头巾甚至有了些异域风情......
但是我不能把这些事情同时都做了。
因为那样会增加别人理解我的难度,甚至觉得我是不是什么时候受过什么刺激,或者先天缺失了什么同时报以同情的眼神。
网站的设计同样是一样的道理,用最少的模块去表达你最新表达的主题,那就是最好的设计。

 

7. 设置www跳转到no-www


不要在纠结到底加不加www了,如果你已经研究透了二叔写的那篇关于行为模型的文章,
你就应该明白不加www对促成用户行为是有帮助的。
因为去掉www或多或少还是可以降低用户的记忆成本的。

 

 网站的安全和速度提升进阶


 网站服务启用https


(1)前几年你还在纠结到底加不加https安全证书是情有可原的,因为加了https以后网站访问速度确实会慢很多。
但是现在所有搜索引擎都在大力提倡https,各大DNS解析服务商也提升了自己的解析质量,
加了https后访问速度并不受什么影响,你可以放心的加了。
(2)因为https的传输协议是加密了的。
为了用户数据的安全,你网站的安全,你应该义无反顾的接入https安全证书。

 网站服务提速基础


二叔再另外一篇文章里提过了,这里就不再细说了。

谷歌广告打水漂?解决这个问题可能让你的转化率翻倍!

 网站服务使用PHP7


相信大部分看到此文的小可爱都是在基于PHP,去搭建自己的独立网站的。
比如说:Wordpress,Magento....
也许你听过Java,在国内炒得很火的python等等。
但是实际情况,PHP生态圈依然是对中小型公司最友好,
WEB领域全球市场占有率最高的。
如果你还在使用PHP5.*的话,是时候升级一下你的PHP版本了,因为PHP7速度是5.*的N倍,而且更安全,功能更多。
但是在升级前,你要做好升级程序的准备,因为在PHP7里一些过时的函数可能不再支持了。

 网站服务器开启opcache


opcache是PHP生态圈里一个强悍的插件,能让你的网站应用提升若干倍的运行效率。
对程序员来说只是需要安装或者开启一下,你的网站打开速度就能快几倍。你值得拥有!

 网站服务启用http2


http2已经不是未来了,是每个网站应该有的基本功能。
http2是一种比http1功能更多,效率更高的传输协议。
就是说,启用了http2的网站访问速度会比没有启用的快很多。
前几年可能有的浏览器兼容性不好,但是现在的主流浏览器都很好的兼容了。
如果你的网站服务国外客户比较多,那更不用担心兼容性的问题。
国外权威网站,或者营销意识强的网站都启用了http2。
而且部署同样不是很复杂,一般的web服务器(nginx,apache,iis)都支持,你只要启用就行了。
据维基百科的数据,全球已经有36.5%的网站部署了http2了。
你还在等什么呢?


 真金需要火炼


 通过网页控制台查看网页是否启用gzip


(1)使用谷歌浏览器打开网页,按F12打开浏览器调试控制台
(2)选择network选项卡,如果选项卡下方列表内没有内容,按F5刷新一下页面。
(3)点击列表内任意文件,在右边栏里你可以看到:content-encoding:gzip
恭喜你,你的网站启用了gzip压缩。

YSbpUO3Om4dCiB0Yh7UbaMbZwXGCK3B96zkm57U1
但是你不应该骄傲,你应该尝试多点击几个类型的文件,看看是不是都压缩了。

 

 使用“HTTP/2 and SPDY indicator”测试网站是否启用http2


“HTTP/2 and SPDY indicator”是谷歌浏览器的一个插件,你把它装上并开启后,打开任意网站。
只要网站启用了http2,那么它的颜色将变成蓝色,否则便是灰色。

dP3MxtvoYf3cIb5Livgn9FFMOasOCpfYKk6OTlHM

我们平时怎么测试网站速度和调试网站?


当你一遍遍在你的电脑上刷你的网站,想测试一下你网站的速度,看着网站加载速度越来越快。
是不是很开心,很自豪?
但是可爱的你,被浏览器欺骗了,因为浏览器都是有缓存机制的,
你一遍遍的刷其实很多内容都是从缓存里加载的。
因此正确的做法是,在你修改完网站后,清空一下网站的缓存(CTRL+SHIFT+DEL),再打开你的网站。
有的时候我们需要不断修改和调试网站,那我们每次都要先执行(CTRL+SHIFT+DEL),再打开网站,是不是很繁琐?
但是宠你的二叔会告诉你,生活可以更美好一点的。
(1)使用谷歌浏览器打开网页,按F12打开浏览器调试控制台。
(2)选择network选项卡,再把“Disable cache”勾中。
这时候你只要不关闭浏览器控制台,你再刷新N次网页,浏览器都不会缓存页面的。

QiK0HFb3JxS63BqZM11CeoT3K07ogT80ToDle52n

使用谷歌page speed insight测试网站速度


使用谷歌官方推出的page speed insight测试你网站的速度,它不但能帮你测试桌面端,和移动端的速度。
还能对你的网站速度优化,提出一些针对性的建议。
其它第三方的测速平台,并没有那么全面的。

传送门:

Page Speed Insight

用谷歌light house 插件测试网站整体用户体验

25Wk1my9Rp6F6Zi7hELGiZnGoLByBTPiPs5fyXQl
light house 同样是谷歌官方推出的更强大和全面的提升网站整体用户体验的工具。
它不但能分析你的网站速度,页面元素,SEO,甚至用户体验都能提出建议。还能告诉你一些你不知道的,新技术,新趋势。
它也同时提供PC端和移动端的报告。
爱你的二叔觉得,你只要把谷歌的这两个“亲儿子”伺候好了,你还真的需要去外面喝鸡汤打鸡血吗?
再换个思路,就连谷歌官方的测试都跑不过,
而是去舍近求远寻找可靠性更低的独门偏方,这个理论也是站不住脚的!
连基础的用户体验都做不好,还谈什么SEO,SEM呢?

 我的网站跑分低于85分怎么办?


作为软件架构师的二叔也很惭愧,
以前在公司做的网站和平台原来跑分都是低得发指的,
再拿一些朋友的网站跑一跑,平均分超过75的都是极少的。
二叔通过测试几十个网站发现,只要你的网站使用的第三方cms且购买了模板的,跑分是很难接近85的。
原因也并不是很神秘,因为这些制作模板的程序员并没有很强的营销背景。
而且他们的立场也不一样,他们想要的是用更多的功能,更炫酷的设计来吸引客户,至于代码规范,用户体验,SEO......
或许他们从来没有去仔细研究过,还停留在人云亦云的状态。
二叔选了几个在themeforest标榜自己模板飞快,且SEO友好的模板demo,
丢进以上两个测试网站,结果同样的惨不忍睹。

所以,你也不要灰心,先把跑分做到75,再努力靠齐85!

 品牌商建独立站用第三方cms框架,还是自己研发?


如果你是想以品牌思维去运营你的网站,而且已经准备好了。
那么二叔给你的建议是,自己研发吧!
最次,都要自己开发一套模板!
因为别人的模板虽好,但是很快你就会发现很多不可调和的问题,制约了你的下一步发展。


 为什么二叔的博客跑分那么高?


因为二叔是自己开发的,用的是PHP界里国外最受欢迎,功能最多,同时运行又最慢的Laravel。
一开始二叔和Laravel商量,我们做一个让谷歌给我们用户体验打满分的网站好不好?
laravel是拒绝的!反抗的异常激励!
二叔又不敢否认它的才华,去选择更轻巧的框架。
而且二叔因为贫穷,只给服务器配置了2核4G内存,1mb的带宽。
还在这台高负载的服务器下挂载了5个虚拟机,若干个网站!
laravel直呼臣妾做不到。
最后可爱的你也猜到了,
二叔就是按照这篇文章从上到下的执行了一遍,终于勉强达到了二叔的期望。
当然还有很多不足的地方比如说:
(1)因为贫穷网站的UI设计二叔是没请设计师,导致Google light house提出了一些建议。
(2)网站整体的交互还比较生硬。
(3)因为网站还要持续升级,二叔并没有设置网站缓存的过期时间......

 写在最后的


相信科学!

人生苦短,必须性感,点个关注和二叔一起学习风骚的营销和运营姿势吧!

关注作者,看更多TA的好文章 个人展示
二叔 谁在评论里提醒下这位作者,懒得连名片都没填写。
举报
收藏
转发
0/500
添加表情
评论
评论 (38)
最近
最早

二叔

时尚,科技,拉皮条。 希望和有实力的圈友一起搞搞事情!期盼各种形式的合作!

向TA提问

举报

举报原因:

垃圾广告
人身攻击
抄袭侵权
违法信息
取消 确定

圈内转发

0/104

分享至微信

复制链接

举报

请选择举报理由

留联系方式
垃圾广告
人身攻击
侵权抄袭
违法信息
举报

确认要删除自己的评论吗?

取消 确定

确认要删除自己的文章吗?

取消 确定
提问
设置提问积分
当前可用积分:
-
+
20
50
100
200
偷看

积分偷看

10积分
我的积分(可用积分)
确认偷看

问题已关注

答主回复后,系统将通知你

不再提示