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优化，是很划算的一笔"买卖"。
搜索引擎抓取工具是一种由搜索引擎公司开发的自动访问网站并收录网站的脚本机器人。俗称爬虫。 ︎
文章浏览阅读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 阻抗的定义阻抗是评测电路、元件以及制作元件材料的重要参数。那么什么是阻抗呢？让我们先来看一下阻抗的定义。首先阻抗是一个矢量。通常，阻抗是_阻抗实部和虚部
文章浏览阅读955次。前面章节分享试用了pyzero,pygame但随着想增加更丰富的游戏内容，好多还要进行自己编写类，从今天开始解绍一个新的python游戏库arcade模块。通过此次的《连连看》游戏实现，让我对swing的相关知识有了进一步的了解，对java这门语言也有了比以前更深刻的认识。java的一些基本语法，比如数据类型、运算符、程序流程控制和数组等，理解更加透彻。java最核心的核心就是面向对象思想，对于这一个概念，终于悟到了一些。_arcade语言 like
文章浏览阅读1.1k次。源码简介与安装说明：2021增强版短视频去水印源码 去水印微信小程序源码网站 去水印软件源码安装环境（需要材料）：备案域名–服务器安装宝塔-安装 Nginx 或者 Apachephp5.6 以上-安装 sg11 插件小程序已自带解析接口，支持全网主流短视频平台，搭建好了就能用注：接口是公益的，那么多人用解析慢是肯定的，前段和后端源码已经打包，上传服务器之后在配置文件修改数据库密码。然后输入自己的域名，进入后台，创建小程序，输入自己的小程序配置即可安装说明：上传源码，修改data/_去水印机要增强版
文章浏览阅读557次。1. 触发器是FPGA存储数据的基本单元2. 触发器作为时序逻辑的基本元件，官方提供了丰富的配置方式，以适应各种可能的应用场景。_fdre #(.init(1'b0) // initial value of register (1'b0 or 1'b1) ) fdce_osc (
文章浏览阅读560次。本该是不同编译器结果不同，但是尝试了g++ msvc都是先计算c，再计算b，最后得到a+b+c是经过赋值以后的b和c参与计算而不是6。由上表可知，将q复制到p数组可以表示为：*p++=*q++，*优先级高，先取到对应q数组的值，然后两个++都是在后面，该行运算完后执行++。在电脑端编译完后会分为text data bss三种，其中text为可执行程序，data为初始化过的ro+rw变量，bss为未初始化或初始化为0变量。_嵌入式面试笔试c语言知识点
文章浏览阅读2.3k次。57 Things I've Learned Founding 3 Tech CompaniesJason Goldberg, Betashop | Oct. 29, 2010, 1:29 PMI’ve been founding andhelping run techn_mature
文章浏览阅读1.9k次。问题：先讲下需求，有若干个文本文件（txt或者csv文件等），每行代表一条数据，现在希望能合并成 1 个文本文件，且需要去除重复行。分析：一向奉行简单原则，如无必要，绝不复杂。如果数据量不大，那么如下两条命令就可以搞定合并：cat a.txt >> new.txtcat b.txt >> new.txt……去重：cat new...._python 超大文本合并
文章浏览阅读489次。这个过渡页是第一次打开小程序展示的，点击某个小程序前把手机的开发者->network link conditioner->enable & very bad network 就会在停在此页。比如《支付宝运动》这个小程序先看这个类的.h可以看到它继承于DTViewController点击左上角返回的方法- (void)back;#import "DTViewController.h"#import "APBaseLoadingV..._类似支付宝页面过度加载页