前端加薪從熟悉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小時內與您取得聯系。

整合營銷服務商