seo搜索优化前端(SEO优化系统)

spider_120_477

<p>
    天企网络：
    <strong>
     网站
    </strong>
<strong>
     seo
    </strong>
<strong>
     优化
    </strong>
    之前端代码优化分享
   </p><p>
<strong>
     一、
    </strong>
<strong>
     head
    </strong>
<strong>
     标签中的部分
    </strong>
</p><p>
<strong>
</strong>
<strong>
     1.URL
    </strong>
<strong>
     设计
    </strong>
</p><p>
    URL尽量含有通用已成趋势的移动命名，例如“m./wap./3g./mobi./mobile./mob/wml/”,可以在子域名等方面体现
   </p><p>
<strong>
</strong>
<strong>
     2.
    </strong>
<strong>
     页面顶部的
    </strong>
<strong>
     doctype
    </strong>
<strong>
     标签
    </strong>
</p><p>
    作为协议的重要部分，doctype中是否移动化也很重要，检查是否存在与移动相关的声明，如这些关键词，openmobilealliance, xhtml-mobile, xhtml-basic,wapforum,dtd compact html
   </p><p>
    例：“”
   </p><p>
<strong>
     3.meta
    </strong>
<strong>
     标签中的
    </strong>
<strong>
     viewport
    </strong>
<strong>
     属性和
    </strong>
<strong>
     x-ua-compatible
    </strong>
<strong>
     属性
    </strong>
</p><p>
    viewport,移动前端开发中最重要的标签，响应式设计的根基，如果你的页面是遵守响应式设计的，那么说明这些页面对移动设备有友好的输出。
   </p><p>
    典型的的viewport代码是这样的，，判断移动与否的关键属性值为width，如果width=device-width这是典型的移动友好的设计，增加判定为移动页面的砝码，如果width有具体值，且值大于典型的移动屏幕(应该小于600)，那么该页面被判定为PC页面的几率大大增加。
   </p><p>
    但，META中还有一个很独特的属性作为SEO人员应该很少接触到，那就是x-ua-compatible属性，该属性是PC意味非常强烈的功能性代码。示例代码如此，，从百度工程师处得知，该代码会有较强暗示当前页面为PC页面的功能，需选择性使用。
   </p><p>
<img image_type="1" img_height="316" img_width="353" mime_type="image/jpeg" src="https://p3-sign.toutiaoimg.com/568a0004d3e478f83108~tplv-tt-origin-asy2:5aS05p2hQOa3seWcs-WkqeS8gee9kee7nOaciemZkOWFrOWPuA==.image?_iz=58558&amp;from=article.pc_detail&amp;x-expires=1698117127&amp;x-signature=Jyq41LaEPC16WvzgBjfls1h2mjE%3D" web_uri="568a0004d3e478f83108"/>
</p><p>
<strong>
     4.title
    </strong>
<strong>
     中的移动暗示
    </strong>
</p><p>
    制作移动页面时，在title标签中写明：“移动版”、“手机版”、“WAP版”、“触屏版”不仅是照顾用户体验的方案，也利于页面的移动识别，反之PC页面要谨慎使用这些文案。
   </p><p>
<strong>
     5.
    </strong>
<strong>
     链接
    </strong>
<strong>
     link
    </strong>
<strong>
     标签的
    </strong>
<strong>
     media
    </strong>
<strong>
     和
    </strong>
<strong>
     href
    </strong>
<strong>
     属性中需要注意的细节
    </strong>
<strong>
     (
    </strong>
<strong>
     多为样式文件
    </strong>
<strong>
     )
    </strong>
</p><p>
    media属性值为screen时，表示屏幕中的显示样式，link的href所填写的URL(基本为样式文件的URL)就比较重要了，一定程度加大不同设备的偏重。此时URL中尽量出现/wap,/mobile/这样的命名，同URL设计一样，用于提高页面识别为移动的效率和概率。
   </p><p>
    如URL中含有pc字样则加大识别为PC页面的几率。
   </p><p>
<strong>
     6.
    </strong>
<strong>
     一些通用的
    </strong>
<strong>
     PC
    </strong>
<strong>
     类识别
    </strong>
<strong>
     HTML
    </strong>
<strong>
     代码
    </strong>
</p><p>
    embed：经常用于嵌入多媒体
   </p><p>
    object：用于嵌入对象
   </p><p>
    marquee：老旧的滚动特效实现代码
   </p><p>
    iframe：想必网站优化人员很熟悉了，典型的PC常用标签
   </p><p>
    这些典型的用于PC或者老旧的、HTML5已经有更高效替代方案的旧标签，意味着使用它们将增加页面的PC属性，需要有目的地取舍。
   </p><p>
<strong>
</strong>
<strong>
     7.
    </strong>
<strong>
     一些
    </strong>
<strong>
     javascript
    </strong>
<strong>
     中典型的
    </strong>
<strong>
     PC
    </strong>
<strong>
     特征
    </strong>
</p><p>
    加载swfobject、含有activexobject语句：移动页面根本不会使用如此重的多媒体引用方案(不信你问问你的前端工程师)
   </p><p>
    含有netscape(网景)、msie(IE)、firefox(火狐)、browser.msie(IE)这些典型的非移动端浏览器兼容代码的
   </p><p>
    设置了timer的 ，以及JS代码含有settimeout,的(此处不知道为什么设置timer还有识别的问题)
   </p><p>
    均大幅增加识别为PC页面的可能性
   </p><p>
    以上这些中出现的内容，
   </p><p>
<strong>
     二、正文
    </strong>
<strong>
     body
    </strong>
<strong>
     中需要注意的部分
    </strong>
</p><p>
    链接和文本遵照的原则基本与head中一样——多出现移动相关的字眼;页面设置的宽度不要超过常规移动设备的大小;那些常识中(除非招错前端工程师)绝对只用于PC的一些兼容性代码。
   </p><p>
    此外div块的个数也值得注意，没有哪家移动页面会过量使用div块;还有典型的只用于适配PC机器的HTML代码，例如：accesskey(如果移动页面用，要不前端招错人了，要不产品招错人了，应该引起警觉)head和正文两大部分，基本涵盖了一张页面最主要的部分。
   </p><p>
    网站优化人员一定要把握这些使用细节，协助前端工程师从正反方向将公司的PC和手机页面泾渭分明地呈现给搜索引擎。试想如果你每日被抓取页面达到90%的识别率，而一般水平是70%，这种优化增量是非常显著的。
   </p>

MbA70355058

不错，支持下楼主

JowsV230877

好帖，来顶下

5P26c198292

不错不错，楼主您辛苦了。。。

uctHc675763

看帖回帖是美德！

xrQ6k882431

前排支持下

HwZ2u740487

学习了，不错，讲得太有道理了

EnocO550099

谢谢楼主，共同发展

wzHzj51109

有竞争才有进步嘛

rboU2124269

这真是不错，顶给需要的人