PROGRAMMS
Описание
С развитием соцсетей и прочих способов показывать людям рекламу появилась необходимость красиво показывать ссылки в этих ваших соцсетях. В классической войне стандартов победил Facebook предоставив миру Open Graph.
Выглядит он довольно просто, в шапку страницы добавляется тег meta с сответствующими полями, которые читает парсер и соответственно генерирует виджет ссылки.
Настройка
Базовый набор полей вы можете посмотреть на официальном сайте. Но как всегда естью нюансы. К примеру мессенджеры не вводят свои префиксы, а читают чужие. Посему придётся много дублировать.
og:site_name
<meta property="og:site_name" content="XGM - Next">Используется редко, отображает указанное имя вместо доменного имени.
og:title
<meta property="og:title" content="Make XGM great again!"/>
<meta name="twitter:title" content="Make XGM great again!"/>og:description
<meta name="description" content="Делаем новый современный дизайн для XGM!"/>
<meta property="og:description" content="Делаем новый современный дизайн для XGM!"/>
<meta name="twitter:description" content="Делаем новый современный дизайн для XGM!"/>
<meta property="og:image:alt" content="Делаем новый современный дизайн для XGM!"/>og:type
<meta property="og:type" content="object"/>С полным перечнем типов можно ознакомится на официальном сайте.
og:url
<meta property="og:url" content="https://nazarpunk.github.io/xgm-next/"/>Канонический URL по которому доступна страница. Необходима, чтоб предотвратить переход по не публичным страницам.
og:image
<meta property="og:image" content="https://raw.githubusercontent.com/nazarpunk/xgm-next/master/images/opengraph/repository-open-graph-template.png"/>
<meta name="twitter:image:src" content="https://raw.githubusercontent.com/nazarpunk/xgm-next/master/images/opengraph/repository-open-graph-template.png"/>Куда уж без картинок в современности. И с ними по традиции очень весело. Начнём с того, что каждая соцсеть имеет своё представление о их размере и обрезке. Существуют даже специальные теги для каждой из соцсетей:
- vk:image
- fb:image
- twitter:image
- ...
Подготавливать для каждой из них изображение накладно. В идеале использовать одно универсальное изображение. Дело только подобрать размеры таким образом, чтоб не обрезалась важная часть. Благо на гитхабе это уже сделали и подготовили удобный шаблон:
twitter:card
<meta name="twitter:card" content="summary_large_image"/>Это правило читает не только Twitter, но и к примеру Discord. Отображает большое изображение вместо маленького превью.
Тестирование
Предоставляет отладчик репостов в котором можно посмотреть, как соцсеть отобразит ссылку.
Яндекс
Предоставляет инспектор
Сервисы
Галерея
