秋来冬风的博客

一个SEO优化的网页结构模板 | 打造搜索引擎友好的网站基础

目录

背景

搜索引擎（如必应、谷歌）至关重要，关乎在用户能否找到自己的网站。一个经过SEO优化（搜索引擎优化）的网页，更容易被用户找到。

此博客分享一个SEO优化的网页结构模板。

一些要点

TDK（标题、描述、关键词）

title（标题），description（描述），keywords（关键词）是关于一个网页被搜索引擎的三要素。

title和description影响搜索引擎给用户显示搜索结果中，关于此页面的信息，对容易被用户点击很重要。

keywords影响搜索引擎如何展示此页面到特定搜索结果，过去对容易被用户找到很重要，现在可能没太大用处，视情况添加。

规范化链接

在元数据中设置规范化链接，有助于避免重复页面收录。在网站有多副本时很有用。

Open Graph 协议和 Twitter Card

Open Graph协议和Twitter Card都是用于提升网页在社交媒体分享时的展示效果的技术。

通过增强社交分享吸引力，影响内容的传播，可以显著提升网站的整体可见性和流量，从而对SEO产生积极影响。

作者和版权声明

author（作者）,copyright（版权声明）两个元数据对搜索引擎搜索结果排名的直接影响较小。

但可以辅助搜索引擎理解内容关联。例如当用户搜索该作者时，相关内容可能更易被推荐。

结构化数据

JSON-LD有助于提升搜索引擎对内容的理解，帮助搜索引擎更精准地判断内容与用户 query（搜索词）的匹配度。

带async和defer属性的script标签

异步加载js脚本有助于加快网页显示速度，通过提升用户体验，间接地对SEO产生积极帮助。

使用语义化标签

header、nav、main、article、section、footer等语义化标签，通过清晰表达页面结构和内容类型，能帮助搜索引擎理解网页各部分，从而提升网站在搜索结果中的排名和可见性。

模板

<!DOCTYPE html>
<html lang="zh-CN或其他语言代码">
<head>
    <!-- 字符编码 -->
    <meta charset="UTF-8">    
    <!-- 视口设置 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <!-- 页面标题（核心SEO元素，建议≤65字符） -->
    <title>标题 | 您的品牌名称</title>
    <!-- 页面描述（影响点击率，建议≤155字符） -->
    <meta name="description" content="您的页面描述">
    <!-- 关键词（现代SEO中权重较低） -->
    <meta name="keywords" content="页面的关键词">
    <!-- 版权信息 -->
    <meta name="author" content="作者信息">
    <meta name="copyright" content="Copyright © 年份 您的品牌名称. 保留所有权利.">
    <link rel="author" href="有关作者介绍的链接">



    <!-- Open Graph 协议（用于社交分享） -->
    <meta property="og:title" content="分享到平台的标题">
    <meta property="og:description" content="分享到设计平台的卡片描述">
    <meta property="og:type" content="website"> <!-- 文章页面可以设置 content="article" -->
    <meta property="og:url" content="页面链接">
    <meta property="og:locale" content="页面语言代码">
    <meta property="og:image" content="页面封面展示的图片链接">
    
    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="分享到平台的标题">
    <meta name="twitter:description" content="学习如何构建搜索引擎友好的网页结构。">
    
    <!--  规范化链接，告诉搜索引擎该页面的权威版本（防止重复内容） -->
    <link rel="canonical" href="页面规范化链接" />
    
    <!-- 结构化数据（Schema Markup） - JSON-LD格式 -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BlogPosting 或 Article 或其他合适的",
      "headline": "和title标签一样",
      "description": "和description标签一样",
      "author": {
        "@type": "Person 或 Organization",
        "name": "your name"
      },
      "publisher": {
        "@type": "Person 或 Organization",
        "name": "your name"
        "logo": {
          "@type": "ImageObject",
          "url": "https://www.yourwebsite.com/logo.png"
        }
      },
      "datePublished": "年-月-日",
      "dateModified": "年-月-日",
      "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "页面链接"
      }
    }
    </script>
    
    <!-- 异步加载脚本 -->
    <script defer src="/1.js"></script>
    <script async src="/2.js"></script>
</head>
<body>
    <!-- 页眉 -->
    <header>
        <h1>标题</h1>
        <nav>
            <ul>
                <li><a href="/">首页</a></li>
                <!-- 内部的其他链接 -->
            </ul>
        </nav>
    </header>

    <!-- 主要内容 -->
    <main>
        <article> 
            <p>发布于 <time datetime="年-月-日">xxxx年xx月xx日</time> | 作者：<author>作者名</author></p>

            <section>
                <h2>第一章节</h2>
                <p>详细内容...</p>
            </section>

            <section>
                <h2>第二章节</h2>
                <p>详细内容...</p>
            </section>

            <!-- 其他内容部分 -->
        </article>

        <!-- 侧边栏（可选） -->
        <aside>
            <!-- 有关内容 -->
        </aside>
    </main>

    <!-- 页脚 -->
    <footer>
        <p>&copy; 年份 您的品牌名称. 保留所有权利.</p>
    </footer>

</body>
</html>
Tags: