SEO工作并不是专属于专业的从业人员。身为前端开发，我们一样可以在日常的开发过程中兼顾一些代码层面上的SEO优化。 本文将列举一些前端常用SEO方法。
前面已经讲解meta元素对SEO的重要性，其中最为重要的当属title、keywords、description。按照正常流程，这三者都是由产品提供。如果产品或者PM忘记了，前端开发可以适时的加以提醒，让他们提供。如果网站是个人网站，则可以根据页面内容自己编写。无论是产品提供还是自己编写，都需要贴合当前网页的主体内容，切忌一个网站所有的网页的title、keywords、description一模一样。
三者的编写示例：
<!-- 与页面内容相关的标题，注意区分同一网站的其他页面 -->
<title>页面标题</title>
<!-- 一段简短而精确的、对页面内容的描述。一些浏览器，比如 Firefox 和 Opera，将其用作书签的默认描述 -->
<meta name="description" content="页面描述" />
<!-- 与页面内容相关的关键词，使用逗号分隔 -->
<meta name="keywords" content="关键字" />
搜索引擎抓取工具1会自动访问页面中的a标签链接。但并不是所有的a标签链接都会被访问，只有通过a标签的href属性设置的链接才会被访问。基于这个机制有如下优化方向：
href属性；href属性必须是指向可解析的网址链接；此外，链接指向的网页对当前网页的排名也存在影响。所以，我们还需要想搜索引擎说明意图。可通过rel属性设置：
rel值rel="sponsored"请使用 sponsored值标记广告链接或付费展示位置链接（通常称为“付费链接”）。详细了解 Google 对付费链接的态度。注意：对于这类链接，以前推荐使用nofollow属性，现在，您仍可以使用该属性进行标记，但更建议您使用sponsored标记。rel="ugc"建议您使用 ugc值标记用户生成的内容（例如评论和论坛帖子）的链接。如果您想对值得信赖的贡献者（始终如一地做出高质量贡献的成员或用户）表示认可和奖励，则可从他们发布的链接中移除此属性。详细了解如何防范垃圾评论。rel="nofollow"如果其他值不适用，并且您希望 Google 不跟踪您网站上的出站链接，或不从您的网站上抓取链接页，请使用 nofollow值。对于您网站中的链接，请使用 robots.txtdisallow规则。摘自——《说明出站链接的用意以实现搜索引擎优化 (SEO) | Google 搜索中心 | 文档 | Google Developers》
对付费链接、需要登录的链接或不受信任的内容（例如用户提交的内容）使用
rel=nofollow，以免将良好的信号传递给它们，或者让它们的低劣质量牵连到您。
有些网页我们并不想要它被抓取，这时就需要屏蔽这些网页。
屏蔽网页可以通过添加noindex来实现：
<meta name="robots" content="noindex">
网站的网址结构应尽可能简单，合乎逻辑并易于理解，尽可能在网址中使用易读的字词，而非冗长的 ID 编号。
-)，而不要使用下划线 (_)。网站图片的优化是一门大学问，这里不具提展开了，如有兴趣，推荐查看：《快速加载 (web.dev)》。
下面简单列举一些常用的方法：
设计自适应网页可以带来更好的用户体验，因为用户可以在各种设备上使用这些网页。
网页使用 <img srcset> 属性或 <picture> 元素指定自适应图片。
借助“srcset”属性，您可指定同一图片的不同版本，特别是针对不同屏幕尺寸：
<img srcset="example-320w.jpg 320w,
example-480w.jpg 480w,
example-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="example-800w.jpg" alt="responsive web">
<picture> 元素是一个容器，用于对同一图片的不同 <source> 版本进行分组。它提供了一种后备方法，让浏览器能够根据设备特征（例如像素密度和屏幕尺寸）选择合适的图片。对于尚不支持新图片格式的客户端而言，picture 元素也非常便于利用内置的优雅降级功能处理新图片格式。
建议您在使用 picture 标记时，始终提供 img 元素（带 src 属性）作为后备，格式如下：
<picture>
<source type="image/svg+xml" srcset="pyramid.svg">
<source type="image/webp" srcset="pyramid.webp">
<img src="pyramid.png" alt="large PNG image...">
</picture>
无障碍优化对SEO也很重要。页面的无障碍优化做的好，搜索引擎在解析网页文件的时候就可以获取到调理清晰的网页结构。调理清晰的网页结构有助于搜索引擎提取关键信息。再者，搜索引擎约等于“盲人”，没法看到页面效果的。盲人在浏览网站时，只能借助浏览器朗诵网页文案来了解网站内容。这个情景与搜索引擎解析网页很相似。所以，无障碍优化好的网站，SEO方面必然非优秀。
列举几个常见的无障碍优化手段：
<html lang="en">分页对大量内容是很有用的手段。但由于搜索引擎不具备交互能力，只会获取到第一页的内容。为了解决这个问题，我们需要把分页信息体现在URL中，然后将需要索引的分页URL在sitemap中罗列出来。这样，搜索引擎就可以通过URL访问其他分页的内容。
注：
- 并不是所有的分页都需要优化。
- 分页信息在URL中体现，需要修改URL，此操作会导致页面刷新。
前端开发人员能做的SEO优化手段有很多，绝不仅限于上面提及的几点。开发之余，顺手做一些SEO优化，是很划算的一笔"买卖"。
搜索引擎抓取工具是一种由搜索引擎公司开发的自动访问网站并收录网站的脚本机器人。俗称爬虫。 ︎
文章浏览阅读1.2k次。远程桌面时，如何登录没有设置密码的系统_远程桌面连接没有密码的电脑
文章浏览阅读3.5k次，点赞2次，收藏13次。为了从FTP服务器下载文件，需要要实现一个简单的FTP客户端。FTP（文件传输协议） 是 TCP/IP 协议组中的应用层协议。FTP协议使用字符串格式命令字，每条命令都是一行字符串，以“\r\n”结尾。客户端发送格式是：命令+空格+参数+"\r\n"的格式服务器返回格式是以：状态码+空格+提示字符串+"\r\n"的格式，代码只要解析状态码就可以了。读写文件需要登陆服务器，特殊用..._ftp 登录返回230
文章浏览阅读648次。前提：systemctl stop firewalld 关闭防火墙关闭selinux查看getenforce临时关闭setenforce 0永久关闭sed-i'/SELINUX/s/enforcing/disabled/'/etc/selinux/configselinux的三种模式enforcing：强制模式，SELinux 运作中，且已经正确的开始限制..._centos7 安装rabbitmq3.6.5
文章浏览阅读5.8k次。满意答案s55f2avsx2017.09.05采纳率：46%等级：12已帮助：5646人新版Android Studio/IntelliJ IDEA可以直接导入eclipse项目,不再推荐使用eclipse导出gradle的方式2启动Android Studio/IntelliJ IDEA，选择 import project3选择eclipse 项目4选择 create project f..._android studio 项目导入idea 看不懂安卓项目
文章浏览阅读860次，点赞2次，收藏6次。AI大模型技术已经在自然语言处理、计算机视觉、多模态交互等领域取得了显著的进展和成果，同时也引发了一系列新的挑战和问题，如数据质量、计算效率、知识可解释性、安全可靠性等。城市运维涉及到多个方面，如交通管理、环境监测、公共安全、社会治理等，它们需要处理和分析大量的多模态数据，如图像、视频、语音、文本等，并根据不同的场景和需求，提供合适的决策和响应。知识搜索有多种形式，如语义搜索、对话搜索、图像搜索、视频搜索等，它们可以根据用户的输入和意图，从海量的数据源中检索出最相关的信息，并以友好的方式呈现给用户。_ai大模型应用开发
文章浏览阅读8.2k次，点赞12次，收藏121次。为什么要测量阻抗呢？阻抗能代表什么？阻抗测量的注意事项... ...很多人可能会带着一系列的问题来阅读本文。不管是数字电路工程师还是射频工程师，都在关注各类器件的阻抗，本文非常值得一读。全文13000多字，认真读完大概需要2小时。一、阻抗测试基本概念阻抗定义：阻抗是元器件或电路对周期的交流信号的总的反作用。AC 交流测试信号 (幅度和频率)。包括实部和虚部。图1 阻抗的定义阻抗是评测电路、元件以及制作元件材料的重要参数。那么什么是阻抗呢？让我们先来看一下阻抗的定义。首先阻抗是一个矢量。通常，阻抗是_阻抗实部和虚部
文章浏览阅读529次。php安装soap扩展的方法：首先打开“php.ini”文件；然后添加代码为“extension = php_soap.dll”；最后修改soap配置项并保存即可。安装 SOAP 扩展对于 Windows 平台，需要在 php.ini 中加入如下代码：extension = php_soap.dll上面的工作完成之后，还需要注意的是 SOAP 扩展在配置文件中有独立的代码片段：[soap]; En..._php_soap.dll
文章浏览阅读746次。适用于多种场景：纯粹多库、 读写分离、 一主多从、 混合模式等目前我们就来模拟一个纯粹多库的一个场景，其他场景类似场景说明：我们创建两个库，分别为：mybatis_plus（以前的库不动）与mybatis_plus_1（新建），将mybatis_plus库的product表移动到mybatis_plus_1库，这样每个库一张表，通过一个测试用例分别获取用户数据与商品数据，如果获取到说明多库模拟成功文章目录一、创建数据库及表二、引入依赖三、配置多数据源四、创建用户service五、创建商品serv_mybatisplus同一个方法里操作两个数据源
文章浏览阅读1.1w次，点赞13次，收藏62次。1.配置调试工具2.打开调试， 进入调试界面后 ，打开logic analysis窗口，并设置PWM输出引脚3.点击全速运行，观察示波器_keil5如何仿真pwm输出
文章浏览阅读446次，点赞8次，收藏6次。如果你是一个新手小小小小白，想要学习C语言，却被困在了第一步，那么你一定要看o(╥﹏╥)o。_vs dev-c++
文章浏览阅读353次。IEEE对于维特比（高通公司联合创始人）的访谈_andrew viterbi
文章浏览阅读1.1k次。源码简介与安装说明：2021增强版短视频去水印源码 去水印微信小程序源码网站 去水印软件源码安装环境（需要材料）：备案域名–服务器安装宝塔-安装 Nginx 或者 Apachephp5.6 以上-安装 sg11 插件小程序已自带解析接口，支持全网主流短视频平台，搭建好了就能用注：接口是公益的，那么多人用解析慢是肯定的，前段和后端源码已经打包，上传服务器之后在配置文件修改数据库密码。然后输入自己的域名，进入后台，创建小程序，输入自己的小程序配置即可安装说明：上传源码，修改data/_去水印机要增强版