前端开发与SEO优化：提升网页性能与结构的关键技巧
“前端开发”指的是“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 用于定义视频等等……
https://img1.baidu.com/it/u=2036665670,1115686708&fm=253&fmt=JPEG&app=138&f=JPEG?w=889&h=500
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=“” 属性。因为蜘蛛爬到其他网站后，就不会再回到本网站了。
内链小技巧
https://img0.baidu.com/it/u=2048046015,1173673903&fm=253&fmt=JPEG&app=138&f=PNG?w=822&h=500
内链应采用绝对路径，以减少服务器的相应时间
<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 等标签。
页:
[1]