Порядок подбора метатегов в html-заголовке - PullRequest
Новая
       61

Порядок подбора метатегов в html-заголовке

5 голосов
/ 14 марта 2019

Мне было интересно, может ли кто-нибудь объяснить, как предварительные просмотры в социальных сетях определяют, какой og:title выбрать.

Я использую wordpress и для определенных страниц вставляю php echo-строки, чтобы вставить их в <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 загружает на страницы дополнительный код, который мне не нужен.

Кто знает решение этого или может объяснить, почему это происходит?

Обновление и ответ
Благодаря Крису я понимаю, что мета-теги og: сканируются сверху вниз в <head>, и обновляет 2 идентичных свойства с последним сканируемым. Этот процесс RDFa типичен для таких приложений, как Facebook, Whatsapp, Twitter. Одно исключение: og:image, похоже, необходимо в верхней части, оно не переопределяет ни одну, ни третью под ним.

Теги, связанные с поиском Google, выбираются первым в верхней части <head> и сохраняют его как «первым пришел, первым обслужен».

Решение: Я вставлю теги og: в нижнюю часть <head>, а остальные останутся в верхней части. Протестировал и все работает.

1 Ответ

1 голос
/ 14 марта 2019

Facebook и другие приложения, как правило, используют свои уменьшенные версии синтаксического анализа RDFa, что, на мой взгляд, является способом анализа метаданных из XML и HTML-документов. Из того, что я читал, кажется, что когда анализатор просматривает вашу html-страницу, он добавит первую найденную часть метаданных в свою «текущую тему», и если он найдет другую с тем же именем, он затем перезапишет "текущая тема" с обновленной информацией.

Кажется, это довольно сложная тема, поэтому я полагаю, что простым ответом будет то, что их парсер всегда будет брать последний тег метаданных и использовать его.

Чтобы решить эту проблему, я хотел бы посмотреть, можете ли вы вставить свой собственный og: title / metadata ниже того, который автоматически вводится Wordpress.

Подробнее о разборе RDFa можно прочитать здесь

...