前端开发与SEO优化：提升网页性能与结构的关键技巧

hwyzw

    “前端开发”指的是“HTML、CSS、JS”的统称。用户在浏览器以及可视化屏幕上所看到的数据布局格式，这就是前端所起到的控制效果。一份品质高的前端代码，不但能够让用户感到愉悦，留住客户，而且有利于“蜘蛛”进行爬取和收录。

    性能角度优化：

    网页的性能主要体现在两个方面，一是“加载速度”，二是“浏览流畅度”。主要方法有：减少页面的请求；进行 CDN 加速；精简代码，一个页面最好不要超过 100k；压缩传输，包括 js 和 css 的压缩；引用新的框架等；合理设置 http 缓存；将图标处理成雪碧图；实现图片的懒加载；进行流加载页面；减少传输。

    结构角度优化： TDK是页面优化最重要的部分

    SEO 网站优化的这篇博客，从小白的角度出发，有对 TDK 的详细介绍。同时，还介绍了如何编写优质的 TDK 。

    巧用meta适配提升用户体验

    前端常用 meta 标签属性有详细总结。小编的这篇博客对 meta 标签做了详细总结，大家可以自行查询学习。如果有不足之处，还请多多指出。

    采用HTNL5 语义化标签

    标签用于定义文档的页眉，此页眉为介绍信息。通常会放置网站的站点名称，同时还会放置 LOGO 和导航栏。这样一来，搜索引擎能更轻易地识别出站点的类型。

    nav 标签用于定义导航链接的部分。它可以是栏目或者频道的链接。这样搜索引擎能够更好地了解网站的信息架构以及分类等情况。而良好的信息架构，更有利于蜘蛛进行爬行以及权重的分布。

    标签用于定义文档或节的页脚。可以在页脚放置导航，像公司介绍、联系我们等这类信息。通常情况下，它对网站不是很重要，并且有可能搜索引擎会降低其在页面中的权重。

    该元素的作用是表示网页中的不同分区。其优势在于每个部分都能拥有独立的 HTML 标题。这样能使搜索引擎更清楚地了解网页的结构划分方式。搜索引擎或许会依据网页中的标签来找出其信息架构。

    定义文章区域，这样做能更利于搜索引擎识别网页的内容，同时也能便于其判断相关性。

    aside 指的是页面内容之外的部分，它可以在左侧或右侧边栏。例如，知乎右侧的“相关问题”就属于 aside 区域。aside 标签的文字信息最好与标签区域的文字信息相关。使用 aside 标签可能会对该页面和目标页面的排名产生影响（如果没有与之对应的合适情况，最好不要使用）。

    还有一些小标签，SEO 会进行识别。tag 标签，其意思是文章标签词；time 标签，其意思是页面发布时间，并且该标签不会在任何浏览器中呈现出任何特殊效果；audio 用于定义音频；video 用于定义视频等等……

   

    Flash不利于SEO优化

    小编查询了多个文档资料，并且汲取了前辈的经验，由此得出结论：Flash 不利于 SEO 优化。

    少用

    搜索引擎不会抓取中的内容。

    巧用h1-h6标签

    页面中 h1 标签的权重比较高，仅次于 title。在所有页面中，h1 标签应该有且仅有一个，它可以用来包裹 logo 以强调品牌。文章段落的二级标题最好加上 h2，其他 H 标签也适宜使用。

    面包屑

    网站添加“面包屑”导航利于页面的索引效率。

    导航优化

    导航应尽量以文字方式呈现，同时可搭配图片导航。然而，图片代码需进行优化，并且标签必须添加“alt”和“title”属性，以此告知搜索引擎导航的定位，这样即便图片无法正常显示，用户也能看到提示文字。

    图片的Alt属性

    页面进行配图（非背景图）时要记得添加“Alt”属性。这样做有利于站内的图片被搜索引擎检索到。它对提升网站的曝光度有一定的作用。并且也会对页面的 seo 排名产生一定的影响。

    a标签的title属性

    a 标签页类链接需要添加 title 属性来进行说明，以便让访客和“蜘蛛”能够知晓。

    a标签的rel=""属性

    a 标签往非友情链接的外链跳转时，需要添加 rel=“” 属性。因为蜘蛛爬到其他网站后，就不会再回到本网站了。

    内链小技巧

   

    内链应采用绝对路径，以减少服务器的相应时间

<p style='margin-bottom:15px;color:#555555;font-size:15px;line-height:200%;text-indent:2em;'>    <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>www.huanghepiao.com.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>黄河票务网<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
// 不宜采用
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/index.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>首页<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
</code></pre></p>
    img标签需要设置大小

    前景图片 要定义大小、不然会造成页面重新渲染，影响加载速度

<p style='margin-bottom:15px;color:#555555;font-size:15px;line-height:200%;text-indent:2em;'>    <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span> <span class="token punctuation">"</span></span>  <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
</code></pre></p>
    b标签和标签起强调作用

    内容关键词加黑标签需用 b 标签，此标签可用于强调具体页面内容。B 标签通常用在关键词处，一个页面加 2 至 5 次较为适宜，具体次数需根据页面大小来确定。

    div标签的真实作用

    div 和 span 属于容器标签，它们没有语义。在使用标签时，不要随意都用 div 和 span，而应尽量合理地使用 ul、ol、li、table 等标签。