如何通过HTML itemtype属性定义视频对象-html教程-PHP中文网

itemtype本身不定义对象，仅指向Schema.org等外部词汇表URL；要使视频被识别，必须配合itemscope及name、description、thumbnailUrl、uploadDate、contentUrl/ embedUrl等必要itemprop属性，且URL须可访问、格式合规、静态存在于首屏HTML中。

如何通过html itemtype属性定义视频对象

itemtype 是什么，它真能定义视频对象？

itemtype 本身不定义对象，它只是指向一个已有定义的词汇表（通常是 Schema.org），告诉浏览器“接下来这些属性，按这个标准解释”。想让视频被搜索引擎或解析器识别为“视频”，必须配合 itemscope 和符合 Schema.org 视频规范的属性（如 video、duration、thumbnailUrl）。单独写 itemtype="@#@#@#@#@#@#@#@#@#@0" 没用，没 itemscope 就不生效，缺关键属性就无法被正确解析。

怎么写才被 Google 等搜索引擎识别为视频？

Google 的富媒体搜索结果（如视频轮播）对 VideoObject 有明确要求：必须是页面主内容，且包含最低必要字段。实操时注意：

必须用 itemscope itemtype="@#@#@#@#@#@#@#@#@#@0" 包裹整个视频结构
必须提供 name（视频标题）、description、thumbnailUrl（可访问的缩略图 URL）、uploadDate（ISO 8601 格式，如 2024-05-20）
contentUrl 或 embedUrl 至少填一个；前者用于直接下载/播放 MP4，后者用于 iframe 嵌入页（如 YouTube）
不要用 meta 标签模拟属性——Schema.org 解析器只认嵌套在 itemscope 内的可见或 meta 元素（且需带 itemprop）

<div itemscope itemtype="https://www.php.cn/link/5055379fdebf55a5702d7dc09cd883ed">
  <h2 itemprop="name">如何调试 fetch 请求</h2>
  <p itemprop="description">演示 Chrome DevTools 中 network 面板的关键技巧</p>
  <meta itemprop="uploadDate" content="2024-05-20">
<meta itemprop="thumbnailUrl" content="https://example.com/thumb.jpg">
<meta itemprop="duration" content="PT6M23S">
<meta itemprop="contentUrl" content="https://example.com/video.mp4">
</div>

常见错误：为什么加了 itemtype 还不显示富媒体卡片？

这是最常踩的坑，不是代码没写对，而是语义或部署层面断了链路：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

缩略图 thumbnailUrl 返回 404 或跨域禁止加载（CORS）——Google 抓取器会跳过整个 VideoObject
uploadDate 格式错成 2024/05/20 或带时间但没带时区（应为 2024-05-20T10:30:00+08:00）
页面同时存在多个 VideoObject，但 Google 只选第一个且它缺少 contentUrl ——其余全被忽略
使用了 @#@#@#@#@#@#@#@#@#@2（旧协议）而非 @#@#@#@#@#@#@#@#@#@3 ——现代解析器已弃用 HTTP 版本
在 JavaScript 动态插入结构，但 Googlebot 的初始 HTML 快照里没有这些标签（SSR 或静态生成更稳）

video 元素和 itemtype 能一起用吗？

能，而且推荐。把 itemscope 放在标签上最自然，但要注意属性映射：

❌ 错误：src 不是 contentUrl 的合法值，contentUrl 是属性，不是 HTML 属性别名

正确写法是用 meta 或内联文本标记：

<video controls><source src="play.mp4" type="video/mp4"></source></video><meta itemprop="contentUrl" content="play.mp4">

如果用 embedUrl（比如嵌 YouTube），

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