让 Google、AI 和顾客看懂你的网页：标题、分享预览与结构化数据指南

用服务、门店、商品、文章、品牌和 MathFun 六个案例，理解网页标题、Open Graph、网址与结构化数据如何支持搜索、AI 搜索和分享，并学会验收。

顾客可能先在 Google 看到你的页面，在 AI 回答里读到你的业务介绍，或收到朋友转发的链接，然后才打开网站。网页信息设置帮助这些系统知道：这是谁的网站、这页讲什么、应该用什么图片介绍，以及有哪些可以核对的事实。

Metadata（元数据）可以理解为“描述网页的信息”。Open Graph，简称 OG，是供分享平台读取的一组网页标签；结构化数据则用约定字段说明商家、商品或文章等信息。老板不必亲自写代码，但应该知道要准备什么、核对什么。

本文先讲商业场景，再解释设置和代码。六个案例中的品牌、地址、价格、作者和效果均为教学示意；MathFun 用于演示数学练习页的设置，没有核实其当前网站配置或业务承诺。示例不能直接当作你的商家资料发布。

1. 同一页，在搜索、AI 和分享中承担不同的任务

假设 ClearAir 在 Pasadena 提供住宅中央空调维修。

信息不足的预览： “Services — ClearAir”，配一张通用 Logo，简介写“专业团队，优质服务”。

信息清楚的预览： “Central AC Repair in Pasadena”，配维修服务图片，简介说明服务对象、区域和预约方式。

后者让顾客更容易判断链接是否相关，也方便转发者介绍。是否增加点击或询问，需要记录实际结果；示意卡片不能证明转化提升。

OG 主要提供分享信息。Google 也可能参考 og:title 生成搜索标题，参考首页的 og:site_name 判断网站名称；最终展示由 Google 自动决定。见 Google：搜索结果标题 、 Google：网站名称 。

2. 先分清每类设置负责什么

Google 的搜索摘要主要来自正文，有时采用页面描述；它可以按查询生成不同摘要。填写描述不能锁定每次展示。见 Google：搜索摘要与页面描述 。

Canonical 是首选网址信号，并非绝对命令； og:url 不代替 canonical。不能把所有服务页的 canonical 都指向首页。见 Google：重复页面与首选网址 。

3. 六个案例：先准备事实，再选择标签

案例 A：服务页，顾客不知道你做什么、在哪做

不足版本： 页面叫“Services”，正文只有“专业维修，欢迎联系”。

改进示例：

Google 获得更具体的主题信息，顾客能判断是否适合。在 AI 比较服务的情形中，这些正文事实也提供可核对的依据；这是内容准备建议，没有承诺某种标签会提高 AI 推荐概率。

开发者可以按事实考虑 Service 描述，但 Schema.org 有一个类型，不等于 Google 为它提供专门的富媒体搜索结果。先查看 Google 支持的结构化数据功能 ，不要给普通服务页硬套商品评分。

验收： 顾客打开页面后，是否确实能找到标题承诺的服务、区域和预约说明？

案例 B：实体门店，地址和营业时间互相矛盾

假设 Willow Yoga 搬迁后，网站正文已更新地址，但旧数据和 Google 商家资料仍保留原地址；周日营业时间也不一致。

先确认真实情况，再一起更新门店正文、Google 商家资料和适用的 LocalBusiness 数据。下面是虚构工作室的字段示例，只用于说明对应关系：

{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "Willow Yoga",
  "url": "https://example.com/studio",
  "telephone": "+1-202-555-0148",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "123 Example Street",
    "addressLocality": "Pasadena",
    "addressRegion": "CA",
    "postalCode": "91101",
    "addressCountry": "US"
  },
  "openingHoursSpecification": [{
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Saturday", "Sunday"],
    "opens": "09:00",
    "closes": "13:00"
  }]
}

这段示例只列周末时间，不代表完整营业安排。实际使用时，选择最准确的适用子类型，补全真实营业时间与官方要求；不要公开虚构地址，也不要为了本地展示捏造门店。

Google 支持使用本地商家数据描述名称、地址、营业时间等信息，但不保证特殊展示；网站标签也不会自动修改 Google 商家资料。见 Google：本地商家结构化数据 。

验收： 网站、标签和商家资料是否描述同一个地点与相同的营业安排？营业时间与上课时间应分开说明。

案例 C：商品页，价格、规格和库存容易被误解

假设商店销售 250g 咖啡豆。标题只写“Premium Coffee”，价格放在图片里，页面显示售罄，旧标签却仍写有货。

改进时，把商品名称、规格、价格、币种和库存作为可见文字；说明运费和退货条件，再让商品数据同步这些事实。

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "House Blend Coffee Beans, 250g",
  "image": "https://example.com/images/house-blend-250g.jpg",
  "description": "A 250g bag of whole-bean house blend coffee.",
  "sku": "HB-250",
  "offers": {
    "@type": "Offer",
    "url": "https://example.com/coffee/house-blend-250g",
    "price": "18.00",
    "priceCurrency": "USD",
    "availability": "https://schema.org/OutOfStock"
  }
}

这是教学用商品与报价示例，不包含所有商家展示所需或推荐的字段。Google 可以利用适用的商品数据展示价格、库存等信息；可直接购买的商品页与评测页适用的要求不同。见 Google：商品结构化数据 。

对于“比较 250g 咖啡豆的价格和购买条件”这类 AI 查询，页面提供了明确事实。不能把添加 Product 写成获得 AI 推荐的保证。Google 的 AI 指南也建议更新 Merchant Center（Google 商家商品管理平台）中的资料；它与网页标签需要分别维护。见 Google：AI 功能和网站 。

验收： 调整价格或库存后，正文、标签和商品数据渠道是否同时更新？分享配图是否确实对应这个规格？

案例 D：文章页，读者不知道是谁写的、是否仍适用

假设 ClearAir 发布“Why Is My AC Leaking Water?”。旧版本没有作者、日期或适用条件，正文只有泛泛的建议。

改进正文时，加入作者及其实际经验、检查步骤、适用设备、资料来源，以及什么时候需要专业人员。页面显示真实的发布和更新时间，再用文章数据描述同一篇内容：

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Why Is My AC Leaking Water?",
  "image": "https://example.com/images/ac-leak-guide.jpg",
  "datePublished": "2026-09-10T09:00:00-07:00",
  "dateModified": "2026-10-05T10:00:00-07:00",
  "author": {
    "@type": "Person",
    "name": "Alex Example",
    "url": "https://example.com/team/alex"
  }
}

Google 可以用文章数据理解标题、作者、图片和日期。见 Google：文章结构化数据 。

对 AI 搜索，值得准备的是有实际经验、能支持答案的正文。作者标签本身不能证明专业能力，改日期也不会使过期建议重新有效； dateModified 应反映真实修改。Google 建议为读者提供有用、独特的内容。见 Google：生成式 AI 搜索优化指南 。

验收： 作者链接是否能访问？正文是否交代来源和适用条件？页面日期与数据是否对应？

案例 E：品牌首页，同名品牌容易混淆

假设 Northstar 是一家网站工作室，但网上也有同名物流和金融公司。首页只写“Welcome to Northstar”，很难判断是哪一家。

首页应说明主营业务、服务对象、经营组织与官方联系方式。使用 WebSite 描述网站名，使用 Organization 描述组织；两者有关联，但不是同一种信息。

{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "WebSite",
      "@id": "https://example.com/#website",
      "url": "https://example.com/",
      "name": "Northstar Studio",
      "publisher": { "@id": "https://example.com/#organization" }
    },
    {
      "@type": "Organization",
      "@id": "https://example.com/#organization",
      "name": "Northstar Studio",
      "url": "https://example.com/",
      "logo": "https://example.com/images/northstar-logo.png"
    }
  ]
}

@id 是这份数据中识别对象的稳定地址，不要求专门建立一个显示 JSON 的网页。 sameAs 可补充经过核实、代表同一组织的官方资料链接，不能把所有提及你的网页都当成官方身份。

Google 使用首页的 WebSite 数据作为网站名称偏好的重要来源，组织数据可以帮助辨别组织。见 Google：网站名称 、 Google：组织数据 。

清楚一致的公开身份是内容准备建议；没有通用标签能强制所有 AI 服务将同名来源识别成你的品牌。

验收： 品牌名、网址、Logo 与联系方式是否一致？是否误用了其他同名组织的链接？

案例 F：MathFun，预览里的承诺需要页面兑现

MathFun 教学案例指向 /practice ，标题交代免费、1–5 年级、数学练习和答案，简介补充四则运算与练习方式。

BreadcrumbList 描述页面层级，属于结构化数据，不属于 OG。Google 支持在桌面搜索结果中使用面包屑展示。见 Google：面包屑数据 。

验收： 点击后是否真的能找到所说的年级、练习和答案？不要只在元数据里写“Free”或“With Answers”。

4. 专门认识 Open Graph：链接的第一印象

OG 在 HTML 的 <head> 中提供分享信息。核心属性是标题、类型、图片和网址；简介与品牌名补充介绍。图片 URL 应能公开读取。见 Open Graph 官方协议 。

og:image:alt 不代替正文图片的 alt ；OG 配图也不代替商品或文章正文中的相关图片。1200×630 可以作为分享图制作起点，不是所有平台统一要求。宽高标签只是说明尺寸，不会生成或缩放图片；不同平台可能裁剪、截短或省略部分内容。

首页可使用品牌介绍图；服务页用对应服务图；商品页用当前商品图；文章页用主题图。小屏幕上要能辨认，重要文字与主体尽量避开边缘。本文的图片布局是设计建议，最终以目标平台实际预览验收。

更新后仍显示旧图时，检查实际 HTML、图片访问、重复标签和平台缓存。修改网页不代表平台立即重新读取。

5. 给网站维护者的完整示例

下面把 MathFun 示例扩展为 HTML 页面框架。示例假设图片确实是 1200×630 JPEG，相关内容与路径确实存在；采用前应核实并替换。代码不代表已经检查过 MathFun 线上页面。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Free Math Practice for Grades 1–5 with Answers | MathFun</title>
    <meta name="description" content="Practice addition, subtraction, multiplication and division for Grades 1–5. Choose a grade and skill, solve questions and check your answers.">
    <link rel="canonical" href="https://www.mathfun.me/practice">

    <meta property="og:site_name" content="MathFun">
    <meta property="og:type" content="website">
    <meta property="og:title" content="Free Math Practice for Grades 1–5 with Answers">
    <meta property="og:description" content="Choose a grade and skill, practise the four basic operations and check your answers.">
    <meta property="og:url" content="https://www.mathfun.me/practice">
    <meta property="og:image" content="https://www.mathfun.me/og-image.jpg">
    <meta property="og:image:type" content="image/jpeg">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:image:alt" content="MathFun practice screen with grade selection and arithmetic questions">

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Free Math Practice for Grades 1–5 with Answers">
    <meta name="twitter:description" content="Choose a grade and skill, practise and check your answers.">
    <meta name="twitter:image" content="https://www.mathfun.me/og-image.jpg">
    <meta name="twitter:image:alt" content="MathFun practice screen with grade selection and arithmetic questions">

    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "BreadcrumbList",
        "itemListElement": [
          {
            "@type": "ListItem",
            "position": 1,
            "name": "Home",
            "item": "https://www.mathfun.me/"
          },
          {
            "@type": "ListItem",
            "position": 2,
            "name": "Math Practice",
            "item": "https://www.mathfun.me/practice"
          }
        ]
      }
    </script>
  </head>
  <body>
    <nav aria-label="Breadcrumb">
      <a href="/">Home</a> / <span>Math Practice</span>
    </nav>
    <h1>Free math practice for Grades 1–5</h1>
    <p>Choose a grade and skill, then solve questions and check your answers.</p>
    <!-- Add the actual working practice tools and supporting information here. -->
  </body>
</html>

这份框架仍需要真正可用的练习功能。商家看到完整的标签，不能据此判断整个页面已完成。

多语言页面另外维护真实译文、语言对应网址和 hreflang 。它用于描述语言或地区的替代页面； og:locale 不代替它。每个语言版本通常应 canonical 到自身，相互提供对应的语言链接。见 Google：多语言页面标记 。

6. 从 AI SEO 角度，哪些工作有依据？

AI SEO 在这里指改善 AI 搜索中的发现、介绍与引用。不同服务有不同的数据来源和访问规则，不能用一家平台的说明代表全部 AI。

Google AI 搜索：仍然需要有用的网页和搜索基础

Google 表示，AI Overviews（AI 概览）和 AI Mode（AI 模式）沿用 SEO 基础。页面要具备参与这些搜索展示的条件，需要被收录并具备显示搜索摘要的资格；满足条件也不保证被选中。无需特殊 AI Schema， llms.txt 也不是 Google 搜索优化信号。见 Google：AI 功能和网站 、 Google：生成式 AI 搜索优化指南 。

假设顾客问：“有没有适合初学者、周六上午的瑜伽课？”

实践建议： 先让页面回答真实问题，再准确描述这些答案。清楚的段落、表格、适用条件、来源与日期方便核对；它们不是必须按固定模板书写的 AI 排名规则。Google 建议有用的独特内容，不要求将文章切成固定长度的碎片。见 Google：生成式 AI 搜索优化指南 。

ChatGPT 搜索：访问控制要区分搜索与训练

OpenAI 说明， OAI-SearchBot 用于 ChatGPT 搜索， GPTBot 用于模型训练，两项设置相互独立。如果商家希望允许搜索抓取而不允许训练抓取，可由维护者按经营选择配置：

User-agent: OAI-SearchBot
Allow: /

User-agent: GPTBot
Disallow: /

这是 robots.txt 的示例，需要并入现有规则并检查结果。它不会解除登录、服务器或 CDN 防护的拦截。OpenAI 表示，选择禁止 OAI-SearchBot 的网站不会出现在 ChatGPT 搜索答案中，但仍可能作为导航链接出现。允许访问也不保证引用、推荐或成交。见 OpenAI：爬虫说明 。

把“可以读取”和“获得推荐”分开记录

这个流程是经营检查顺序，不代表每个 AI 服务都使用 Google 索引。一次提及不是稳定推荐，一次没有出现也不能证明配置错误。

7. 怎样验收，而不是只看有没有标签？

可以从 Google 富媒体搜索结果测试 、 Search Console 和 Schema.org 校验器 开始。它们检查不同事项，不存在覆盖所有搜索、AI 和分享效果的统一满分。

更新价格、库存、营业时间、品牌名或文章后，同时核对正文、标签和外部业务资料。修改后分别检查网页、分享预览和搜索表现，并给相关系统重新处理的时间。

8. 商家今天可以先做什么？

1. 选出首页、一张主要服务或商品页、一篇重要文章。
2. 为每页确认标题、简介、正式网址和对应图片。
3. 核对正文里顾客需要的事实，补上缺失的范围、条件与联系方式。
4. 让维护者选择适用数据类型，检查访问、重复标签、语言和数据一致性。
5. 保存验收结果，再观察实际搜索、引用、询问和成交。

商家负责确认事实、文案与图片，网站维护者负责实现和读取检查；双方一起核对实际展示。这些设置需要随着业务变化维护。

接着读

• 页面标题、描述和小标题有什么区别？
• 结构化数据什么时候有用？
• 怎样理解“AI 能读懂你的网站”？
• Google 能访问并收录你的页面吗？
• 搜索与获客：全部模块
• SiteMonk 网站搜索技术标准

官方资料核对日期：2026 年 10 月 5 日。案例与代码用于教学，不是实际商家数据、测试报告或增长结果。