前端加薪从熟悉SEO排名开始，来先吃透这10个HTM

前端加薪从熟悉SEO排名开始，来先吃透这10个HTML标签吧

为一位企业主或网站管理员，相信你一定听过SEO，也就是搜索引擎优化。这个东西的作用就是帮助你的网站在相关关键字的搜索引擎结果页面 (SERP) 上排名更靠前。而想要做到更好的SEO，就必须得对你网站的HTML代码有个透彻的理解。

所谓HTML，就是超文本标记语言。这个东西是用来创建网页的编程语言。HTML代码主要是由不同的元素或标签组成，用来定义网页的结构和内容。只要用对了HTML标签，就可以大幅提升你网站的搜索引擎优化啦！因为搜索引擎算法都是用这些标签来理解你页面的内容滴~

今天我们要聊的话题是：让你的网站 SEO 更上一层楼的前10个HTML标记！相信你们听到这个，肯定都迫不及待地想知道是哪些标记了吧！那就跟我一起来看看这10个HTML标记的代码和如何有效地使用它们吧！

1、标题标签：

要让你的网站在搜索引擎里更出风头，<title> 标签可是超重要的哦！因为搜索引擎就是通过这个标签来展示你的网页标题的。所以，一定要在<title> 标签里面包含页面的主要关键字，这样才能更好地优化你的SEO哦~

例子：

<head>
<title>最佳 SEO 技巧 | 艾编程博客</title>
</head>

2、元描述标签：

宝贝们，要想在搜索引擎里面脱颖而出，<meta name="description"> 标签可是必不可少的哦！它可以提供网页的简短描述，让搜索引擎在搜索结果中展示哦所以，千万不要忘了在这个标签里面包含页面的主要关键字，这样才能更好地优化你的SEO呢。

例子：

<head>
<meta name="description" content="学习最好的 SEO 技巧和技巧，让您的网站在搜索引擎中排名更高。">
</head>

3、H标签：

<h1>标签可是超级重要的哦！它可以用来定义网页的主标题，帮助搜索引擎更好地理解页面的主要主题。当然，在 <h1>标签中也要包含页面的主要关键字才能更好地优化SEO哦！不过要记得，标题标签有六个，按照重要性降序使用。比如说，H1用于页面的主标题，H2用于副标题，H3用于子标题，这样就可以更好地优化你的页面哦！`

例子：

< h1 >最佳 SEO 技巧</ h1 >

4、图片替代文字标签：

图像替代文本img标签可是非常有用的哦！它可以用来描述网页上图像的内容。如果无法显示图像，它会显示为文本。而且，它还能帮助搜索引擎更好地了解图像的上下文和相关性呢！替代文本应该是描述性的，包括主要关键字，并且长度不要超过 125 个字符哦！这样可以更好地优化你的SEO，让你的页面在搜索引擎里面更加突出！

例子：

<img src="image.jpg" alt="最佳 SEO 技巧">

5、锚文本标签

今天我们来聊聊<a>标签，它可是超级有用的哦！它可以用来创建指向其他网页的链接。这样一来，不仅能丰富你的页面内容，还能帮助搜索引擎更好地了解页面之间的关系呢！而且，锚文本也非常重要，它应该包含所链接页面的主要关键字，这样才能更好地优化你的SEO哦！所以，记得在<a>标签中，添加准确且丰富的锚文本，让你的页面更加突出吧！

例子：

<a href="https://www.arryblog.com/guide/standard/seo.html">SEO 搜索引擎网页代码优化
</a>

6、页脚标签

来聊一下<footer>标签，这里可以成为你网站一个非常重要的名片，也是给搜索引擎更好认识你网站价值的关键！！它可以用来定义网页的页脚部分。通过在页脚中添加相关信息，可以让搜索引擎更好地了解网站及其内容。另外，页脚也可以包含指向相关页面和社交媒体资料的链接，这样一来，不仅可以增加页面的互动性，还能帮助优化你的SEO哦！所以，记得在页面的底部添加一个漂亮而实用的<footer>标签吧！

例子：

<footer>
<p>Copyright ? arryblog.com</p>
<a href="https://www.icodingedu.com">艾编程商城</a>
<a href="https://www.arryblog.com/plan/">前端新手30天挑战计划</a>
</footer>

7、架构标记

架构标记是一种结构化数据，可以让搜索引擎更好地理解网页内容。它可以提供页面类型、作者、日期、位置等额外信息。添加架构标记可以提高页面在SERP中的可见度和相关性，从而提高点击率，让您的网站更具吸引力。

例子：

<div itemscope itemtype="http://schema.org/Recipe">
 <h1 itemprop="name">Recipe Title Here</h1>
 <img itemprop="image" src="image.jpg">
 <p itemprop="description">Recipe description here.</p>
 <ul>
   <li itemprop="recipeIngredient">Ingredient 1</li>
   <li itemprop="recipeIngredient">Ingredient 2</li>
 </ul>
 <ul>
   <li itemprop="recipeInstructions">Step 1</li>
   <li itemprop="recipeInstructions">Step 2</li>
 </ul>
</div>

8、列表标签

列表标签可用于在网页上创建项目列表。总共有三种列表标签，<ul>和 <ol>分别用于无序列表和有序列表，<li> 用于列出单个项目。列表有助于组织页面内容，使用户更容易浏览和阅读。

例子：

<ul>
 <li>List Item 1</li>
 <li>List Item 2</li>
</ul>

<ol>
 <li>List Item 1</li>
 <li>List Item 2</li>
</ol>

9、规范标签

Canonical标签用于指示同一页面的多个版本中的首选 URL。它有助于解决重复内容的问题，并确保搜索引擎正确索引和排名首选页面。规范标签应添加到首选 URL 的头部。

例子：

<link rel="canonical" href="https://www.arryblog.com/guide/vscode.html">

10、移动端友好标签

移动友好性是 SEO 的一个关键因素，因为越来越多的用户通过移动设备访问网络。为了提供更好的用户体验，您需要确保您的网页在移动设备上能够正常显示并具有良好的响应性。这包括使用移动友好的设计和布局、优化页面加载速度、调整字体和按钮大小等。通过提高移动友好性，您可以为用户提供更好的体验，并在移动搜索结果中获得更高的排名。

例子：

< meta  name="viewport"  content="width=device-width, initial-scale=1" >
< link  rel="stylesheet"  href="mobile.css"  media="screen and (max-width: 768px)" >

总结

简单易懂的 HTML 标签使用可以显著提高您网站的搜索引擎优化，让您的网站在搜索结果中更具优势。在这里，我为您总结了前 10 个必要的 HTML 标签，让您的网站更友好、更容易被搜索引擎和用户发现，让您的网站领先于竞争对手。

记住，使用正确的标签，避免滥用标签或不相关关键字。除此之外，您需要持续更新网站内容，提高用户体验，才能获得持久的 SEO 成功。

温馨提示：最近很多人都在聊前端，的确现实环境中很多人求职，没讲到企业回应，所以就出现了“前端已死”的话题，那么今天我想借助SEO这篇文章聊的是，前端为何不能是复合型人才，如果你懂得一点SEO优化，能够快速让企业获得流量获得用户？如果你懂得产品，会设计营销专辑到制作营销专题，如果你懂得一点美工设计……那是不是更好！

当然前提还是要把前端学好！

如果你才开始学习前端，那么就可以按照标准规范进行做开发，可以让你得到更好的收获！我们这边有一套课程，就是严格按照代码规范和SEO优化标准做的课程体系，包含了html+css+云端部署的课程体系，可以通过钉钉群里学习，有问题在群里可以提问，同时每节课还安排有作业，配套有阶段项目练习和综合项目实战，目的是帮助大家夯实前端基础，轻松入门到前端行业。

为帮助到一部分同学不走弯路，真正达到一线互联网大厂前端项目研发要求，首次实力宠粉，打造了《30天挑战学习计划》，内容如下：

HTML/HTML5，CSS/CSS3，JavaScript，真实企业项目开发，云服务器部署上线，从入门到精通

PC端项目开发（1个）
移动WebApp开发（2个）
多端响应式开发（1个）

共4大完整的项目开发！一行一行代码带领实践开发，实际企业开发怎么做我们就是怎么做。从学习一开始就进入工作状态，省得浪费时间。

从学习一开始就同步使用 Git 进行项目代码的版本的管理，Markdown 记录学习笔记，包括真实大厂项目的开发标准和设计规范，命名规范，项目代码规范，SEO优化规范

从蓝湖UI设计稿到 PC端，移动端，多端响应式开发项目开发

真机调试，云服务部署上线；
Linux环境下的 Nginx 部署，Nginx 性能优化；
Gzip 压缩，HTTPS 加密协议，域名服务器备案，解析；
企业项目域名跳转的终极解决方案，多网站、多系统部署；
使用使用 Git 在线项目部署；

这些内容在《30天挑战学习计划》中每一个细节都有讲到，包含视频+图文教程+项目资料素材等。只为实力宠粉，真正一次掌握企业项目开发必备技能，不走弯路！

过程中【不涉及】任何费用和利益，非诚勿扰。

详细进入了解：30 天挑战学习计划 Web 前端从入门到实战 | arry老师的博客-艾编程

、HTML基本信息

注释：

DOCTYPE：就是告诉浏览器，我们要使用什么规范

head：网页头部标签

title：网页标题
meta：描述性标签，描述网站的信息，用来做SEO

charset="UTF-8"
name="keyword" content=""关键词
name="descrisption" content=""描述

body：代表网页主题

二、网页基本标签

标题标签

<h1>一级标签</h1>一直到6级标签

段落标签

<p>段落标签</p>

换行标签

<br/> /是闭合的意思，单标签，闭不闭合都行

水平线标签

<hr/>

字体样式标签

<strong>粗体</strong>
<em>斜体</em>

注释

特殊字符

空格 ---->一个空格
大于号 >
小于号<
版权符号©

特殊符号就是 & xxx ;

三、图像标签

src 图像地址必填
alt 图像的代替文字(找不到图片的时候显示) 必填
title 鼠标悬停提示文字
width 图像的宽度
height 图像的高度

注意：../ 代表上一级目录

四、链接标签

文本链接

<a href="path" target="目标窗口位置">链接文本或图像</a>

href 链接路径，要跳转带那个位置必填
target链接在哪个窗口打开：常用值_self 当前窗口（默认的）、_blank 新窗口

图像链接：就是嵌套图片标签

页面间链接

从一个页面链接到另一个页面

锚链接

第一步需要一个标记使用name做标记
第二步跳转到标记使用#标记
<a name="top" ></a>
<a href="#top"></a>
上面是页面内的跳转

<a name="down"></a>
<a href="第一个页面的path#down"></a>
页面间的跳转

功能性链接

邮件链接：mailto： <a href="mailto:邮箱"></a>点击后会打开邮箱
qq链接：在qq推广工具里面的

五、行内元素和块元素

块元素

无论内容多少，该元素独占一行
p、h1-h6

行内元素

内容撑开宽度、左右都是行内元素的可以排在一起
a、strong、em...

六、列表

什么是列表：就是一种展示方式

有序列表

<ol> <li></li> </ol>

无序列表

<ul> <li></li> </ul>

自定义列表

<dl>
    <dt></dt> 标题
    <dd></dd> 选项
    <dd></dd>
    <dd></dd>
</dl>

七、表格

为什么使用表格

简单通用
结构稳定

基本结构

单元格
行
列
跨行
跨列

<table border="1px" 边框>表格标签
    <tr>
        <td></td>列标签
        <td></td>
        <td></td>
    </tr>行标签 这代表一行
</table>

跨列：使用colspan="夸的列数" <td colspan="4">

跨行：使用rowspan="夸的行数" <td rowspan="4">

八、视频和音频

视频元素

video
<video src="path" controls autoplay></video>
src:资源路径
controls控制条
autoplay自动播放

音频元素

audio
<audio src="" controls autoplay></audio>

九、页面结构分析

元素名	描述
header	标题头部区域的内容(用于页面或页面中的一块区域)
footer	标记脚部区域的内容（用于整个页面或页面的一块区域）
section	web页面中的一块独立区域
atricle	独立的文章内容
aside	相关内容或应用(常用于侧边栏)
nav	导航类辅助内容

十、iframe内联框架

src必填
width
heigth
name标记
name的使用
<iframe src="" name="hello" frameborder="0" width="1000px" heigth="800px"></iframe>

<a href="path" target="hello"></a>
点击超连接后，会在内联框架里显示这个页面

十一、表单

表单：form

<form method="post|get" action="result.hetml">
    <input />
</form>

method 规定如何发送表单数据常用psot、get
action 表示向何处发送表单数据，把表单的数据发送给那个地方

get方式提交：我们可以在url中看到我们提交的信息，不安全，但高效

post方式提交：比较安全，可以传输大文件

表单元素格式

属性	说明
type	指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image、button默认为text
name	指定表单元素的名称必填，用来后台读取
value	元素的初试值。type为radio时必须指定一个值
size	指定元素的初始宽度。当type为text时或者password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength	type为txet或password时，输入的最大字符数
cheaked	type为radio或cheackbox时，指定按钮是否被选中

单选框

input type="radio"
value 单选框的值
name ：表示组，name一样一次只能选一个，name不一样可以选多个
checked默认选中的

多选框

input type="checkbox"
value="sleep"
name="hooby"
checked默认选中的
<input type="checkbox" name="sleep" value="slppe" checked/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
多选框的结果是以数组的形式返回的

按钮

<input type="button" name="btn1" value="点击" />普通按钮
<input type="image" src="点击跳转的path"/>图片按钮
<input type="submit"/>提交按钮
<input type="reset"/>重置按钮

下拉框

<select name="列表名称">
    <option value="选项的值" select>中国</option>
    <option value="选项的值">中国</option>
    <option value="选项的值">中国</option>
    <option value="选项的值">中国</option>
    <option value="选项的值">中国</option>
</select>
提交的格式就是列表名称和value

selected 默认选择

文本域

<textarea name="name" cols="列数" rows="行数">文本内容</textarea>

文件域

<input type="file" name="files"/>
<input type="button" value="提交"/>

邮件验证

<input type="email" name="youjian">

URL

<input type="url" name="url">

数字验证

<input type="number" name="num" max="100" min="0" step="10">

滑块

<input type="range" max="100" min="0">

搜索

<input type="search" name="search">

十二、表单的应用

隐藏域 hidden

<input type="text" id="mark" hidden>

只读 readonly

<input type="text" id="mark" readonly>

禁用 disabled

<input type="text" id="mark" disabled>

增强鼠标可用性

<label for="mark">点击</label>
<input type="text" id="mark">

十三、表单初级验证

为什么要进行表单验证：缓解服务器压力、保证数据安全

提示信息

placeholder="提示信息" 在输入框上

非空判断

required

正则表达式验证

pattern
<input type="text" name="mail" pattern="正则表达式">

高级验证使用js

个完整的seo优化怎么做?

网上的seo优化教程一大堆，今天把一个完整的seo优化步骤和大家分享。

首先搭建网站要有服务器或虚拟主机，注意：速度快的服务器或虚拟主机，尤其手机端百度已经要求网站加在速度在3秒以内，这是硬性规定。

一、搭建网站：网站搭建的第一步要找关键词，一般常用战神关键词工具

找到关键词后，再部署网站页面和页面的结构，用树桩结构还是网状结构呢?

这里我建议如果是一般企业站用树桩结构，而对于流量站点建议用树桩结构。也要注意目录层级不要超过3层，url地址不要过长哦。

网站搭建起来后。就要进行下面的seo优化检测：

二、网站关键词密度检查：密度没有硬性规定，建议值在2%-8%。建议一定不要超过10%哦，如果关键词排名不理想，首先检测就是关键词密度。

三、死链接检测：死链接是对蜘蛛非常不友好的。

四、nofollow标签的使用：网页内的站外链接必须增加nofollow标签，防止权重传递出去。

五、重复链接检查：重复链接过多有可能会导致降权，但是网上现在没有这样的检查工具，如果有知道这个工具的，请在下方评论和大家分享哦。

六、静态页面加权设置：动态页面不利于蜘蛛对内容的抓取，所以我们网站首选静态页面。但很多建站程序往往某些页面就是动态的，但一般这类页面是不需要排名的页面。有两种解决方法：

第一就是用nofollow禁止权重的传递，比如：练习我们，广告合作，给我留言等。还有一个方法用robots文件屏蔽掉蜘蛛的抓取。

七、url唯一性：一个页面只允许一个url。如果有2个或多个url那这个页面权重就会分散，蜘蛛搞不清到底给哪个url排名，所以就有了301重定向。权重集中这一个url。

八、网站地图：对网站seo优化来说，网站地图还是必须要有的。两种：html地图 xml地图都要有。html地图一般放在页面底部，xml地图通过百度站长后台提交给百度。

九、图片alt优化：这个更要说说。网页内容中的图片要添加alt。alt标签包含关键词，而且alt标签要携带宽高属性。

十、tdk标签的撰写：tdk无论是现在还是以后。一直会是seo网站优化里面最重要的一环。

十一、导航优化：导航要清晰，最好有几个分类能包含关键词，而且“面包屑导航”也要做好

十二、精简代码：这个就需要技术能力了。比如图片、css、js外部调用。

十三、复制内容：内容丰富度，是否原创，是不是时效性信息等等

十四、蜘蛛陷阱：常见的flash 框架 js 登录注册等等

以上是站内优化，下面说说站外优化

网站搭建好并且上面站内的基础优化做完，再做站外优化，也就是发外链

发外链渠道：

友情链接

软文

目录提交

独立博客

论坛外链

黄页网站

提交收藏

分类信息

微博推广

sns推广

b2b平台

一个完整的seo优化步骤结束，有补充的欢迎下方留言。

在线咨询

上一篇：小白都觉得好用的CSS布局属性Grid
下一篇：大神为什么比你优秀，靠的就是这些外挂网站，看看你都知

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商