早上打开AI对话工具，提问了“SEO前端需要做哪些”，🤖洋洋洒洒给了好多Tips，又一步步的提问，得到下述的对话过程，我就中翻中，简单描述一下～～～ Group 1.jpg

网站结构优化

网站结构化，可以主要从HTML标记、导航菜单、（即语义化）、内部链接、URL结构、网站地图（即SiteMap）、响应式设计、404页面、网站性能等多个方面着手。

语义化

老生常谈的部分。使用恰当语义的 HTML 标签和 CSS class 等内容，让页面具有良好的语义和结构，让用户和机器（即爬虫）快速理解。(PS：可以考虑ARIA-能力添加，为特殊应用场景考虑～科技的善意)

衡量一个网站的语义化，可以把所有的css都去除后，看页面结构，是否和之前大体相似。

内部链接

内部链接可以将用户从网站的一个页面带到另一个页面。一个全新的网站页面，没有内部链接、也不在网站地图等，搜索引擎无法发现该页面。

如果不想和链接的URL关联，可以通过nofollow 链接属性来提示搜索引擎。（PS：Google 不再将 nofollow 链接属性识别为指令，而是将其视为纯粹的提示。）

一般来说，nofollow 链接属性应用于非自然链接以及网站所有者不想与链接的目标 URL 关联时。为了更好地区分非自然链接的来源，Google 最近引入了另外两个属性值来补充 nofollow 链接属性：

rel="sponsored" 标记付费和赞助链接
rel="ugc" 标记论坛、评论和留言板中用户生成的内容链接

URL结构

网站的URL需要有意义、易读或者与页面内容相关的。
短且描述性的URL，过长、无意义的不合适
可以适当使用连字符（-）或下划线（_）来分隔单词，替代多一层路径/
URL静态化，把部分query有价值的静态化到URL内部

eg：

❌https://www.xxx.com/u5tk/gh4uk/hj/gk/hf/ // 层级过深
❌https://www.xxx.com/ask?quesitionId=xxx // query携带的内容，爬虫不处理
https://www.xxx.com/u5tk-gh4uk-hj-gk-hf/ // 尽可能使用有意义的、易读的内容

✅https://www.xxx.com/ask/xxx
✅https://www.xxx.com/author/xxx

网站地图（Sitemap）

以XML格式提供给搜索引擎，标记允许爬取及禁止爬取部分。

其他

响应式设计：不同设备和尺寸，都可以展示相应的内容；
404页面：页面下线，仍旧提供相关内容，帮助用户访问其他模块or页面，留住用户；
网站性能：访问速度过慢，会影响搜索引擎访问，有被降低权重的风险。

关键词研究与优化

关键词研究

前端工程师可以与SEO团队合作，使用关键词研究工具（如Google AdWords Keyword Planner、Semrush、Moz等）来了解与网站内容相关的常用搜索词汇、相关主题和竞争情况

关键词使用

将关键词等内容合理应用到TDK中。

将优化的关键词和短语合理地应用到网站的元标签、标题、描述、内容和链接等地方。
在HTML中正确设置元标签（如title、meta description等）来优化页面的元数据信息，使其包含关键词并吸引搜索引擎和用户的注意。

内容优化

内容为王，网站内容需要避免大面积的重复，过多重复的内容会被搜索引擎判定为低质量降权。

前端可以做的就是，确保内容结构良好，使用合适的标题标签（H1～H6）和段落标签等。

网站速度优化

网站速度过慢，会影响搜索引擎访问，有被降低权重的风险。网站速度会也是影响排名的因素之一

图片等处理，图片懒加载、延迟加载，使用合适的图片格式等（webp、jpg...）
缓存等，配置HTTP响应头（如Cache-Control、Expires等）来控制缓存行为（协商缓存/强缓存）
压缩和优化资源：压缩CSS、JavaScript和HTML等文件大小，可以利用工具（如UglifyJS、CleanCSS等）或者打包工具的插件（如Webpcak/Vite插件）
延迟加载&按需加载，图片懒加载，JS等资源延迟加载，页面部分元素按需加载。
减少HTTP请求：合并压缩静态资源，使用雪碧图等，适当的缓存策略等。（Http2的可连接数量比http1多一些，但是升级有一定的成本）

移动友好性优化

视图优化&交互优化：提升移动设备的可读性、可交互性、易于导航。字体大小、行距、按钮大小等，内容的排布。交互元素的支持手势和触摸等。
移动设备的导航和搜索：结合下拉菜单、折叠菜单等适应移动设备的屏幕大小，搜索框大小也适应用到设备操作。
可访问性：支持移动设备的屏幕阅读器和辅助功能等，可参考WCAG指南。
图片和多媒体优化：移动设备，使用合适的图片大小尺寸和多媒体元素等。
响应式设计和加载速度优化：不同设备有样式适配及差异，适配移动设备的良好展示。

网站安全性

使用HTTPS
输入验证
防止跨站脚本攻击（XSS）
防止跨站请求伪造（CSRF）
防止点击劫持：设置适当的X-Frame-Options响应头来防止点击劫持攻击，并确保网站不能以iframe的形式嵌入到其他网站中
安全的第三方库和插件
安全的身份验证和授权：网站涉及用户身份验证和授权，采用安全的身份验证机制，如使用密码哈希、加盐存储密码，限制登录尝试次数，使用多因素身份验证等来增强用户帐户的安全性。
安全的错误处理：代码中，不要直接暴露敏感信息或详细的错误消息，以防止攻击者获取有关系统架构和漏洞的信息。进行适当的错误处理，提供用户友好的错误提示，同时将详细的错误信息记录到服务器日志中以便进行故障排查。

链接优化

URL结构优化
链接导航
内部链接优化 & 外部链接管理
404页面优化
链接标签优化 & 链接的可访问性

数据分析和监控

数据分析和监控略，国内可以依赖百度站长之类的平台，国外可以依赖Google Analytics工具。

SEO前端需要做哪些🤖来解答