為一位企業(yè)主或網(wǎng)站管理員,相信你一定聽過SEO,也就是搜索引擎優(yōu)化。這個(gè)東西的作用就是幫助你的網(wǎng)站在相關(guān)關(guān)鍵字的搜索引擎結(jié)果頁面 (SERP) 上排名更靠前。而想要做到更好的SEO,就必須得對(duì)你網(wǎng)站的HTML代碼有個(gè)透徹的理解。
所謂HTML,就是超文本標(biāo)記語言。這個(gè)東西是用來創(chuàng)建網(wǎng)頁的編程語言。HTML代碼主要是由不同的元素或標(biāo)簽組成,用來定義網(wǎng)頁的結(jié)構(gòu)和內(nèi)容。只要用對(duì)了HTML標(biāo)簽,就可以大幅提升你網(wǎng)站的搜索引擎優(yōu)化啦!因?yàn)樗阉饕嫠惴ǘ际怯眠@些標(biāo)簽來理解你頁面的內(nèi)容滴~
今天我們要聊的話題是:讓你的網(wǎng)站 SEO 更上一層樓的前10個(gè)HTML標(biāo)記!相信你們聽到這個(gè),肯定都迫不及待地想知道是哪些標(biāo)記了吧!那就跟我一起來看看這10個(gè)HTML標(biāo)記的代碼和如何有效地使用它們吧!
要讓你的網(wǎng)站在搜索引擎里更出風(fēng)頭,<title> 標(biāo)簽可是超重要的哦!因?yàn)樗阉饕婢褪峭ㄟ^這個(gè)標(biāo)簽來展示你的網(wǎng)頁標(biāo)題的。所以,一定要在<title> 標(biāo)簽里面包含頁面的主要關(guān)鍵字,這樣才能更好地優(yōu)化你的SEO哦~
<head>
<title>最佳 SEO 技巧 | 艾編程博客</title>
</head>
寶貝們,要想在搜索引擎里面脫穎而出,<meta name="description"> 標(biāo)簽可是必不可少的哦!它可以提供網(wǎng)頁的簡(jiǎn)短描述,讓搜索引擎在搜索結(jié)果中展示哦所以,千萬不要忘了在這個(gè)標(biāo)簽里面包含頁面的主要關(guān)鍵字,這樣才能更好地優(yōu)化你的SEO呢。
<head>
<meta name="description" content="學(xué)習(xí)最好的 SEO 技巧和技巧,讓您的網(wǎng)站在搜索引擎中排名更高。">
</head>
<h1>標(biāo)簽可是超級(jí)重要的哦!它可以用來定義網(wǎng)頁的主標(biāo)題,幫助搜索引擎更好地理解頁面的主要主題。當(dāng)然,在 <h1>標(biāo)簽中也要包含頁面的主要關(guān)鍵字才能更好地優(yōu)化SEO哦!不過要記得,標(biāo)題標(biāo)簽有六個(gè),按照重要性降序使用。比如說,H1用于頁面的主標(biāo)題,H2用于副標(biāo)題,H3用于子標(biāo)題,這樣就可以更好地優(yōu)化你的頁面哦!`
< h1 >最佳 SEO 技巧</ h1 >
圖像替代文本img標(biāo)簽可是非常有用的哦!它可以用來描述網(wǎng)頁上圖像的內(nèi)容。如果無法顯示圖像,它會(huì)顯示為文本。而且,它還能幫助搜索引擎更好地了解圖像的上下文和相關(guān)性呢!替代文本應(yīng)該是描述性的,包括主要關(guān)鍵字,并且長(zhǎng)度不要超過 125 個(gè)字符哦!這樣可以更好地優(yōu)化你的SEO,讓你的頁面在搜索引擎里面更加突出!
<img src="image.jpg" alt="最佳 SEO 技巧">
今天我們來聊聊<a>標(biāo)簽,它可是超級(jí)有用的哦!它可以用來創(chuàng)建指向其他網(wǎng)頁的鏈接。這樣一來,不僅能豐富你的頁面內(nèi)容,還能幫助搜索引擎更好地了解頁面之間的關(guān)系呢!而且,錨文本也非常重要,它應(yīng)該包含所鏈接頁面的主要關(guān)鍵字,這樣才能更好地優(yōu)化你的SEO哦!所以,記得在<a>標(biāo)簽中,添加準(zhǔn)確且豐富的錨文本,讓你的頁面更加突出吧!
<a href="https://www.arryblog.com/guide/standard/seo.html">SEO 搜索引擎網(wǎng)頁代碼優(yōu)化
</a>
來聊一下<footer>標(biāo)簽,這里可以成為你網(wǎng)站一個(gè)非常重要的名片,也是給搜索引擎更好認(rèn)識(shí)你網(wǎng)站價(jià)值的關(guān)鍵??!它可以用來定義網(wǎng)頁的頁腳部分。通過在頁腳中添加相關(guān)信息,可以讓搜索引擎更好地了解網(wǎng)站及其內(nèi)容。另外,頁腳也可以包含指向相關(guān)頁面和社交媒體資料的鏈接,這樣一來,不僅可以增加頁面的互動(dòng)性,還能幫助優(yōu)化你的SEO哦!所以,記得在頁面的底部添加一個(gè)漂亮而實(shí)用的<footer>標(biāo)簽吧!
<footer>
<p>Copyright ? arryblog.com</p>
<a href="https://www.icodingedu.com">艾編程商城</a>
<a href="https://www.arryblog.com/plan/">前端新手30天挑戰(zhàn)計(jì)劃</a>
</footer>
架構(gòu)標(biāo)記是一種結(jié)構(gòu)化數(shù)據(jù),可以讓搜索引擎更好地理解網(wǎng)頁內(nèi)容。它可以提供頁面類型、作者、日期、位置等額外信息。添加架構(gòu)標(biāo)記可以提高頁面在SERP中的可見度和相關(guān)性,從而提高點(diǎn)擊率,讓您的網(wǎng)站更具吸引力。
<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>
列表標(biāo)簽可用于在網(wǎng)頁上創(chuàng)建項(xiàng)目列表。總共有三種列表標(biāo)簽,<ul>和 <ol>分別用于無序列表和有序列表,<li> 用于列出單個(gè)項(xiàng)目。列表有助于組織頁面內(nèi)容,使用戶更容易瀏覽和閱讀。
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
</ul>
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
</ol>
Canonical標(biāo)簽用于指示同一頁面的多個(gè)版本中的首選 URL。它有助于解決重復(fù)內(nèi)容的問題,并確保搜索引擎正確索引和排名首選頁面。規(guī)范標(biāo)簽應(yīng)添加到首選 URL 的頭部。
<link rel="canonical" href="https://www.arryblog.com/guide/vscode.html">
移動(dòng)友好性是 SEO 的一個(gè)關(guān)鍵因素,因?yàn)樵絹碓蕉嗟挠脩敉ㄟ^移動(dòng)設(shè)備訪問網(wǎng)絡(luò)。為了提供更好的用戶體驗(yàn),您需要確保您的網(wǎng)頁在移動(dòng)設(shè)備上能夠正常顯示并具有良好的響應(yīng)性。這包括使用移動(dòng)友好的設(shè)計(jì)和布局、優(yōu)化頁面加載速度、調(diào)整字體和按鈕大小等。通過提高移動(dòng)友好性,您可以為用戶提供更好的體驗(yàn),并在移動(dòng)搜索結(jié)果中獲得更高的排名。
< meta name="viewport" content="width=device-width, initial-scale=1" >
< link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)" >
簡(jiǎn)單易懂的 HTML 標(biāo)簽使用可以顯著提高您網(wǎng)站的搜索引擎優(yōu)化,讓您的網(wǎng)站在搜索結(jié)果中更具優(yōu)勢(shì)。在這里,我為您總結(jié)了前 10 個(gè)必要的 HTML 標(biāo)簽,讓您的網(wǎng)站更友好、更容易被搜索引擎和用戶發(fā)現(xiàn),讓您的網(wǎng)站領(lǐng)先于競(jìng)爭(zhēng)對(duì)手。
記住,使用正確的標(biāo)簽,避免濫用標(biāo)簽或不相關(guān)關(guān)鍵字。除此之外,您需要持續(xù)更新網(wǎng)站內(nèi)容,提高用戶體驗(yàn),才能獲得持久的 SEO 成功。
溫馨提示:最近很多人都在聊前端,的確現(xiàn)實(shí)環(huán)境中很多人求職,沒講到企業(yè)回應(yīng),所以就出現(xiàn)了“前端已死”的話題,那么今天我想借助SEO這篇文章聊的是,前端為何不能是復(fù)合型人才,如果你懂得一點(diǎn)SEO優(yōu)化,能夠快速讓企業(yè)獲得流量獲得用戶?如果你懂得產(chǎn)品,會(huì)設(shè)計(jì)營(yíng)銷專輯到制作營(yíng)銷專題,如果你懂得一點(diǎn)美工設(shè)計(jì)……那是不是更好!
當(dāng)然前提還是要把前端學(xué)好!
如果你才開始學(xué)習(xí)前端,那么就可以按照標(biāo)準(zhǔn)規(guī)范進(jìn)行做開發(fā),可以讓你得到更好的收獲!我們這邊有一套課程,就是嚴(yán)格按照代碼規(guī)范和SEO優(yōu)化標(biāo)準(zhǔn)做的課程體系,包含了html+css+云端部署的課程體系,可以通過釘釘群里學(xué)習(xí),有問題在群里可以提問,同時(shí)每節(jié)課還安排有作業(yè),配套有階段項(xiàng)目練習(xí)和綜合項(xiàng)目實(shí)戰(zhàn),目的是幫助大家夯實(shí)前端基礎(chǔ),輕松入門到前端行業(yè)。
為幫助到一部分同學(xué)不走彎路,真正達(dá)到一線互聯(lián)網(wǎng)大廠前端項(xiàng)目研發(fā)要求,首次實(shí)力寵粉,打造了《30天挑戰(zhàn)學(xué)習(xí)計(jì)劃》,內(nèi)容如下:
HTML/HTML5,CSS/CSS3,JavaScript,真實(shí)企業(yè)項(xiàng)目開發(fā),云服務(wù)器部署上線,從入門到精通
共4大完整的項(xiàng)目開發(fā) !一行一行代碼帶領(lǐng)實(shí)踐開發(fā),實(shí)際企業(yè)開發(fā)怎么做我們就是怎么做。從學(xué)習(xí)一開始就進(jìn)入工作狀態(tài),省得浪費(fèi)時(shí)間。
從學(xué)習(xí)一開始就同步使用 Git 進(jìn)行項(xiàng)目代碼的版本的管理,Markdown 記錄學(xué)習(xí)筆記,包括真實(shí)大廠項(xiàng)目的開發(fā)標(biāo)準(zhǔn)和設(shè)計(jì)規(guī)范,命名規(guī)范,項(xiàng)目代碼規(guī)范,SEO優(yōu)化規(guī)范
從藍(lán)湖UI設(shè)計(jì)稿 到 PC端,移動(dòng)端,多端響應(yīng)式開發(fā)項(xiàng)目開發(fā)
這些內(nèi)容在《30天挑戰(zhàn)學(xué)習(xí)計(jì)劃》中每一個(gè)細(xì)節(jié)都有講到,包含視頻+圖文教程+項(xiàng)目資料素材等。只為實(shí)力寵粉,真正一次掌握企業(yè)項(xiàng)目開發(fā)必備技能,不走彎路 !
過程中【不涉及】任何費(fèi)用和利益,非誠(chéng)勿擾 。
詳細(xì)進(jìn)入了解:30 天挑戰(zhàn)學(xué)習(xí)計(jì)劃 Web 前端從入門到實(shí)戰(zhàn) | arry老師的博客-艾編程
注釋:<!-- -->
DOCTYPE:就是告訴瀏覽器,我們要使用什么規(guī)范
head:網(wǎng)頁頭部標(biāo)簽
body:代表網(wǎng)頁主題
標(biāo)題標(biāo)簽
段落標(biāo)簽
換行標(biāo)簽
水平線標(biāo)簽
字體樣式標(biāo)簽
注釋
特殊字符
特殊符號(hào)就是 & xxx ;
<img src="path" alt="文字" title="text" width="x" heigth="y" />
注意:../ 代表上一級(jí)目錄
文本鏈接
<a href="path" target="目標(biāo)窗口位置">鏈接文本或圖像</a>
圖像鏈接:就是嵌套圖片標(biāo)簽
頁面間鏈接
錨鏈接
功能性鏈接
塊元素
行內(nèi)元素
什么是列表:就是一種展示方式
有序列表
無序列表
自定義列表
<dl>
<dt></dt> 標(biāo)題
<dd></dd> 選項(xiàng)
<dd></dd>
<dd></dd>
</dl>
為什么使用表格
基本結(jié)構(gòu)
<table border="1px" 邊框>表格標(biāo)簽
<tr>
<td></td>列標(biāo)簽
<td></td>
<td></td>
</tr>行標(biāo)簽 這代表一行
</table>
跨列:使用colspan="夸的列數(shù)" <td colspan="4">
跨行:使用rowspan="夸的行數(shù)" <td rowspan="4">
視頻元素
音頻元素
元素名 | 描述 |
header | 標(biāo)題頭部區(qū)域的內(nèi)容(用于頁面或頁面中的一塊區(qū)域) |
footer | 標(biāo)記腳部區(qū)域的內(nèi)容(用于整個(gè)頁面或頁面的一塊區(qū)域) |
section | web頁面中的一塊獨(dú)立區(qū)域 |
atricle | 獨(dú)立的文章內(nèi)容 |
aside | 相關(guān)內(nèi)容或應(yīng)用(常用于側(cè)邊欄) |
nav | 導(dǎo)航類輔助內(nèi)容 |
<iframe src="path" name="mainFrame"></iframe>
表單:form
<form method="post|get" action="result.hetml">
<input />
</form>
get方式提交:我們可以在url中看到我們提交的信息,不安全,但高效
post方式提交:比較安全,可以傳輸大文件
表單元素格式
屬性 | 說明 |
type | 指定元素的類型。text、password、checkbox、radio、submit、reset、file、hidden、image、button默認(rèn)為text |
name | 指定表單元素的名稱 必填,用來后臺(tái)讀取 |
value | 元素的初試值。type為radio時(shí)必須指定一個(gè)值 |
size | 指定元素的初始寬度。當(dāng)type為text時(shí)或者password時(shí),表單元素的大小以字符為單位。對(duì)于其他類型,寬度以像素為單位 |
maxlength | type為txet或password時(shí),輸入的最大字符數(shù) |
cheaked | type為radio或cheackbox時(shí),指定按鈕是否被選中 |
單選框
多選框
按鈕
<input type="button" name="btn1" value="點(diǎn)擊" />普通按鈕
<input type="image" src="點(diǎn)擊跳轉(zhuǎn)的path"/>圖片按鈕
<input type="submit"/>提交按鈕
<input type="reset"/>重置按鈕
下拉框
<select name="列表名稱">
<option value="選項(xiàng)的值" select>中國(guó)</option>
<option value="選項(xiàng)的值">中國(guó)</option>
<option value="選項(xiàng)的值">中國(guó)</option>
<option value="選項(xiàng)的值">中國(guó)</option>
<option value="選項(xiàng)的值">中國(guó)</option>
</select>
提交的格式就是列表名稱和value
文本域
<textarea name="name" cols="列數(shù)" rows="行數(shù)">文本內(nèi)容</textarea>
文件域
<input type="file" name="files"/>
<input type="button" value="提交"/>
郵件驗(yàn)證
<input type="email" name="youjian">
URL
<input type="url" name="url">
數(shù)字驗(yàn)證
<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>
增強(qiáng)鼠標(biāo)可用性
<label for="mark">點(diǎn)擊</label>
<input type="text" id="mark">
為什么要進(jìn)行表單驗(yàn)證:緩解服務(wù)器壓力、保證數(shù)據(jù)安全
提示信息
非空判斷
正則表達(dá)式驗(yàn)證
高級(jí)驗(yàn)證使用js
個(gè)完整的seo優(yōu)化怎么做?
網(wǎng)上的seo優(yōu)化教程一大堆,今天把一個(gè)完整的seo優(yōu)化步驟和大家分享。
首先搭建網(wǎng)站要有服務(wù)器或虛擬主機(jī),注意:速度快的服務(wù)器或虛擬主機(jī),尤其手機(jī)端百度已經(jīng)要求網(wǎng)站加在速度在3秒以內(nèi),這是硬性規(guī)定。
一、搭建網(wǎng)站:網(wǎng)站搭建的第一步要找關(guān)鍵詞,一般常用戰(zhàn)神關(guān)鍵詞工具
找到關(guān)鍵詞后,再部署網(wǎng)站頁面和頁面的結(jié)構(gòu),用樹樁結(jié)構(gòu)還是網(wǎng)狀結(jié)構(gòu)呢?
這里我建議如果是一般企業(yè)站用樹樁結(jié)構(gòu),而對(duì)于流量站點(diǎn)建議用樹樁結(jié)構(gòu)。也要注意目錄層級(jí)不要超過3層,url地址不要過長(zhǎng)哦。
網(wǎng)站搭建起來后。就要進(jìn)行下面的seo優(yōu)化檢測(cè):
二、網(wǎng)站關(guān)鍵詞密度檢查:密度沒有硬性規(guī)定,建議值在2%-8%。建議一定不要超過10%哦,如果關(guān)鍵詞排名不理想,首先檢測(cè)就是關(guān)鍵詞密度。
三、死鏈接檢測(cè):死鏈接是對(duì)蜘蛛非常不友好的。
四、nofollow標(biāo)簽的使用:網(wǎng)頁內(nèi)的站外鏈接必須增加nofollow標(biāo)簽,防止權(quán)重傳遞出去。
五、重復(fù)鏈接檢查:重復(fù)鏈接過多有可能會(huì)導(dǎo)致降權(quán),但是網(wǎng)上現(xiàn)在沒有這樣的檢查工具,如果有知道這個(gè)工具的,請(qǐng)?jiān)谙路皆u(píng)論和大家分享哦。
六、靜態(tài)頁面加權(quán)設(shè)置:動(dòng)態(tài)頁面不利于蜘蛛對(duì)內(nèi)容的抓取,所以我們網(wǎng)站首選靜態(tài)頁面。但很多建站程序往往某些頁面就是動(dòng)態(tài)的,但一般這類頁面是不需要排名的頁面。有兩種解決方法:
第一就是用nofollow禁止權(quán)重的傳遞,比如:練習(xí)我們,廣告合作,給我留言等。還有一個(gè)方法用robots文件屏蔽掉蜘蛛的抓取。
七、url唯一性:一個(gè)頁面只允許一個(gè)url。如果有2個(gè)或多個(gè)url那這個(gè)頁面權(quán)重就會(huì)分散,蜘蛛搞不清到底給哪個(gè)url排名,所以就有了301重定向。權(quán)重集中這一個(gè)url。
八、網(wǎng)站地圖:對(duì)網(wǎng)站seo優(yōu)化來說,網(wǎng)站地圖還是必須要有的。兩種:html地圖 xml地圖都要有。html地圖一般放在頁面底部,xml地圖通過百度站長(zhǎng)后臺(tái)提交給百度。
九、圖片alt優(yōu)化:這個(gè)更要說說。網(wǎng)頁內(nèi)容中的圖片要添加alt。alt標(biāo)簽包含關(guān)鍵詞,而且alt標(biāo)簽要攜帶寬高屬性。
十、tdk標(biāo)簽的撰寫:tdk無論是現(xiàn)在還是以后。一直會(huì)是seo網(wǎng)站優(yōu)化里面最重要的一環(huán)。
十一、導(dǎo)航優(yōu)化:導(dǎo)航要清晰,最好有幾個(gè)分類能包含關(guān)鍵詞,而且“面包屑導(dǎo)航”也要做好
十二、精簡(jiǎn)代碼:這個(gè)就需要技術(shù)能力了。比如圖片、css、js外部調(diào)用。
十三、復(fù)制內(nèi)容:內(nèi)容豐富度,是否原創(chuàng),是不是時(shí)效性信息等等
十四、蜘蛛陷阱:常見的flash 框架 js 登錄 注冊(cè)等等
以上是站內(nèi)優(yōu)化,下面說說站外優(yōu)化
網(wǎng)站搭建好并且上面站內(nèi)的基礎(chǔ)優(yōu)化做完,再做站外優(yōu)化,也就是發(fā)外鏈
發(fā)外鏈渠道:
友情鏈接
軟文
目錄提交
獨(dú)立博客
論壇外鏈
黃頁網(wǎng)站
提交收藏
分類信息
微博推廣
sns推廣
b2b平臺(tái)
一個(gè)完整的seo優(yōu)化步驟結(jié)束,有補(bǔ)充的歡迎下方留言。
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。