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

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

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

以下是<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元标记,在我看来这没有意义。

在后端更改标题页不是解决方案,因为它变成了类似于Check out our great shop!之类的东西,这对用户不友好。另外,我也不喜欢Yoast,因为Yoast会将多余的代码加载到页面中,这是我不想要的。

谁知道解决方案,或者可以解释为什么会这样?

更新并回答
多亏了克里斯,我才知道og:meta标签是从<head>的顶部到底部进行扫描的,并且将2个相同的属性更新为正在扫描的最后一个属性。此RDFa流程通常用于Facebook,Whatsapp,Twitter等应用。 一个异常(exception):顶部似乎需要 og:image,它不会覆盖其下面的第二个或第三个。

与Google搜索相关的标记被<head>顶部的第一个标记拾取,并保持该标记为“先到先得”。

解决方案:我将og:标签注入(inject)<head>的底部,其他标签将保留在顶部。经过测试,它可以正常工作。

最佳答案

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

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

要解决此问题,我想知道是否可以将自定义的og:title/元数据注入(inject)Wordpress自动注入(inject)的og:title/metadata之下。

You can read more about RDFa parsing here

关于html - html头中拾取的元标记的顺序,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/55167667/

10-13 01:24