你可能做了个假网站
你大概看了很多关于网站推广的视频教程，
你大概膜拜了很多大神，
你大概参加了很多线下培训。
喊过666，叫过老师机带带我。
然而现实却是残酷的，你并没有沿着大神的足迹成为你想要成为的样子。
由于你可能选择了相信觉得，而不是科学和数据！
你可能选择了相信一篇爆文或者某个大神的高谈阔论，而不去问问自己这些理论站得住脚吗？
本期二叔将带你用科学的手段，帮你达成一个让用户满意，谷歌满意，你满意的网站。
网站的站内优化1.<!DOCTYPE html>和<html lang=\公众en\"大众> <!DOCTYPE html>它该当涌如今你网页的第一行。实在浏览器不但是用来查看html网页的，还可以查看PDF，图片，以及其它的一些文档。如果你不设置这个标签会发生什么？有一些老式的浏览器，会直接把网页原样输出，你网页的效果不会被渲染出来。
<html lang=\公众en\"大众>
机警的你大概已经考试测验过有些网站的语音阅读功能了，虽然目前来看大部分网页阅读器的效果听起来不是很好。
但是有很大一部分人群是非常喜好和依赖语音阅读网页内容的。
他们可能是
这个lang标签便是帮助网页阅读器，辨别你网页内容的依据。
如果你不添加这个标签，那阅读器会利用用户的默认设置。
这时候，网页阅读器就可能发生致命的失落误了。同理你的用户立时就会跳出你的网页了。
为什么要重视？
随着语音革命的发展，语音阅读的能力会越来越高，同样利用网页阅读器的人也会越来越多。
也保不齐，你的用户便是语音阅读爱好者或者残障人士，
当所有人都不能很好的供应语音阅读体验的时候，你供应了，你就脱颖而出了。
2.<meta name=\"大众viewport\公众>
移动真个主要性就不言而喻了。
因此如果你花了很多钱和精力，却没有在你的网页代码里创造这个标签，
那你就该当陷入深深的沉思，或者拉伸一下筋骨了。
如果没有这个标签，移动设备会按照桌面设备的办法渲染页面，再缩放到移动设备的宽度。
这样你的用户体验会非常的差，用户不得不通过拉伸放大网页才能看清内容。
3. <title>
Title便是网页的名字了，你如果不好好设置title会大大增加用户和搜索引擎理解你网页内容的难度。
就相称于你去单身联谊聚会，却不见告大家你的名字。
导致任何对你感兴趣的人都不敢轻易靠近你。
同理搜索引擎必须通过网页内容通过算法去努力的猜，
你的网页究竟是讲啥的，能给用户供应什么代价？
二叔还真见过页面title都没设置还被搜索引擎收录的网站。
当然末了他们没有多少排名，跳出率也高。
4. <meta name=\"大众Description\"大众 content=\"大众简介\"大众>
如果title是名字，那么description便是网页的简介了。
相称于聚会时候的自我介绍了，如果自我介绍做的好，
那你该当能立时收成一群志同道合想跟你发生关系或间接关系的小伙伴了。
是的，一群！
5. [alt]
你的网站或许有图片，那你就不应该错过[alt]。
事理和lang=\公众en\"大众类似，网页阅读器目前来说还没有能阅读图片的能力。
只能通过alt尽可能的给用户更多信息。
请看腾讯网给我们的精确示范：
6. hreflang
如果你有多个站点，那么hreflang就能帮助你让搜索引擎把精确的网页收录到精确的站点，展示给精确的用户。
就好比你是个聪明伶俐的小可爱，学会了5种措辞。那么你该当印5张名片！
加了这个标签，你可以给对应的用户发不同的名片。
同时你该当给每个关联的站点添加标签，A页面链接到B页面，那么B页面也该当链接回A页面。
否则搜索引擎可能会涌现解析缺点，乃至忽略你的标签。
请看速卖通的精确示范：
7. 利用得当的字体
网页的字体不应该低于12px，再低就真的看不清了，尤其是在移动端。
8. 不该用flash等插件
利用一些外部插件，你该当是非常慎重的，能不用就别用。
尤其是flash这类的会让用户在本地安装程序才能实行的插件。
第一，搜索引擎是不能获取到插件的内容。对搜索引擎优化是没有帮助的。
第二，给用户浏览网站提高了操作门槛。
第三，增加了安全隐患。
9. 页面返回精确的状态码
搜索引擎能够精确识别和索引的页面状态码是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. 图片的显示
图片的显示该当要有精确的显示比例，否则会严重印象用户利用体验。
大略的说，你不能把200200的图片显示成300300。
也不能把200200的图片显示成200300。
你可以把200200的图片显示成100100。
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压缩。
但是你不应该骄傲，你该当考试测验多点击几个类型的文件，看看是不是都压缩了。
利用“HTTP/2 and SPDY indicator”测试网站是否启用http2
“HTTP/2 and SPDY indicator”是谷歌浏览器的一个插件，你把它装上并开启后，打开任意网站。
只要网站启用了http2，那么它的颜色将变成蓝色，否则便是灰色。
我们平时怎么测试网站速率和调试网站？
当你一遍遍在你的电脑上刷你的网站，想测试一下你网站的速率，看着网站加载速率越来越快。
是不是很愉快，很自满？
但是可爱的你，被浏览器欺骗了，由于浏览器都是有缓存机制的，
你一遍遍的刷实在很多内容都是从缓存里加载的。
因此精确的做法是，在你修正完网站后，清空一下网站的缓存（CTRL+ALT+DEL），再打开你的网站。
有的时候我们须要不断修正和调试网站，那我们每次都要先实行（CTRL+ALT+DEL），再打开网站，是不是很繁琐？
但是宠你的二叔会见告你，生活可以更美好一点的。
（1）利用谷歌浏览器打开网页，按F12打开浏览器调试掌握台。
（2）选择network选项卡，再把“Disable cache”勾中。
这时候你只要不关闭浏览器掌握台，你再刷新N次网页，浏览器都不会缓存页面的。
利用谷歌page speed insight测试网站速率
利用谷歌官方推出的page speed insight测试你网站的速率，它不但能帮你测试桌面端，和移动真个速率。
还能对你的网站速率优化，提出一些针对性的建议。
其它第三方的测速平台，并没有那么全面的。
传送门：
Page Speed Insight
用谷歌light house 插件测试网站整体用户体验
light house 同样是谷歌官方推出的更强大和全面的提升网站整体用户体验的工具。
它不但能剖析你的网站速率，页面元素，SEO，乃至用户体验都能提出建议。还能见告你一些你不知道的，新技能，新趋势。
它也同时供应PC端和移动真个报告。
爱你的二叔以为，你只要把谷歌的这两个“亲儿子”奉养好了，你还真的须要去表面喝鸡汤打鸡血吗？
再换个思路，就连谷歌官方的测试都跑不过，
而是去舍近求远探求可靠性更低的独门偏方，这个理论也是站不住脚的！
连根本的用户体验都做不好，还谈什么SEO，SEM呢？
我的网站跑分低于85分怎么办？作为软件架构师的二叔也很惭愧，
以前在公司做的网站和平台原来跑分都是低得发指的，
再拿一些朋友的网站跑一跑，均匀分超过75的都是极少的。
二叔通过测试几十个网站创造，只要你的网站利用的第三方cms且购买了模板的，跑分是很难靠近85的。
缘故原由也并不是很神秘，由于这些制作模板的程序员并没有很强的营销背景。
而且他们的态度也不一样，他们想要的是用更多的功能，更炫酷的设计来吸引客户，至于代码规范，用户体验，SEO......
或许他们从来没有去仔细研究过，还勾留在人云亦云的状态。
二叔选了几个在themeforest标榜自己模板飞快，且SEO友好的模板demo，
丢进以上两个测试网站，结果同样的惨不忍睹。
以是，你也不要灰心，先把跑分做到75，再努力靠齐85！
如果你是想以品牌思维去运营你的网站，而且已经准备好了。
那么二叔给你的建议是，自己研发吧！
最次，都要自己开拓一套模板！
由于别人的模板虽好，但是很快你就会创造很多不可调和的问题，制约了你的下一步发展。
为什么二叔的博客跑分那么高？
由于二叔是自己开拓的，用的是PHP界里国外最受欢迎，功能最多，同时运行又最慢的Laravel。
一开始二叔和Laravel商量，我们做一个让谷歌给我们用户体验打满分的网站好不好？
laravel是谢绝的！
反抗的非常勉励！
二叔又不敢否认它的才华，去选择更轻巧的框架。
而且二叔由于贫穷，只给做事器配置了2核4G内存，1mb的带宽。
还在这台高负载的做事器下挂载了5个虚拟机，多少个网站！
laravel直呼臣妾做不到。
末了可爱的你也猜到了，
二叔便是按照这篇文章从上到下的实行了一遍，终于勉强达到了二叔的期望。
当然还有很多不敷的地方比如说：
（1）由于贫穷网站的UI设计二叔是没请设计师，导致Google light house提出了一些建议。
（2）网站整体的交互还比较生硬。
（3）由于网站还要持续升级，二叔并没有设置网站缓存的过期韶光......
写在末了的
相信科学！
