html-head 中元标记的选取顺序

Question

我想知道是否有人可以解释社交媒体丰富预览如何定义 og:title 选择。

我使用 wordpress，对于某些页面，我插入 php 回显字符串以将它们注入 <head>。我选择这样做是为了将某些标题和描述更改为更多商业文本。显而易见的是，有 2 个 og:title 元标记；我注入的一个和 Wordpress 后端页面标题。

有一次我被告知 <head> 顶部的第一个元标记将被选为元标记，例如用于丰富的预览，但这似乎不会发生（不再） .

以下是我目前的情况和 <head> 中元标记的确切顺序：

<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: meta 标签在 <head> 中从上到下扫描，并用扫描的最后一个属性更新 2 个相同的属性。此 RDFa 过程通常适用于 Facebook、Whatsapp、Twitter 等应用程序。 一个例外： og:image 似乎需要在顶部，它不会覆盖它下面的第二个或第三个。

Google 搜索相关标签被 <head> 顶部的第一个标签选中，并将那个标签保留为 "first come, first serve"。

解决方案： 我将把 og: 标签注入 <head> 的底部，其他的将保留在顶部。测试了它并且有效。

Answer 1

Facebook 和其他应用程序通常使用自己精简版的 RDFa 解析，根据我的理解，这是一种从 xml 和 html 文档中解析元数据的方法。从我读到的内容来看，当解析器浏览您的 html 页面时，它会将找到的第一个元数据片段添加到 "current subject"，如果它找到另一个具有相同名称的元数据片段，然后它将用更新后的信息覆盖 "current subject"。

这似乎是一个相当复杂的话题，所以我想简单的答案就是他们的解析器将始终采用最后一个元数据标记并使用它。

要解决此问题，我会看看您是否可以将自定义 og:title/metadata 注入到 Wordpress 自动注入的下方。

You can read more about RDFa parsing here

html-head 中元标记的选取顺序

Order of picked up meta tags in the html-head

html

wordpress

html-head

meta-tags