10.1 语义标记
SEO（搜索引擎优化）在web开发中扮演着重要角色，因为它有助于提高网页在搜索引擎结果中的可见性。现代HTML标记对SEO有重大影响，帮助搜索引擎更好地理解和索引内容。让我们来看看SEO对现代HTML标记的主要影响。
HTML5的语义标签有助于搜索引擎理解网页的结构和内容。使用正确的标签可以提高可访问性，并使内容更易于搜索引擎理解。
语义标签示例：
<header>: 页面或部分的头部<nav>: 导航链接<main>: 页面主要内容<section>: 主题相关的部分<article>: 独立的内容块<aside>: 额外信息或侧边栏<footer>: 页面或部分的底部
使用示例：
HTML
<body>
<header>
<h1>网站标题</h1>
<nav>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#about">关于我们</a></li>
<li><a href="#contact">联系</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>文章 1</h2>
<p>文章内容...</p>
</article>
<section>
<h2>部分</h2>
<p>部分内容...</p>
</section>
</main>
<aside>
<h2>侧边栏</h2>
<p>额外信息...</p>
</aside>
<footer>
<p>© 2024 我的站点. 版权所有.</p>
</footer>
</body>
10.2 微数据
微数据（structured data）用于向搜索引擎提供关于页面内容的附加信息。它帮助搜索引擎更好地理解内容，并提高页面在搜索结果中的可见度。
Schema.org 示例：
- Article: 用于文章和新闻
- BreadcrumbList: 用于面包屑导航
- Product: 用于商品描述
- Event: 用于活动描述
微数据使用示例：
HTML
<body>
<article>
<h1>文章标题</h1>
<p>作者: 作者名</p>
<p>发布日期: 2024年1月1日</p>
<img src="https://example.com/image.jpg" alt="示例图片">
<p>文章内容...</p>
</article>
</body>
JavaScript
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "文章标题",
"author": "作者名",
"datePublished": "2024-01-01",
"image": "https://example.com/image.jpg"
}
</script>
10.3 标题和元标签优化
标题和元标签在SEO中起着关键作用，因为它们为搜索引擎和用户提供关于页面内容的信息。
元标签：
<title>: 搜索结果中显示的页面标题<meta name="description">: 搜索结果摘要中使用的页面描述<meta name="keywords">: 关键词（对现代搜索引擎影响不大）
元标签使用示例：
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面标题示例</title>
<meta name="description" content="这是一段关于SEO的页面描述示例.">
<meta name="keywords" content="示例, SEO, HTML">
</head>
<body>
<h1>页面标题</h1>
<p>页面内容...</p>
</body>
</html>
10.4 图片优化
图片优化包括使用alt和title属性，以及通过压缩和使用现代图片格式（例如WebP）来确保快速加载时间。
使用示例：
HTML
<body>
<h1>图片优化示例</h1>
<img src="example.jpg" alt="图片描述" title="图片标题" loading="lazy">
</body>
10.5 面包屑导航
面包屑导航（breadcrumbs）是显示用户从首页到当前页面路径的导航元素。它帮助用户轻松地在网站上导航，提供返回上一级导航的链接。这个元素是用户界面的重要组成部分，特别是对于页面层级结构较深的大型网站。
面包屑导航的主要方面
面包屑导航是一串链接，通常显示在页面顶部标题下或菜单下。链中的每个链接都指向用户访问当前页面时经过的页面之一。
HTML
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/home">主页</a></li>
<li class="breadcrumb-item"><a href="/category">类别</a></li>
<li class="breadcrumb-item active" aria-current="page">当前页面</li>
</ol>
</nav>
面包屑导航类型：
- 层级型: 显示网站的层级结构，从首页开始。
- 示例: 主页 > 类别 > 子类别 > 当前页面
- 时间序列型: 显示用户的操作顺序，在多步导航或购买过程中尤为有用。
- 示例: 主页 > 类别 > 产品 > 购物车 > 结账
- 属性型: 用于显示当前页面的属性或标签，对于拥有大量类别和过滤器的网站特别有用。
- 示例: 主页 > 电子产品 > 手机 > 智能手机 > Apple
面包屑导航的优势：
- 改善导航: 允许用户快速返回上级页面。
- SEO优势: 帮助搜索引擎理解网站结构并提高其可索引性。
- 可用性: 使网站更直观更易于使用。
- 降低跳出率: 简化导航可以降低跳出率，因为用户可以方便地返回上级页面而不是离开网站。
SEO的优势
面包屑导航在SEO中起着重要作用，因为它帮助搜索引擎更好地理解网站结构，并为用户提供改进的导航。正确使用面包屑导航可以积极影响网站在搜索结果中的排名。
GO TO FULL VERSION