機器可讀HTML5語義標記的SEO優勢

HTML5 · 發表 2019-05-09 22:43:50

摘要：機器可讀HTML5語義標記的SEO優勢語義HTML5為我們提供了改進網站和優化搜尋引擎的機會。我們可以通過使用機器可讀的語義HTML5元素來描述頁面輪廓，從而充分利用這些機會。特別命名的容器可以幫助搜尋引擎和瀏覽器更輕鬆地識別我們的頁面排列方式。例如，<header>現...

機器可讀HTML5語義標記的SEO優勢

語義HTML5為我們提供了改進網站和優化搜尋引擎的機會。我們可以通過使用機器可讀的語義HTML5元素來描述頁面輪廓，從而充分利用這些機會。特別命名的容器可以幫助搜尋引擎和瀏覽器更輕鬆地識別我們的頁面排列方式。

例如，<header>現在是它自己的元素<nav>，依此類推。您可以使用這些術語描述頁面大綱。順便說一句，重要的是不要混淆<header>標題容器（<h1>）。這些也有我們應該遵循的語義規則; 特別是他們的相對水平，如下所示。

以下是HTML5元素的SEO機會以及使用它們的方式和原因。

正版文章

也許最重要的語義HTML5元素是<article>。這可以通過這樣的方式使用，即將理想內容解析為螢幕閱讀器和閱讀器檢視，搜尋引擎將在頁面上找到針對唯一內容的硬編碼訊號。您可以通過切換閱讀器檢視來測試如何使用瀏覽器中載入的頁面。

如果您沒有看到切換開關或<article>頁面程式碼中沒有容器，則根本沒有獲得該選項，或者它不會單獨載入任何內容。如果您在閱讀器檢視中獲得內容，那麼網站管理員將在單個<article>容器中包含該內容。作為開發人員，我們可以直接針對這些容器設定樣式。

多篇文章

雖然<article>每頁有多個元素在語法上不正確，但它仍然不是一個好主意。您不會以這種方式獲得閱讀器檢視選項，也沒有搜尋引擎優勢。對於列出帖子的部落格主頁，您可能會將每篇博文都視為“文章”，除了文章的摘錄不是真實的。

相反，請嘗試在<section>每個帖子摘要中使用語義正確的元素來收集相關詳細資訊。在這種情況下，<section>可以正確地巢狀為孩子<article>。<article>和之間的親子關係<section>可以顛倒過來，但除非情況合理，否則我們不會推薦它。

讓一個<article>頁面包含一個獨特的內容：

…

</ DIV>

</ NAV>

</報頭>

<頭>

<h1> Detlef Johnson的開發者搜尋引擎優化</ h1>

</報頭>

<h2>語義HTML5 </ h2>

<p>我們正在做HTML5語義元素……

技術債務

技術債務是程式碼庫中的老化程式碼，看起來替換或重構是沒有意義的。最常見的技術債務採用不具洞察力的變數名稱和資料庫列名稱的形式。

搜尋引擎優化從業者經常釋出反應他們自己痛苦的嵌入式技術債務的建議。實現語義HTML5可能有點像。

如果您使用與像JSX一個模板語言的現代化框架，一切都是一個<div>或一個<span>，重新命名為成功實施<main>，<article>，<header>，<nav>，<footer>，<aside>，<section>，可以令人望而生畏，這取決於你是如何在早期。等待的時間越長，技術債務就越多。

語義細節

我們中的許多人更喜歡跳過我們最初認為是編寫程式碼的過程的較小細節，特別是在截止日期之前。我們使用我們現有的操作以最小的努力釋出網站和應用程式，以提高工作效率。我們使用框架，任務執行器和工具來提高效率。我們一直在關注要學習的新事物。

我們也知道，未解決的細節可能會極大地增加技術債務。從長遠來看，你不希望以後同名所有的元素<div>和<span>元素。隨著時間的推移，您的程式碼將越來越難以識別。將程式碼組織成邏輯元素。使用HTML5提供的元素開箱即用。

語義SEO大綱

在搜尋引擎優化中，我們早就知道標題，特別是頂級<h1>標題。使它們與眾不同的是它們傳達的關於文件和部分概述的含義。使用元素<main>，<header>或者可能是一個或兩個<nav>容器（每個連結分組一個）來啟動文件大綱。然後你可能想用它<article>來包裝<header>標題，也許是它自己的獨特內容<footer>。

<頭>

<h1> Detlef Johnson的開發者搜尋引擎優化</ h1>

</報頭>

<h2>語義HTML5 </ h2>

<p>我們正在做HTML5語義元素……

<h3>文章和章節</ h3>

<p>文章和章節元素應至少有一個標題……

<p>標題為組織內容提供了6個級別…

每個人<section>應該至少有一個標題; 可能更多。您的標題將按照從<h1>標題到標題內容的降序順序概述最佳意義<h6>。把它們想象成子彈和輪廓水平。您實際上使用所有6個級別的情況很少見，但是當您需要它們時它們將隨時為您服務。

SEO語義學

你會聽到SEO社群的建議，<h1>每頁應該總是隻有一個元素，所有這些元素都是獨立的。這是可靠的建議。將其視為整個頁面標題。但是，擁有多個檔案肯定沒錯 – 這取決於您的文件大綱。你可以選擇撞了頂部的標題中<section>或者<aside>，您也可以顯示不同的<h1>桌面和移動裝置之間的內容。

使用標題

每個都<section>應該有一個標題，可能從第二級（<h2>）開始，然後從那裡開始，取決於該部分的內容。使用您的最佳判斷並從W3C驗證服務獲得提示。當你遺漏<section>標題時，這可以警告你。每個部分都可以有自己的<header>和<footer>，這是有道理的，當你想想看。

網站管理員提示：在網站範圍的頁首或頁尾中對僅限管理員的快速連結進行編碼，併為名稱值對插入規範頁面拼寫，以便您可以比使用書籤等其他工具更快地單擊並檢查頁面驗證。

以旁邊

至於<aside>，有人建議這些容器適用於不屬於由<article>廣告塊識別的獨特內容的相關內容。當然，這些對於頁面來說仍然是唯一的。該<aside>會很好地窩在<article>或者<section>，可以站在自己的，也是如此。該<aside>容器也可以有標題<header>，以及<footer>-這完全取決於你。

頁尾包裝

這應該足以讓您入門。當您準備好完成HTML5語義標記時，可以使用<footer>頁尾的元素及其在一個或多個<nav>元素中的站點範圍連結。除非另有說明，否則預設情況下，大多數語義HTML5元素都被視為塊元素。

使用以下樣本polyfill支援最舊的瀏覽器：

<！ – [if lt IE 9]>

使用document.createElement（ “物品”）;

使用document.createElement（ “留出”）;

使用document.createElement（ “頁尾”）;

使用document.createElement（ “頭”）;

使用document.createElement（ “NAV”）;

使用document.createElement（ “部分”）;

</ SCRIPT>

<！[ENDIF] – >

外賣：是描述性的

當您使用語義敏感<div>來將一大塊內容包裝為上述其中一個的分組時，最重要的是要問自己一個問題：我可以使用更具描述性的元素嗎？它適用於我的應用程式程式碼嗎？例如，我可以使用行類名稱或其他網格邏輯來設定它嗎？在您充分利用HTML5語義標記之前，您的答案應該是肯定的。

本文來自投稿，不代表窮思筆記立場，如若轉載，請註明出處：https://www.chons.cn/13526.html

機器可讀HTML5語義標記的SEO優勢

您可能也會喜歡…