HTML头部中提取的元标记的顺序

4

我想知道社交媒体丰富预览如何定义要选取哪个og:title

我使用 WordPress,在某些页面中插入 PHP echo 字符串以将它们注入到 <head> 中。我选择这样做是为了将某些标题和描述更改为更商业化的文本。显然会出现 2 个og:title meta 标签; 我注入的标签和 WordPress 后端页面的标题。

有人曾告诉我,顶部第一个 meta 标签将作为在社交媒体丰富预览中要捕捉的 meta 标签,但这似乎不再发生了。

下面是我当前的情况以及标签在中的确切顺序:

<html>
 <head>
  <meta charset="UTF-8">
  <title>EXAMPLE</title> // my injected and used by Google
  <link rel="canonical" content="https://example.com">
  <meta name="description" content="description">
  <meta name="subject" content="example">
  <meta name="og:image" content="/image.jpg"> // my injected and used by Social Media
  <meta property="og:title" content="og:title #1"> // my injected og:title, but ignored
  <meta property="og:description" content="description">
  <meta property="og:url" content="https://example.com">
  <meta name="twitter:title" content="EXAMPLE">
  <meta name="twitter:description" content="description">
  <link rel="alternate" href="https://example.com" hreflang="nl-nl">
  <link rel="alternate" href="https://example.com" hreflang="nl-be">
  <title>EXAMPLE</title> // default by Wordpress
  <meta property="og:title" content="og:title #2"> // default by Wordpress and being used
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://example.com">
                <meta name="og:image" content="/image.jpg"> // default by Wordpress
 </head> 
</html>

发生的情况是Whatsapp和Facebook使用了第二个og:title元标签,这在我看来是没有意义的。更改后端的标题页不是解决方案,因为它会变成像“来看看我们美妙的商店!”这样,这不太用户友好。另外,我不喜欢Yoast,因为Yoast会向页面加载额外的代码,这不是我想要的东西。
谁知道解决这个问题的方法,或者能够解释为什么会发生这种情况呢?
更新和答案 感谢Chris的帮助,我了解到og:元标签会从顶部向底部进行扫描,并更新具有相同属性的2个标签中的最后一个。这个RDFa过程对于像Facebook、Whatsapp、Twitter这样的应用程序很典型。一个例外:og:image似乎需要在顶部,它不会覆盖下面的第二个或第三个标签。
Google搜索相关的标签会被拾取在头部的第一个位置,并将其保留为“先到先得”。
解决方案:我将注入og:标签到<head>的底部,其他标签将保留在顶部。经测试可以正常工作。
1个回答

1
Facebook和其他应用程序通常使用自己简化的RDFa解析版本,据我所知,这是一种从xml和html文档中解析元数据的方法。从我所读的内容来看,似乎在解析器遍历您的html页面时,它会将找到的第一个元数据片段添加到其“当前主题”中,如果找到另一个具有相同名称的元数据,则会使用更新的信息覆盖“当前主题”。
这似乎是一个非常复杂的话题,所以我想简单的答案就是他们的解析器总是会采取最后一个元数据标签并使用它。
要解决这个问题,我建议您尝试在Wordpress自动注入之下注入自定义og:title/metadata。 您可以在此处阅读有关RDFa解析的更多信息

所以你的意思是它从上到下扫描,找到#1,然后在底部找到#2并选择那个? - Demian
正确。解析器将创建一个全局对象,并根据它在从上到下解析您的HTML文件时发现的内容添加和编辑该对象。因此,在这种情况下,它会遇到您的第一个og:title,将其添加到全局对象中,然后继续执行。当它找到第二个og:title时,它将使用第二个og:title覆盖第一个og:title。 - Chris
好的,让我来测试一下,我会将所有社交og标签注入到<head>底部。 - Demian
1
我认为谷歌正在使用一种不同的RDF处理方式。因为我已经用这种方式注入SEO元标签相当长一段时间了,但我注意到og:属性没有正确显示。所以需要更多的编码工作;将谷歌相关标签放在<head>的顶部,而将og:标签放在底部。(直到他们改变他们的过程)。 - Demian
有趣的是,对我来说,功能上似乎存在很多不一致之处。 - Chris
显示剩余3条评论

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接