Вплив протоколу Open Graph на SEO

Що таке Open Graph теги?

Мета-теги або протокол Open Graph було створено Facebook, і він дозволяє відображати будь-яку вебсторінку у збагаченому форматі в соцмережах. Ці HTML-теги відповідатимуть за відображення контенту (заголовок, опис, зображення сторінки тощо) сторінки, якою діляться в соцмережах. Якщо цих тегів немає або вони не зазначені, інформацію буде показано випадково — буде взято випадкове фото, неописовий заголовок чи опис…

Для чого вони використовуються?

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

Протокол Open Graph спочатку використовувався у Facebook і наразі також розпізнається у LinkedIn. З іншого боку, теги Twitter ексклюзивні для цієї соцмережі.

Теги такі:

og:title:

«Title» відповідає за те, щоб сказати пошуковій системі, про що сторінка. Тож він має бути чітким, лаконічним і унікальним на кожній сторінці. Його максимальна довжина — 67 символів.

Приклад:

<meta property="og:title" content="Що таке Open Graph теги?"/>

og:description

«Meta description» — це той, що описує й інформує більш розгорнуто про сторінку. Не повинен перевищувати 155 символів і може містити фразу або CTA, що заохочує відвідувача натиснути на результат. Має також бути унікальним для кожної сторінки.

Приклад:

<meta property="og:description" content="Чи знаєте ви, як відвідувачі бачать ваш сайт, коли діляться ним у соцпрофілях? Open Graph теги відповідатимуть за відображення всієї інформації."/>

og:url:

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

Приклад:

<meta property="og:url" content="/blog/open-graph" />

og:image

Ви маєте вказати URL зображення, щоб воно показувалося на кожній сторінці. Це, безумовно, один з найбільш проігнорованих і один з найважливіших. Google Discover, Google News, Facebook, Twitter, LinkedIn… усі вони підхоплять це зображення як гачок для відвідувача, і якщо воно якісне, ви можете отримати тонни відвідувань. Інакше, якщо залишите поле порожнім, може показатися фото автора, порожнє поле… Виберіть, що краще! ;)

Приклад:

<meta property="og:image" content="/blog/images/open-graph.jpg" />

og:video

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

<meta property="og:video" content="http://example.com/bond/trailer.swf" />

og:type

Цей тег показує, у чому полягає ваш контент. Чи це стаття, відео, пост у блозі… Залежно від типу можна присвоювати різні властивості.

Приклад:

<meta property="og:type" content="article" />

og:site_name

З ним можна вказати ваш сайт, щоб відображався ваш бренд.

<meta property="og:site_name" content="SEO Alive" />

Типи соцмета-тегів, що існують

Наразі теги, створені Facebook, використовуються в інших соцмережах, як-от LinkedIn. Twitter використовує те, що відоме як Twitter Cards. З цими тегами у вас три варіанти:

• ›

  «Photo» для зображень

• ›

  «Player» для відео і

• ›

  «Summary» для всього іншого.

У цьому випадку, як і з картками Open Graph, якщо це не оптимізовано, відображатиметься стандартний і не оптимізований контент.

Інструменти тестування тегів

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

Twitter Card Validator

Інструмент валідації Twitter — Twitter Card Validator. Перш ніж щось публікувати, якщо хочете переконатися, що все відображається правильно, не вагайтеся ввести URL, яким хочете поділитися. Він також дуже корисний, якщо ви оновили зображення сторінки, а стрічка все ще показує старе. Повторний аналіз спрацює як «очистка кешу».

Facebook Debugger

Інструмент налагодження Facebook відомий як Facebook Debugger. З ним можна побачити, яка інформація використовується і як виглядає, коли діляться сторінкою з вашого сайту. Окрім того, якщо якесь з полів неправильне або відсутнє, з'явиться попередження.

Google Structured Data Testing Tool

Google також надає нам інструмент тестування структурованих даних, що називається Google Structured Data Testing Tool. Він дуже корисний для перевірки, який тип розмітки Google підхоплює зі сторінки. Розмітка розпізнається пошуковими системами, що допомагає зробити сайт «семантичним» через впровадження мікроданих Schema, специфічних для кожного випадку.

Rich Pins Validator

Pinterest не міг залишитись осторонь і пропонує свій валідатор пінів, також відомий як Rich Pins Validator. Він працює так само, як валідатор Twitter: потрібен процес затвердження, щоб отримати функціональність Rich Pin і одночасно перевірити розмітку даних.

Як оптимізувати ці теги в WordPress?

Як ви, можливо, знаєте, одна з великих переваг, що пропонує нам WordPress, — його гнучкість і величезна спільнота. Як наслідок, такі процеси, як впровадження open-graph тегів у наші сторінки та статті, займають лічені секунди завдяки плагінам.

Є багато способів цього досягти. У нашому випадку вважаємо, що найпростіше — зробити це через плагін SEO Rank Math.

Рекомендована стаття > Поглиблений SEO-туторіал про Rank Math

Усе, що потрібно, — зайти в розділ SEO відповідної сторінки чи статті, натиснути вкладку «Social», і там ми побачимо опцію налаштування зображення. У багатьох випадках, якщо ми завантажили featured-зображення, він підхопить його напряму.

Поради та покращення

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

Оптимізуйте зображення

Обирайте якісні зображення. Маєте бездоганно обрати кожне зображення, бо воно представлятиме ваш контент. Також саме це зображення з'явиться, коли відвідувач поділиться контентом.

Кожна платформа має певні стандарти; найкраще обрати велике зображення, що зможе підійти для кожної соцмережі.

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

• ›

  Twitter: 120x120px для маленького та 4096x4096px для великого

• ›

  Facebook: найменше — 200px, найбільше — 1200px

Завжди використовуйте Open Graph

Будучи вже відомим форматом, його можуть використовувати більше платформ. Рекомендується використовувати шаблони коду для вставки соцтегів; усю інформацію можете подивитися в наступному гайді.

Рекомендований гайд -> Мета-теги в SEO

Тестуйте та експериментуйте

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

Висновки

Це дрібні деталі, які зроблять ваш бренд чудовим вигляд в очах відвідувачів. Майте на увазі, ці теги необхідні для правильного відображення вашої сторінки й залучення відвідувань. Вони також полегшують пошуковим системам розуміння вашого сайту. Тож SEO-оптимізація також включає увагу до соцмереж.

Пам'ятайте також, що соцсигнали — тобто трафік з соцмереж — можуть позитивно впливати на SEO-стратегію, тож кожен клік з соцмереж важить на вагу золота!

Маєте запитання чи пропозиції? Раді допомогти!

Посилання:

• ›https://ogp.me/ — Офіційний сайт протоколу Open Graph