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优化，是很划算的一笔"买卖"。
搜索引擎抓取工具是一种由搜索引擎公司开发的自动访问网站并收录网站的脚本机器人。俗称爬虫。 ︎
文章浏览阅读6.1k次，点赞19次，收藏74次。主要介绍C语言提供的哈希函数。_c语言哈希表
文章浏览阅读3.1k次，点赞2次，收藏8次。最近处理了几个项目中的性能问题，来跟大家唠唠。这几个问题是非常常见的。性能瓶颈就有这么个特点，大部分瓶颈分析到最后，都给人有一种猛拍大腿突然醒悟的感觉。但是在分析到具体的原因之前，都是抓耳挠腮，百思不解。这就是性能瓶颈的魅力所在了。问题一：单队列网卡导致软中断高这个问题在专栏也好，公众号文章也好，都不止一次描述过。但是看到过的同学们似乎还是没办法在项目中非常快速地定位出来。问题的现象我就不描述了，无非就是 TPS 压不上去。先看一下这个压力的路径。这是一个清晰的路径。我们直接来说判断的关_客户性能分析案例
文章浏览阅读6.7k次。数据转换是指将数据转换或统一成适合于挖掘的形式。数据规范化大致分为三种最大最小规范化、z-score规范化、按小数定标规范化。一、z-score规范化z-score规范化：又称标准差规范化或零均值规范化，数据处理后服从标准正态分布，也是比较常用的规范化方法。其中为对应特征的均值，为标准差。python中有两种方法实现：利用Pandas中DataFrame的apply函数；利用sklearn库已经封装好的方法。1.apply()函数DataFrame.apply(func,axis=_数据清洗 数据转换
文章浏览阅读6.4k次。{ title:'服务id', field:'service_id', align:'center', valign:'middle', visible:false }, {_$('#userlisttable').bootstraptable('getselections')
文章浏览阅读957次。大家好，前段时间对UE4蓝图的做了一个浅显的研究，为了对引擎的全流程都做一个系统研究，这两周时间我一直在研究引擎的渲染功能，利用现成的素材，快速搭建场景，搭配UE4灯光系统，完成了一个案例，涵盖了基本的灯光，摄像机操作，因为客观因素，所有知识点在单位进行系统整理，回家后整理素材进行制作，所以断断续续时间花得比较长，如果正常制作的话，这个场景最多两天就可以搞定了！先看一下成..._ue 点击建模数据某一面 实现交互事件
文章浏览阅读4.4k次，点赞4次，收藏14次。本篇文章，提供Es搜索优化的思路，优化方向，不做过多的细节赘述。目前负责千亿级别的索引的搜索优化。以下内容，是我个人做es搜索的经验。这些内容是官网上看不到的东西。_es搜索优化
文章浏览阅读351次。题目内容：NMEA-0183协议是为了在不同的GPS（全球定位系统）导航设备中建立统一的BTCM（海事无线电技术委员会）标准，由美国国家海洋电子协会（NMEA-The National Marine Electronics Associa-tion）制定的一套通讯协议。GPS接收机根据NMEA-0183协议的标准规范，将位置、速度等信息通过串口传送到PC机、PDA等设备。N..._7-1 gps数据处理分数 15全屏浏览题目切换布局作者 翁恺单位 浙江大学nmea-0183协
文章浏览阅读3.4k次，点赞2次，收藏2次。列的 FillWeight 值总和不能超过 65535这里写自定义目录标题写程序添加列时，超过655列会报错，而我的列为900多列。看了下报错，查了下fillweight是相对于其他列的显示宽度，初始值为100，所以655列就达到了上限。csdn上的建议基本是换控件或者循环绑定列，但我是绑定datatable，循环会很麻烦，在stackflow上搜索了下得到了一个很好的解决方案，记录一下：//绑定datagridview事件columnAdded。private void dataGridViewN_fillweight值总和不能超过65535
文章浏览阅读164次。下面看看JSP文件在各个阶段的内容。源文件：success.jsp<%@ page contentType="text/html;charset=gb2312"%><html><head><title>登录成功</title></head><body>&_每一个jsp在执行时会先转化为（ ）。
文章浏览阅读5.6k次。SQL Server四种类型文件 .mdf为主数据文件，包含数据库启动信息，指向数据库其他文件。.ndf为次要数据文件，次要数据文件是可选的，由用户定义并存储用户数据。次要文件可用于将数据分散到多个磁盘上。另外，如果数据库超过了单个 Windows 文件的最大大小，可以使用次要数据文件，这样数据库就能继续增长。.ldf为事务日志文件，用于记录所有事务以及每个事务所做的数据库修改。事..._收缩 分离
文章浏览阅读5k次，点赞2次，收藏26次。SQL关键字详解_sql关键字
文章浏览阅读8.4k次，点赞8次，收藏33次。跳转指令是汇编语言中最常用的指令之一。C语言中的条件语句，循环语句，经过汇编后都含有跳转指令。_c语言跳转