你已经做到了。
你终于完成了网站的建设 或应用程序 你一直在工作一段时间。
骄傲和高兴,你去分享这个 在你的社交或朋友—— 哦,这是什么?
WhatsApp中的预览显示没有标题, 您的外观已裁剪, 尺寸似乎不对 。
我也去过那里 网站在浏览器中看起来不错.
问题在于浏览器以外的一切:链接预览,搜索片段,标签图标都使用一个单独的元数据层,我们大多数跳过,直到某事被打破.
所以,你如何解决这个问题?
用这个作为发射前的核对表——或者运行在已经存在但分享不好的站点上.
我遇到的事情 我自己的投资组合 当我在shwethaadiraj.com上进行这次审计时,该网站表现得很好——但分享它讲述了一个不同的故事.
我将Favicon和Open Graph的图像 都指在我的档案上 在标签大小时, 插图是无法读取的; 在链接预览中, 插图的剪接十分尴尬 。
一个OG验证员随后标出我未曾考虑过的两件事:图像为512×512(大多数平台预计为1200×630),图像本身上没有头条或CTA——因此Slack和LinkedIn显示一个平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平地平平地平地平地平地平地平地平地平 我用一个简化的单词代替了favicon, 用我的名字,标记线和网站上的 URL 以正确的侧面比重生成 OG 图像, 并重排调试器。
即便如此,直到我再次点击 Scrape —— 平台缓存 OG 数据非常活跃时, 预览版才更新, 所以,在你破解缓存之前, 修复您的端部不会出现。
这一切都不需要重新思考应用程序。
这是一个元数据传出——这种作品很容易被推迟,也容易在共享按钮上发现令人讨厌.
在进入细节之前,这里有一个关于元数据能实际影响的内容: 元数据是什么?
元数据,只是数据。
搜索引擎,爬行者和社会网站 都从你的应用程序分析不同的元数据。
搜索和发现:您应用程序标签中的标题和描述告诉搜索引擎,爬行者,以及AI聊天人您的内容与用户的查询有多相干.
社交平台:开放图形(OG)和Twitter/X卡让您在社交平台上共享时对应用的呈现方式有更多的控制.
浏览器:添加favicons和苹果触摸图标有助于整合您在浏览器标签,通知和书签上的品牌身份.
元数据审计核对表 A页可以正确渲染,功能良好,但在浏览器,社交或搜索引擎检查时仍会出故障.
运行这个审计 在每一个公开的页面 在你的应用程序。
1.
Favicon和tuch 图标 浏览器标签在 16x16 和 32x32 显示清晰的图标吗 ?
是否有专门的苹果触摸图标(通常为180x180)用于“添加到家屏幕”?
法维孔是一个简化的标记,而不是完整的相片或插图? favicon URL是绝对的(还是可以通过一致的基址解决的)?
为什么它很重要:大图像或详细的插图在标签大小上丢失了细节.
多个标签的用户依赖favicons来找到您的站点 。
模糊或通称的图标使得网站即使在页面本身被打磨后也显得未完成.
如何在浏览器中验证打开网站并检查标签图标.
直接访问favicon URL(例如 或 ).
移动时,将站点添加到家用屏幕并检查图标.
使用favicon检查器或 DevTools → 应用程序 → 说明 / 图标,如果您发送了 PWA 列表 。
2.
页面标题和描述 每条路线都有独有的吗?
标题的长度是多少?
它们是否简明可读?
每一页是否都有一个概述该具体页内容的描述?
为何重要:标题和描述是Google结果中出现的内容,在OG标记缺失时经常出现在链接预览中.
复制或空的元数据使得页面相互竞争,并看起来垃圾邮件在搜索中.
如何验证视图页面源码和搜索及 。
将 URL 粘贴到搜索预览工具中, 并确认您期望的标题/ 描述 。
3.
冠状URL 每个爸爸