Метатеги социальных изображений - property="og:image" name="twitter:image" itemprop="image"

Question

Социальные сети неплохо справляются с извлечением заголовков и описаний с веб-сайтов, когда URL-адрес является общим, но для изображений по-прежнему необходимо создавать собственные метатеги: property="og:image"name="twitter:image"itemprop="image", Итак, мой вопрос, будет ли это работать:

<meta property="og:image" name="twitter:image" itemprop="image" content="http://example.com/image.jpg" />

Поэтому мне не нужно создавать 3 разных мета-тега для каждой веб-страницы на моем сайте.

Answer 1

property атрибут из RDFa, itemprop атрибут из микроданных, а name атрибут из простого HTML.

С помощью itemprop а также property вместе возможно, но микроданные не позволяют name атрибут на meta элемент с itemprop атрибут (в то время как RDFa позволяет это), так что вы можете использовать два элемента:

<meta property="og:image" name="twitter:image" content="http://example.com/image.jpg" />
<meta itemprop="image" content="http://example.com/image.jpg" />
<!-- note that this snippet is still invalid, see below -->

<meta name="twitter:image" content="http://example.com/image.jpg" />
<meta itemprop="image" property="og:image" content="http://example.com/image.jpg" />
<!-- note that this snippet is still invalid, see below -->

Поскольку Schema.org также можно использовать с RDFa, вы можете опустить микроданные (если только вам не нужна поддержка потребителя, который не поддерживает RDFa):

<meta property="og:image image" name="twitter:image" content="http://example.com/image.jpg" />
<!-- note that this snippet is still invalid, see below -->

Почему они недействительны? Потому что вы должны использовать link элемент вместо meta элемент, если значение является URI. Однако на практике это проблематично, потому что:

• twitter:url определяется как расширение мета, а не как тип ссылки (но поскольку значение является URL-адресом, это должен быть тип ссылки)
• Кажется, Facebook распознает только metaне link (Я не проверял это, это то, что я прочитал несколько раз, когда отвечал на вопросы об этом здесь - например, например: Должны ли og:image и og:url вставляться в или ?)

Таким образом, хотя Twitter Cards и OGP Facebook предлагают использовать (и, вероятно, поддерживают только) недопустимую разметку, это не обязательно относится к потребителям Schema.org. Таким образом, вы можете объединить неверный и действительный путь:

<meta name="twitter:image" property="og:image" content="http://example.com/image.jpg" /> <!-- invalid, but expected -->
<link property="image" href="http://example.com/image.jpg" /> <!-- valid -->

(Обратите внимание, что все эти фрагменты с Schema.org image свойство ожидать родительского элемента с vocab, Если вы не предоставите это, не ясно, к какому словарному image собственность принадлежит. Если вы не можете, вы должны использовать schema:image вместо.)