Основи

Як налаштувати красиве відображення сторінок сайту в соцмережах

Дивно, але, як виявилося, багато власників сайтів цього не знають, так що може комусь із читачів і стати в нагоді. Видно, далеко не всі ще заморочуються роботою з соціальними мережами. А дарма, адже для багатьох тематик це просто клондайк трафіку і можливість побудувати потужну спільноту навколо свого проекту. Загалом, перейдемо до справи.

Задати відображення різних елементів сторінки в соцмережах можна за допомогою спеціальних тегів Орепи Graph. У коді сторінки, ці метаописи мають такий вигляд:

Open Graph Tags

Навряд чи вам буде цікава всіляка технічна скукота про стандарти, тому, зручніше показувати все на прикладах.

Загалом, якщо дані теги і їх вміст для окремої сторінки не прописані, Facebook, VK і інші, підтягують що їм заманеться. Зазвичай, це перша-ліпша картинка і перше речення на сторінці. Виглядає не дуже.

Якщо додати сторінку такого сайту в Facebook, відображатися вона буде в такому ось непривабливому вигляді:

На виході якась зовсім несимпатична фігня, а замість превюшки підтягує першу-ліпшу картинку.

А ось як виглядає один з постів відомого сайту Adme.ru:

adme post

І превюшка, і текст анонса – все гармонійно і в тему!

Домогтися такого ж результату для сайту, який працює на WordPress, допоможе плагін Yoast SEO. Я тестував аналогічну можливість і в All-in-One SEO Pack, але там вона працює з глюками і не завжди виводяться задані значення опису. А ось в Yoast все працює як годинник.

Тепер, при створенні запису, крім вкладки для заповнення звичних Title (заголовок сторінки) і Description (опис сторінки), стане доступною і вкладка, в якій можна вказувати метадані для соціальних мереж.

Yoast SEO meta

Для Facebook, VK і Google+ вони однакові, а Twitter можна додавати за бажанням. У мене включено, бо у кожного з проектів, над якими я працюю, там є потенційна аудиторія. Виходить теж симпатично:

primer twita

Щодо заповнення полів, все просто:

  • в поле Facebook Title вказуємо назву сторінки, як ми хочемо, щоб відображалося в цій соцмережі;
  • в поле Facebook Description вказуємо текст, який виводиться в короткому описі;
  • а в Facebook Image вказуємо зображення, яке буде використовуватися в якості прев’юшки.

Приклад:

Щодо рекомендації завантажувати зображення розміром 1200 х 628 пікселів, її можна не дотримуватися, головне, щоб все добре масштабувалось в стрічці новин. Я використовую картинки розміром 720 х 480 пікселів і цього цілком вистачає. Як приклад використовувалася фотографія саме такого розширення.

Щоб перевірити чи все гаразд, можна використовувати спеціальні інструменти, представлені розробниками кожної конкретної соціальної мережі. Але, це буде довго, так що краще використовувати для цих цілей сервіс Socialdebug.com

Вводимо адресу сторінки в полі, і натискаємо кнопку «Grade My URL». Милуємося попереднім переглядом анонса в кожній з популярних соціалок:

All Social Debugger

Якщо ж щось пішло не так, просто вносимо необхідні зміни в коді сторінки на сайті, і повторюємо процедуру перевірки. Справа в тому, що в процесі цього, кеш для соціальних мереж по відношенню до даного URL обнуляється, і якщо ви виправили помилку, все буде приведено до нормального вигляду.

Ну і, не зайвим буде ще раз нагадати, що від того, наскільки привабливим вигляд має ваш анонс, залежить і його клікабельность, тобто, інтерес з боку користувачів і кількість переходів на сайт.

Так що краще витратити трохи часу, але, придумати дійсно цікавий заголовок, опис, і підібрати привабливу картинку.