HTML的itemprop怎么在新闻页面做结构化标记

云墨酱_9842

云墨酱_9842

2026-09-04

745人浏览

原创

html-deploy
html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页,适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载
新闻页面结构化标记核心是用itemscope+itemtype="https://schema.org/newsarticle"包裹,必须包含headline、datepublished(用)、image(用)、articlebody(纯文本块)和author(嵌套person类型),缺一不可,否则富媒体摘要不触发。

html的itemprop怎么在新闻页面做结构化标记

新闻页面用 itemprop 做结构化标记,核心是让搜索引擎准确提取「标题、发布时间、作者、正文、图片」这五个关键字段——漏掉任一字段,富媒体摘要(如 Google 新闻卡片)就大概率不触发。

必须先套好 itemscope 和 itemtype 外层容器

单独写 itemprop="headline" 没用。新闻条目必须包裹在带 itemscope itemtype="https://schema.org/NewsArticle" 的元素里,且这个容器得是 <main></main> 的直接子元素(不能嵌套在 <div class="item"> 里)。 <ul> <li>✅ 正确:<code><main><article itemscope itemtype="https://schema.org/NewsArticle">...</article></main>

  • ❌ 错误:<main><div class="news-list"><article itemscope itemtype="https://schema.org/NewsArticle">...</article></div></main> —— 屏幕阅读器和 Google 会丢失主内容上下文
  • ⚠️ 注意:itemtype 必须是完整 HTTPS URL,https://schema.org/NewsArticle 不能写成 NewsArticle 或 http:// 协议
  • itemprop="headline" 和 itemprop="datePublished" 怎么写才不被丢

    这两个字段最容易因 HTML 结构或格式问题被解析器跳过。

    • headline 必须绑定在纯文本容器上,不能含子标签:<h2 itemprop="headline">国产大飞机C919完成首次商业飞行</h2> ✅;<h2 itemprop="headline">C919<sup>®</sup> </h2> ❌(会提取出 "C919®",Google 可能拒收)
    • datePublished 必须用 <time></time> 标签并带 datetime 属性:<time itemprop="datePublished" datetime="2026-01-04T08:30:00+08:00">2026年1月4日</time> ✅;只写 <span itemprop="datePublished">2026年1月4日</span> ❌(机器无法识别时间语义)
    • 日期字符串必须是 ISO 8601 格式,datetime 属性值不能写“昨天”“刚刚”“发布于”等自然语言

    itemprop="image" 和 itemprop="articleBody" 的常见陷阱

    图片和正文是新闻类富摘要的硬性依赖字段,但写法稍有偏差就会失效。

    • image 必须是可公开访问的图片 URL 字符串,不能靠 <img src> 自动提取:<link itemprop="image" href="https://example.com/c919.jpg"> ✅;<img itemprop="image" src="c919.jpg"> ❌(无 content 或 href,不被识别)
    • articleBody 只能作用于纯文本块,不能跨多个 <p></p>:<div itemprop="articleBody"> <p>第一段...</p> <p>第二段...</p> </div> ❌(提取结果含 HTML 标签,Google 拒收);正确做法是把所有正文段落合并进一个 <div itemprop="articleBody">,或用 <code><meta itemprop="articleBody" content="..."> 预处理后注入
    • 正文文本中避免不可见字符(如 U+200E 零宽空格)、多余换行符、HTML 实体乱码,否则结构化数据验证工具会报“值异常”
    • 作者、来源、分类这些辅助字段怎么标才有效

      它们不是必需字段,但补全后能提升新闻实体可信度,尤其对 Google News 流量池有帮助。

      • 作者必须用 Person 类型嵌套:<div itemprop="author" itemscope itemtype="https://schema.org/Person"><span itemprop="name">张三</span></div> ✅;直接写 <span itemprop="author">张三</span> ❌(类型缺失,会被忽略)
      • 来源(publisher)推荐用 Organization:<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization"><div itemprop="name">新华社</div></div>
      • 分类(articleSection)用字符串即可:<meta itemprop="articleSection" content="国内">,但必须放在同一 itemscope 内,且不能重复写多个 content 值(多分类需用逗号分隔的单个字符串)
      • 所有嵌套对象(如 author、publisher)必须紧贴 itemprop 所在元素,不能隔一层 <div>,否则 Google 直接丢弃整个嵌套块 <p>真正难的不是写对单个 <code>itemprop,而是确保整套微数据从外层 itemscope 到最内层 <time></time> 都没断层、没拼写错误、没协议错误——任何一环松动,整条新闻在结构化数据测试工具里都会显示为“0 个属性”。

    前端入门到VUE实战笔记:立即使用
    在学习笔记中,你将探索 前端 的入门与实战技巧!

    相关文章

    HTML速学教程(入门课程)
    HTML速学教程(入门课程)

    HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

    下载

    相关标签:

    html教程 html

    本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

    相关专题

    更多
    html版权符号
    html版权符号

    html版权符号是“©”,可以在html源文件中直接输入或者从word中复制粘贴过来,php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

    2023.06.14

    5655

    7

    html在线编辑器
    html在线编辑器

    html在线编辑器是用于在线编辑的工具,编辑的内容是基于HTML的文档。它经常被应用于留言板留言、论坛发贴、Blog编写日志或等需要用户输入普通HTML的地方,是Web应用的常用模块之一。php中文网为大家带来了html在线编辑器的相关教程、以及相关文章等内容,供大家免费下载使用。

    2023.06.21

    3212

    4

    html网页制作
    html网页制作

    html网页制作是指使用超文本标记语言来设计和创建网页的过程,html是一种标记语言,它使用标记来描述文档结构和语义,并定义了网页中的各种元素和内容的呈现方式。本专题为大家提供html网页制作的相关的文章、下载、课程内容,供大家免费下载体验。

    2023.07.31

    2890

    5

    html空格
    html空格

    html空格是一种用于在网页中添加间隔和对齐文本的特殊字符,被用于在网页中插入额外的空间,以改变元素之间的排列和对齐方式。本专题为大家提供html空格的相关的文章、下载、课程内容,供大家免费下载体验。

    2023.08.01

    2899

    5

    html是什么
    html是什么

    HTML是一种标准标记语言,用于创建和呈现网页的结构和内容,是互联网发展的基石,为网页开发提供了丰富的功能和灵活性。本专题为大家提供html相关的各种文章、以及下载和课程。

    2023.08.11

    4739

    6

    html字体大小怎么设置
    html字体大小怎么设置

    在网页设计中,字体大小的选择是至关重要的。合理的字体大小不仅可以提升网页的可读性,还能够影响用户对网页整体布局的感知。php中文网将介绍一些常用的方法和技巧,帮助您在HTML中设置合适的字体大小。

    2023.08.11

    2861

    3

    html转txt
    html转txt

    html转txt的方法有使用文本编辑器、使用在线转换工具和使用Python编程。本专题为大家提供html转txt相关的文章、下载、课程内容,供大家免费下载体验。

    2023.08.31

    2669

    3

    html文本框代码怎么写
    html文本框代码怎么写

    html文本框代码:1、单行文本框【<input type="text" style="height:..;width:..;" />】;2、多行文本框【textarea style=";height:;"></textare】。

    2023.09.01

    2368

    6

    HTML嵌入CSS样式的方法
    HTML嵌入CSS样式的方法

    HTML嵌入CSS样式的方法有内联样式、内部样式表和外部样式表。本专题为大家提供CSS样式相关的文章、下载、课程内容,供大家免费下载体验。

    2023.09.20

    2408

    5

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    HTML教程
    HTML教程

    共500课时 | 10.3万人学习

    HTML 基础教程
    HTML 基础教程

    共45课时 | 20.4万人学习

    GDB 17.2 官方文档集合
    GDB 17.2 官方文档集合

    共0课时 | 0人学习