Question

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

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

一旦有人告诉我<head>顶部的第一个meta标签将被选作meta标签，例如将其用于丰富的预览，但这似乎不再发生了。 / p>

以下是我的当前情况以及<head>中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会将多余的代码加载到页面中，这是我不想要的。

谁知道解决方案，或者可以解释为什么会发生这种情况？

更新并回答
多亏了克里斯，我才知道og：元标记正在<head>中从上到下进行扫描，并用正在扫描的最后一个更新了2个相同的属性。此RDFa流程通常用于Facebook，Whatsapp，Twitter等应用。 一个例外： og:image似乎需要放在顶部，它不会覆盖其下面的第二个或第三个。

<head>顶部的第一个标签会拾取与Google搜索相关的标签，并将其保留为“先到先得”。

解决方案：：我将og：标签插入<head>的底部，其他标签将保留在顶部。经过测试，它可以正常工作。

Answer 1

Facebook和其他应用程序通常使用自己的简化版本的RDFa解析，据我所知，RDFa解析是一种解析xml和html文档中的元数据的方法。从我阅读的内容来看，解析器遍历您的html页面时，似乎会将找到的第一个元数据片段添加到它的“当前主题”中，如果找到另一个具有相同名称的元数据，它将覆盖“当前主题”以及更新的信息。

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

为解决此问题，我想知道是否可以将自定义的og：title /元数据注入Wordpress自动注入的og.title /元数据之下。

You can read more about RDFa parsing here

html头中拾取的元标记的顺序

1 个答案: