📔写在前面
回顾过去，当初使用原生JS进行项目开发时，各种HTML、CSS、JS文件的引用让人头痛不已。在没有采用Vue SPA进行项目时，我们常常使用各种UI框架如Bootstrap、Layui、Amazy UI、MUI、WeUI、jQueryWeUI、ZUI等，导致代码混乱，项目庞大，对搜索引擎爬虫并不友好。当公司要求进行SEO时，我们不得不开始项目规范化和代码优化的漫长过程。在这个过程中积累了不少经验，现在将其记录下来，以便未来学习和更新。
📔SEO初探
SEO，即Search Engine Optimization，搜索引擎优化。自从有了搜索引擎，SEO便应运而生。其存在的意义在于提升网页在搜索引擎自然搜索结果中的收录数量和排名位置。
简而言之，SEO旨在让搜索引擎更多地收录我们精心制作的网站，并且在用户访问时能够将网站排在前列。
📖搜索引擎工作原理
当用户在搜索框中输入关键词并点击搜索时，搜索引擎进行一系列操作。
在搜索引擎后台存在一个庞大的数据库，存储着海量的关键词，每个关键词对应着众多网址。搜索引擎通过网络爬虫（蜘蛛）不断下载、收集这些网址，将有用的信息存入数据库。
网络爬虫从一个链接到另一个链接，下载内容，提取关键词，并将有用信息存入数据库。当用户搜索时，搜索引擎检索数据库，将与关键字相关的网址展示给用户。
关键词对应多个网址，因此需要排序。与关键词最匹配的网址排在前面。搜索引擎蜘蛛在抓取网页内容时，需要能够理解网页内容，这就是SEO的语境。
🍚SEO优化策略
一、网站结构布局优化
在前端SEO中，通过简单而直观的网站结构布局，既让用户轻松理解，也让搜索引擎的“蜘蛛”更容易抓取。以下是一些建议：
1. 扁平化结构设计： 推崇采用扁平化结构，使网站目录层次简单明了。研究表明，中小型网站的目录结构若超过三级，搜索引擎蜘蛛可能不愿意深入，因此建议保持三层目录结构，以提升用户体验。
2. 控制首页链接数量：
a.首页链接数量在100个以内，权重最高，但避免太多导致用户体验下降。
b.首页链接的性质可以包括页面导航、底部导航、锚文字链接等，以引导用户获取信息为前提。
3. 扁平化的目录层次： 让“蜘蛛”通过最多三次跳转即可到达任何内页，例如，“植物”--> "水果" --> "苹果"、“桔子”、“香蕉”。
4. 导航优化：
采用文字导航为主，可搭配图片导航。
对图片代码进行优化，添加“alt”和“title”属性，提升搜索引擎对导航的理解。
在每个网页上添加面包屑导航，以增强用户体验和“蜘蛛”对网站结构的理解。
5. 网站结构布局细节：
a.页面头部：包括logo、主导航和用户信息。
b.页面主体：左侧正文，包括面包屑导航和正文；右侧放置热门文章和相关文章，增加页面权重。
c.页面底部：包括版权信息和友情链接。
d.分页导航的写法，推荐使用：“首页 1 2 3 4 5 6 7 8 9 下拉框”，以方便“蜘蛛”直接跳转。
🚀二、网页代码优化策略
在进行网页代码优化时，以下是一些建议，注意保持简洁、语义化：
1. Title标题：
强调重点关键词，避免重复，确保每个页面的<title>不同。
例：
2. Meta Keywords标签：
列举几个关键词，避免过度堆砌。
例：
3. Meta Description标签：
提供高度概括的网页描述，不宜过长，避免关键词过度堆砌。
例：
4. Body中的标签：
代码语义化，使用适当标签，让代码清晰易懂。
例：
5. A标签：
页内链接加“title”属性，外部链接加rel="nofollow"属性。
例：
6. 正文标题使用<h1>标签：
让“蜘蛛”识别正文标题的重要性。
例：
7. 使用"alt"属性说明图片：
例：
8. 文本缩进使用CSS：
避免使用特殊符号，应使用CSS进行设置。
例：
9. 巧妙利用CSS布局：
将重要内容的HTML代码放在前面，提高搜索引擎抓取关键词的优先级。
例：
10. 不使用iframe框架：
“蜘蛛”一般不会读取其中的内容，谨慎使用。
11. 谨慎使用display: none：
对于不想显示的文字内容，应设置z-index或放置在浏览器显示器之外，以避免搜索引擎过滤。
12. CSS代码放在最前面，JS代码前面：
加速页面加载，确保关键CSS样式在首次渲染时可用，提高用户体验。
通过以上代码优化策略，可提高网页在搜索引擎中的收录效果，同时保持页面清晰、用户友好。
🔒Web性能优化与SEO关联
Web性能优化不仅关系用户体验，还对SEO产生积极影响。以下是一些优化方案，结合了经验和前沿技术，旨在提高页面加载速度。
🥂前沿趋势：
研究表明，用户最满意的网页加载时间为2-5秒，超过10秒，99%的用户可能关闭页面。
🔢一、减少HTTP请求：
尽量使用icon代替图片，如必须使用图片，考虑使用雪碧图。
对图片进行压缩，保持小于200k，或使用图片转base64。
使用静态资源缓存，添加Expires头，减少不必要的HTTP请求。
写法：Cache-Control: max-age=12345600
压缩CSS、JS、HTML，精简代码。
多使用外部文件，尤其是公共的JS和CSS。
实施图片懒加载，按需加载资源，减少请求量。
👔二、使用CDN加速：
通过内容分发网络（CDN），将资源分布在全球多个节点，加速用户访问速度。
🐠三、样式CSS放头部，JS放底部：
有助于首次加载时快速呈现页面，提升用户体验。
🏩四、减少或避免使用IFrame：
搜索引擎不会爬取IFrame内的内容，故减少IFrame数量或避免使用，有助于提高页面可索引性。
🏠五、避免404错误：
404代表资源未找到，影响用户体验，应避免此类错误。
🍧六、减少DNS查找：
减少域名解析次数，通过合理使用CDN、减少域名数量等方式提高页面加载速度。
⚽七、使用Ajax缓存：
通过Ajax缓存技术，减少不必要的请求，提高页面加载效率。
这些优化策略不仅有助于提升用户体验，而且对搜索引擎排名产生积极影响。通过综合考虑页面加载速度、内容可访问性和用户体验，可实现更全面的Web性能优化。
