谷歌外贸 On-Page SEO必须掌握的HTML代码

资讯2天前发布土豆

4 00

在之前关于网站建设系列的文章中，我们多次提到了“网页”这一关键词。

虽然我们已经解释了网页的基本概念，但仅仅了解其定义对后续的优化来说是不够的。因为在搜索引擎优化中，On-Page SEO（页面优化）是一个至关重要的环节。

理解网页的各个组成部分是做好页面优化的基础。只有了解这些内容，才能在后续的优化中进行有效调整，提升网站的搜索排名。

什么是网页？

网页是互联网上以超文本标记语言（HTML）编写的文档，用户可以通过网络浏览器访问和浏览。

网页通常包含文本、图像、链接、音频、视频等多媒体元素，以及用于交互的表单、按钮等控件，用于呈现信息和实现用户互动。

HTML（Hypertext Markup Language）是一种标记语言，主要用于构建网页及网页应用程序的结构和内容。它由一系列标签组成，这些标签用于定义网页中的各个元素及其在页面上的排列方式。

HTML使用标签 (tag) 来定义和标记文档中的各个元素，如标题、段落、链接、图像等。

这些标签通常由尖括号（<>）包围，并以开始标签和结束标签的形式存在。

HTML的结构

HTML的基本结构由以下部分组成：

DOCTYPE声明：指定文档类型，通常是<!DOCTYPE html>。
<html>元素：HTML文档的根元素，包含了整个文档的内容。
<head>元素：头部部分，用于定义文档的元数据，如标题、样式表和脚本等。
<body>元素：网页的主体部分，包含可见的内容，如标题、段落、图像等。

以下是一个简单的示例，展示一个HTML文件的基本结构：

<!DOCTYPE html>
<html>
<head>
  <title>我的网页</title>
</head>
<body>
  <h1>欢迎来到我的网页！</h1>
  <p>这是一个示例网页。</p>
</body>
</html>

您可以将上述代码保存为一个名为”index.html”的文件（或使用其他名称），并确保文件扩展名为”.html“。

然后，您可以在Web浏览器中打开该文件，它将呈现为一个简单的网页，显示标题和段落。

.html是HTML文件的常用扩展名，用于存储HTML代码。您可以使用文本编辑器（如 Notepad、Sublime、VSCode等）创建和编辑HTML文件。

HTML常用元素

HTML的元素和标签主要存在于<head>元素和<body>元素之内。接下来，我们将从上到下梳理一些常见的HTML标签：

`<head>`元素中常见的标签

<title>标签用于定义网页标题，它是SEO术语TDK（标题、描述、关键词）中的“标题（T）”，显示在浏览器的标题栏和标签页上。

<title>网页标题</title>

<title>标签是搜索引擎优化中一个非常重要的元素，它应包含相关关键词，并准确描述页面的内容。

<meta>：用于定义文档的元数据，如字符编码、关键词和描述等。

<meta charset="UTF-8">

<meta charset="UTF-8">标签位于<head>部分的最前面，用于声明网页所使用的字符编码方式。

charset属性定义了网页所使用的字符编码，常见的取值包括 UTF-8、GBK,GB2312等。

其中，UTF-8是一种广泛使用的字符编码，可以表示世界上几乎所有的字符。

请注意，<meta charset="UTF-8"> 应该尽可能早地放置在 <head> 中，确保浏览器能够正确解析网页内容的字符编码。这样可以避免出现乱码或字符显示错误的问题。

<meta name="keywords" content="关键词1, 关键词2, 关键词3">   
# 关键词标签，列出与页面相关的关键词。

<meta name="keywords">标签用于描述网页内容相关的关键词，旨在帮助搜索引擎理解网页的主题。

name="keywords"：此属性指定了元数据的类型为“关键词”。
content：此属性定义了与网页内容相关的关键词列表，多个关键词之间使用英文逗号分隔。

keywords曾经是搜索引擎优化中一个非常重要的组成部分，是TDK中的K，用于定义网页的关键词信息。

但随着搜索引擎技术的不断发展，特别是算法的日益智能化，该标签对网页排名的影响已大幅降低。现在，它更多地是作为一种辅助信息存在，其重要性远不如以前。

<meta name="description" content="页面描述">        
<!--  页面描述，应该精确、吸引人，并包含相关关键词。-->

<meta name="description">标签用于提供网页的简短描述，这段描述通常会显示在搜索引擎的搜索结果页面（SERP）中，作为网页摘要展示在标题下方，帮助用户快速了解页面内容，并决定是否点击访问。

description是TDK中的D，虽然对排名没有<title>标签那样直接的影响，但它通过提升点击率，间接影响排名，因此，撰写高质量的description至关重要。

请注意，描述内容应简洁扼要，突出页面重点，并在语句中自然融入相关关键词。为避免在搜索结果中被截断，建议将描述控制在150-160个字符以内。

<meta name="robots" content="index, follow">   
<!-- 指示搜索引擎对页面进行索引和跟踪。-->

<meta name="robots">标签用于指示搜索引擎爬虫如何处理当前网页的索引和链接跟踪。

在这个例子中，content属性设置为index, follow，表示搜索引擎可以对当前网页进行索引并跟踪其中的链接。

robots的content属性常用的指令包括：

noindex：指示搜索引擎不对当前网页进行索引。
nofollow：指示搜索引擎不跟踪当前网页中的链接。
noarchive：指示搜索引擎不保留当前网页的存档副本。

根据需要和网页的特定情况，选择适当的元标签来控制搜索引擎爬虫的行为。

如果您需要对搜索引擎爬虫（也称为机器人或蜘蛛）的行为进行更精细的控制，可以使用robots元标签中的以下指令：

阻止搜索引擎索引页面：

<meta name="robots" content="noindex"> 
<!-- 告诉搜索引擎不要对当前网页进行索引，使网页不出现在搜索结果中。 -->

阻止搜索引擎跟踪页面中的链接：

<meta name="robots" content="nofollow"> 
<!-- 告诉搜索引擎不要跟踪当前网页中的链接，防止搜索引擎通过该页面发现其他页面。-->

阻止搜索引擎显示页面的存档副本：

<meta name="robots" content="noarchive"> 
<!-- 告诉搜索引擎不要显示当前网页的存档副本，防止用户通过搜索结果访问存档页面。-->

针对特定搜索引擎指定不同的行为：

<meta name="googlebot" content="index, follow">
<!-- 针对 Google 搜索引擎指定网页的索引和跟踪行为，其他搜索引擎可能会忽略此指示。-->

请注意，如果没有明确指定<meta name="robots">标签，大多数搜索引擎会默认执行index,follow指令，即索引页面并跟踪链接。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

viewport元标签是响应式网页设计中至关重要的组成部分，通常放置在HTML文档的<head>标签内。

它能确保网页在各种移动设备（例如手机和平板电脑）上都能良好显示，根据设备屏幕尺寸自动调整页面布局，从而提供最佳的用户体验。

<meta property="og:title" content="xxxx"> 
<!--  指定网页的标题，xxxx 是要展示的标题内容，应与页面的实际标题保持一致。 -->
<meta property="og:image" content="xxxxxxx.jpg">
<!--  指定网页的图片，xxxxxxx.jpg 是图片的路径或 URL，用于在社交媒体平台上展示网页的缩略图。 -->
<meta property="og:description" content="xxxx xxxx">
<!--  指定网页的描述，xxxx xxxx 是要展示的描述内容，用于简要描述网页的特点、内容或信息。  -->
<meta property="og:url" content="xxxxxxxxxx">
<!--  指定网页的 URL，xxxxxxxxxx 是网页的完整 URL，用于标识网页的唯一地址。   -->

Open Graph协议是一套标准化网页元数据的标签，旨在优化网页在社交媒体平台（如Facebook、Twitter、LinkedIn等）分享时的展示效果。

通过使用og标签，您可以精确控制分享链接时显示的标题、图片、描述等信息，从而提高链接的吸引力。

<meta name="twitter:title" content="xxxx">
<!--  指定在 Twitter 上展示的标题。"xxxx" 是要展示的标题内容，应与页面的实际标题保持一致。 -->
<meta name="twitter:site" content="xxxxx">
<!--  指定在 Twitter 上展示的网站名或用户名。"xxxxx" 用于展示网站的标识或所有者。   -->
<meta name="twitter:url" content="https://www.xxxx.com/xxxx">
<!--  指定在 Twitter 上展示的网页 URL。"https://www.xxxx.com/xxxx" 是网页的完整 URL。  -->
<meta name="twitter:card" content="summary_large_image">
<!--  指定在 Twitter 上展示的卡片类型。"summary_large_image" 
表示使用大图卡片类型，该类型适合展示大尺寸图片和相关描述。  -->
<meta name="twitter:description" content="xxxxxxxxxxxxxxxxx">  
<!--  指定在 Twitter 上展示的描述内容。该描述用于简要介绍网页的内容或信息。 -->
<meta name="twitter:image" content="https://img.xxxxx.com/xxxxxx.jpg"> 
<!--  指定在 Twitter 上展示的图片。图片的路径或 URL，用于在 Twitter 上展示网页的缩略图。 -->

Twitter Card标签专门用于控制网页在Twitter上分享时的展示效果。

虽然Twitter可以回退使用Open Graph标签，但使用Twitter Card 标签可以提供更精细的控制。

<meta name="author">用于在网页中指定作者信息。虽然这个标签使用频率不高，但作为基础知识了解一下还是有必要的。

<meta name="author" content="作者名称">
<!-- 指定网页的作者信息  -->

<link> 标签用于引入外部资源，例如网站图标 (favicon)、样式表 (CSS 文件) 和规范 URL (canonical)。

定义网站图标（Favicon）

<link rel="icon" href="图标路径">
<!-- 指定网站的图标，也称为网站图标或 favicon -->

网站图标（favicon）通常显示在浏览器标签页、地址栏（部分浏览器）和书签栏中，用于标识和区分不同的网站，增强用户体验。

rel="icon"：指定链接的资源是网站图标。
href：属性指定了图标文件的路径，即图标文件所在位置的URL。

推荐使用ICO格式的图标文件作为网站图标，因为它是浏览器兼容性最佳的格式。

网站图标通常为正方形，建议使用16x16或32x32像素的尺寸。为获得更佳的显示效果，您还可以提供其他尺寸的图标，以适应不同的设备。

如果您希望使用PNG或SVG格式的图标，可以通过以下方式修改示例代码中的 <link> 元素来引用相应的图标文件。

<link rel="icon" type="image/png" href="favicon.png">
<link rel="icon" type="image/svg+xml" href="favicon.svg">

通常不建议使用JPG或JPEG格式的图像。JPG格式是一种用于存储照片和复杂图像的有损压缩格式，适用于彩色图像，但对于小图标来说可能不太适合。

引入样式表（CSS）

<link rel="stylesheet" href="样式表路径">

引入外部样式表可以将网页的样式（例如颜色、字体和布局）与HTML结构分离，从而实现内容与样式的分离，方便管理、维护和复用。

rel="stylesheet"：指定链接的资源是样式表。
href：属性指定了样式表文件的路径。

请务必确保href属性中指定的路径正确，以便浏览器能够正确加载和应用样式。

声明规范 URL（Canonical URL）

<link rel="canonical" href="规范 URL">
<!-- 指定规范的 URL，防止搜索引擎将重复内容视为不同页面。-->

当网站存在多个URL指向相同或相似内容时，使用canonical可以告诉搜索引擎哪个URL是首选的“规范”版本，避免搜索引擎将重复内容视为不同的页面，从而分散网站的权重，影响SEO表现。

<style>：用于在HTML文档内定义样式，包括字体、颜色、布局等。

<style>
    h1 {
      color: blue; /* 设置标题颜色为蓝色 */
      text-align: center; /* 设置标题文本居中 */
    }
</style>

使用<style>标签可以在HTML文档内部直接定义样式。这种方式适用于简单的样式定义，尤其当样式仅应用于当前HTML文档时。

对于复杂的样式以及需要在多个页面共享的样式，建议将其保存在外部CSS文件中，并使用<link>元素引入到HTML文档。

<script> 标签用于在HTML文档中嵌入或引入JavaScript代码，从而实现网页的动态交互和功能。它有两种主要的使用方式：

引入外部 JavaScript 文件

<script src="script.js"></script>

使用 src 属性可以引入外部 JS 文件。这是一种推荐的做法，因为它使HTML结构和JS代码分离，提高了代码的可维护性和复用性。

HTML 中嵌入 JavaScript 代码

可以直接在 <script> 标签内部编写 JS 代码。这种方式适用于少量、简单的 JS 代码。

<script>
    // JavaScript 代码
    function myFunction() {
      alert('Hello, World!');
    }
</script>

这段代码会在页面加载完成后弹出一个警告框，显示 “Hello, World!”。

<base>标签定义了HTML页面中所有相对链接的基准URL。

<base href="https://www.example.com/" target="_blank">

href：指定基准URL，即相对链接的参考点。
target：指定链接的默认目标窗口。它可以是以下值之一：
- _blank：在新的窗口中打开链接。
- _self：在当前窗口中打开链接（默认值）。
- _parent：在父级窗口中打开链接。
- _top：在顶级窗口中打开链接。

<noscript>用于在浏览器不支持或禁用JavaScript时显示备用内容。

<noscript>
   <p>您的浏览器禁用了JavaScript或不支持它。</p>
   <p>请启用JavaScript以正常浏览本网站。</p>
</noscript>

当浏览器无法执行页面中的JS代码时，会渲染<noscript>元素内的内容，从而提供一种替代方案给用户。

`<body>`元素中常见的标签

<h1>到<h6>：用于定义标题，数字表示标题的级别，从最高级的标题1到最低级的标题6。

<h1>Beetles</h1>
<h2>External morphology</h2>
<h3>Head</h3>
<h4>Mouthparts</h4>
<h3>Thorax</h3>
<h4>Prothorax</h4>
<h4>Pterothorax</h4>

将关键词相关的内容放在适当的标题标签中，并按照正确的层次结构使用。

<p>：用于定义段落。

<p>
  Geckos are a group of usually small, usually nocturnal lizards. They are found on every continent except Antarctica.
</p>

<p>Some species live in houses where they hunt insects attracted by artificial light.</p>

<a>：用于创建超链接。

<p>You can reach Michael at:</p>

<ul>
  <li><a href="https://example.com">Website</a></li>
  <li><a href="mailto:m.bluth@example.com">Email</a></li>
  <li><a href="tel:+123456789">Phone</a></li>
</ul>

使用有意义的锚文本（链接文本）来链接相关页面，并包含相关关键词。

<strong> 和 <em>：强调标签，使用适当的强调标签突出关键词，但不要滥用。

<p>Get out of bed <em>now</em>!</p>

<p>We <strong><em>had to do something</strong></em> about it.</p>

<p><em>This is not a drill!</em></p>

<p><strong>I am strong</strong> !</p>

<img>：用于插入图像。

<img
  class="fit-picture"
  src="/media/cc0-images/grapefruit-slice-332-332.jpg"
  alt="Grapefruit slice atop a pile of other slices" />
  
<!-- 使用 alt 属性提供描述性文本，描述图像内容并包含相关关键词。-->

<ul> 和 <li>：创建无序列表

<ul>
  <li>Milk</li>
  <li>
    Cheese
    <ul>
      <li>Blue cheese</li>
      <li>Feta</li>
    </ul>
  </li>
</ul>

<ol> 和 <li>：创建有序列表。

<ol>
  <li>Mix flour, baking powder, sugar, and salt.</li>
  <li>In another bowl, mix eggs, milk, and oil.</li>
  <li>Stir both mixtures together.</li>
  <li>Fill muffin tray 3/4 full.</li>
  <li>Bake for 20 minutes.</li>
</ol>

<div>：用于将文档分隔为不同的区块，用于样式化和布局。

<div class="warning">
  <img src="/media/examples/leopard.jpg" alt="An intimidating leopard." />
  <p>Beware of the leopard</p>
</div>

<span>：用于标记文本中的特定部分，用于样式化和处理。

<span style="color: red;">这是红色文本</span>

<form>：创建表单用于用户输入。

<input>：表单输入元素。

<button>：创建按钮。

<select> 和 <option>：用于创建下拉选择框，<select> 为选择框容器，<option> 为选项。

<textarea>：用于创建多行文本输入框，通常用于用户输入大段文本或留言。

<label>：用于关联表单控件和标签文本。

<form action="/submit" method="post">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" required>

  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email" required>

  <label for="gender">性别：</label>
  <select id="gender" name="gender">
    <option value="male">男</option>
    <option value="female">女</option>
    <option value="other">其他</option>
  </select>

  <label for="message">留言：</label>
  <textarea id="message" name="message" rows="4" cols="30" required></textarea>

  <button type="submit">提交</button>
</form>

<br>：换行标签，用于在文本中插入换行。

<p>
  O’er all the hilltops <br />
  Is quiet now, <br />
  In all the treetops <br />
  Hearest thou <br />
  Hardly a breath; <br />
  The birds are asleep in the trees: <br />
  Wait, soon like these <br />
  Thou too shalt rest.
</p>

<hr>：水平线标签，用于插入水平分隔线。

<p>§1: The first rule of Fight Club is: You do not talk about Fight Club.</p>

<hr />

<p>§2: The second rule of Fight Club is: Always bring cupcakes.</p>

![](https://files.mdnice.com/user/57386/b64595d8-f02d-4b07-a567-e9a92d0a8c7e.png)

<iframe>：用于嵌入其他网页或文档，可以在当前网页中显示外部内容。

<iframe
  id="inlineFrameExample"
  title="Inline Frame Example"
  width="300"
  height="200"
  src="https://www.imooc.com/">
</iframe>

<video> 和 <audio>：分别用于嵌入视频和音频文件，可以在网页中播放视频和音频。

<video src="video.mp4" controls autoplay width="640" height="360">
    Your browser does not support the video tag.
</video>
<audio src="audio.mp3" controls autoplay>
Your browser does not support the audio tag.
</audio>

<table>、<tr>、<th>、<td>：创建表格。

<table>
  <thead>
    <tr>
      <th scope="col">Person</th>
      <th scope="col">Most interest in</th>
      <th scope="col">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Chris</th>
      <td>HTML tables</td>
      <td>22</td>
    </tr>
    <tr>
      <th scope="row">Dennis</th>
      <td>Web accessibility</td>
      <td>45</td>
    </tr> 
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="2">Average age</th>
      <td>33</td>
    </tr>
  </tfoot>
</table>

语义话标签

在HTML5中，除了常见的<body>标签外，还有一些值得深入了解的语义化标签。

语义化标签是指具有明确含义的HTML标签，它们不仅定义了网页的结构，还清晰地传达了内容的本质意义。

使用这些标签可以帮助浏览器和搜索引擎更准确地理解和解析网页内容。

常见的语义化标签

<header>：用于定义页面或区块的头部区域，通常包含网站标题、Logo、导航菜单等重要标识性内容。
<nav>：用于定义导航区域，通常包含网站的主导航链接、菜单列表等可以帮助用户进行页面跳转的元素。
<main>：用于标记页面的主要内容区域，一个页面中只能包含一个<main>元素。
<article>：用于标记一段独立完整的内容，如博客文章或新闻报道。
<footer>：用于标记页面或区块的底部区域，通常包含版权声明、联系信息、相关链接等辅助内容。
<aside>：用于标记与页面主内容相关的附属内容，如侧边栏、相关推荐、广告等。
<section>：用于标记文档中的独立内容区块或主题，便于对相关内容进行分组。

根据网页的内容和布局，我们可以选择适当的标签来描述各个部分。

以下是一个关于语义话标签的简单代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>布局示例</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
    }

    header, nav, aside, section, article, footer {
      text-align: center;
      font-size: 1.5em;
      color: white;
    }

    header, footer {
      background: #4CAF50;
      padding: 20px;
    }

    nav {
      background: #F08080;
      padding: 20px;
    }

    main {
      display: flex;
      margin: 20px 0;
    }

    aside {
      background: #F4B400;
      width: 25%;
      padding: 20px;
    }

    section {
      background: #42A5F5;
      width: 75%;
      padding: 20px;
    }

    article {
      background: #1E88E5;
      padding: 20px;
      margin-top: 10px;
    }

    footer {
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <header>header</header>
  <nav>nav</nav>
  <main>
    <aside>aside</aside>
    <section>
      <h2>Section Title</h2>
      <article>article content</article>
    </section>
  </main>
  <footer>footer</footer>
</body>
</html>