- Мікророзмітки сторінки за допомогою Open Graph
- Створення Twitter Cards
- Налаштування для Google+. мікророзмітки Schema.org
Наша взаимовыгодная связь https://banwar.org/
Без кнопок "Поділиться" зараз неможливо уявити який-небудь сайт і це не дивно, адже соціальні мережі заполонили весь світ. У кожного користувача інтернету є хоча б один активний обліковий запис в соціальній мережі. А можливість розповісти про відвідуваному ресурсі дає сайту нових потенційних відвідувачів або клієнтів. Але часом встановити звичайну кнопку "Поділиться" недостатньо, думаю, багато хто помічав, коли ставлять кнопку, а після натискають її, щоб протестувати, бачать не зовсім бажаний результат:
Як ми бачимо, заголовок і опис лише довантажити зі сторінки, це означає, що нам його потрібно задавати вручну або ж залишати як є. Але от якщо ми ще можемо поставити вручну, то звичайний користувач в ряд чи буде займатися подібним, а відвідувачі його сторінки навіть якщо і побачать цей запис на стіні, то відразу не зрозуміють про що вона і переходити по посиланню не стануть, хіба що заради інтересу . Хотілося б зробити так, щоб при натисканні на кнопку "Поділиться" сайт якось повідомляв соціальної мережі про те, якими даними заповнювати ці поля. Для цього й існують спеціальні протоколи, щоб скористатися ними необхідно лише додати на початку сторінки, в розділі <head>, наведені нижче meta тегів.
Мікророзмітки сторінки за допомогою Open Graph
Протокол Open Graph розуміють такі соціальні мережі як Facebook і VK, тому подальші настройки буде зроблено в першу чергу під них. Додаємо на сторінку такі meta-теги:
<Meta property = "og: locale" content = "ru_RU" />
<Meta property = "og: type" content = "article" />
<Meta property = "og: title" content = "Простір назв" />
<Meta property = "og: description" content = "Опис сторінки" />
<Meta property = "og: image" content = "http://site.com/uploads/image_1.png" />
<Meta property = "og: url" content = "http://site.com/page_1.html" />
<Meta property = "og: site_name" content = "Назва сайту" />
- og: locale - локалізація сайту, для російськомовного сайту ru_RU;
- og: type - тип контенту, за замовчуванням використовується article;
- og: title - заголовок сторінки, який буде виводиться в запису соціальної мережі;
- og: description - опис сторінки;
- og: image - посилання на зображення, яке буде опубліковано в запису;
- og: url - посилання на поточну сторінку;
- og: site_name - назва сайту.
Також, але тільки для Facebook 'а можна додати ще такі meta тегів:
<Meta property = "fb: admins" content = "Facebook_ID" />
<Meta property = "profile: first_name" content = "Ім'я" />
<Meta property = "profile: last_name" content = "Прізвище" />
<Meta property = "profile: username" content = "Нік" />
Якщо основний контент на вашій сторінці - це відео, то необхідно додати також наступні:
<Meta property = "og: video: type" content = "application / x-shockwave-flash" />
<Meta property = "og: video" content = "http://site.com/video/video.swf?file=files/video1001.mp4" />
<Meta property = "og: video: height" content = "720" />
<Meta property = "og: video: width" content = "№1280" />
<Meta property = "og: duration" content = "2520" />
- og: video: type - тип відео;
- og: video - посилання на відеоплеєр;
- og: video: height - висота відеозапису;
- og: video: width - ширина відеозапису;
- og: duration - тривалість відеозапису в секундах.
Детальніше про протокол Open Graph можна почитати в офіційному джерелі .
Створення Twitter Cards
Для сервісу мікроблогів Twitter існує свій набір meta тегів:
<Meta name = "twitter: card" content = "summary">
<Meta name = "twitter: site" content = "Автор">
<Meta name = "twitter: title" content = "Простір назв">
<Meta name = "twitter: description" content = "Опис сторінки">
<Meta name = "twitter: image" content = "http://site.com/image_1.png">
- twitter: card - тип карти, за замовчуванням використовується summary;
- twitter: site - ім'я / логін автора;
- twitter: title - назва сторінки;
- twitter: description - опис сторінки;
- twitter: image - посилання на зображення.
З більш детальною інформацією про типи карт, їх створення, а також валідатором можна ознайомитись в офіційної документації .
Налаштування для Google+. мікророзмітки Schema.org
Наступні meta тегів будуть зрозумілі для мережі Google+ та багатьох інших, які використовують синтаксис Schema.org.
<Meta itemprop = "name" content = "Назва сайту" />
<Meta itemprop = "description" content = "Опис сайту" />
<Meta itemprop = "image" content = "http://site.com/image_1.png" />
Коментувати кожну запис сенсу немає, все зрозуміло з назви.
Тепер при натисканні на кнопку "Поділитися" або при простої публікації посилання, буде довантажувати повна інформація про розміщується сторінці.
Якщо ви використовуєте у себе якусь популярну CMS на зразок WordPress, то можете пошукати вже готовий плагін і не прописувати все вручну. На цьому ж розбір meta тегів для соціальних мереж закінчено. Виникли питання - не соромтеся, задавайте в коментарях.
Swf?
Наша взаимовыгодная связь https://banwar.org/. Запустив новый сайт, "Пари Матч" обещает своим клиентам незабываемый опыт и возможность выиграть крупные суммы.
