Що таке Open Graph і як я можу використовувати його для свого веб-сайту?

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

  • Що таке Open Graph?
  • Навіщо мені це потрібно?
  • Що станеться, якщо у мене його немає?
  • Починаючи з основ відкритого графіка
  • Тип відкритого графіку веб-сайту
  • Деякі інші відкриті теги графіків, які варто додати
  • Twitter та інші соціальні мережі, використовуючи відкритий графік
  • Зображення у відкритому графіку
  • Тестування відкритих тегів графіків
  • Чи можу я отримати приклад?

Що таке Open Graph?

Open Graph - це Інтернет-протокол, який спочатку був створений Facebook для стандартизації використання метаданих на веб-сторінці для представлення вмісту сторінки.

У ній ви можете надати деталі, настільки прості, як заголовок сторінки, або такі конкретні, як тривалість відео. Всі ці частини поєднуються, щоб утворити зображення кожної окремої сторінки Інтернету.

Навіщо мені це потрібно?

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

Як стати веб-розробником повного стеку в 2020 році #javascript #fullstack //t.co/A1TsFaDguD

- Колбі Файок (@colbyfayock) 10 березня 2020 р

Це допоможе заохотити людей перевірити ваш вміст і неминуче перейти до вашого вмісту.

Що станеться, якщо у мене його немає?

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

Візьмемо, наприклад, мій веб-сайт colbyfayock.com.

Він правильно захоплює заголовок моєї сторінки та опис, але це не найпривабливіший твіт у стрічці.

Порівняйте це з попереднім переглядом окремої публікації, і ми бачимо іншу історію.

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

Починаючи з основ відкритого графіка

Чотири основні теги відкритих графіків, необхідні для кожної сторінки og:title, og:type- og:image,, і og:url. Ці теги повинні бути унікальними для кожної сторінки, яку ви обслуговуєте, тобто теги вашої домашньої сторінки повинні відрізнятися від сторінки статті вашого допису в блозі.

Хоча це повинно бути досить просто, ось розбивка того, що означає кожен із тегів:

  • og:title: Заголовок вашої сторінки. Зазвичай це те саме, що тег вашої веб-сторінки, якщо ви не хочете представляти його по-іншому.
  • og:type: "Тип" веб-сайту, який ви маєте. Докладніше я поясню в наступному розділі, хоча загальним “типом” є “веб-сайт”.
  • og:image: Це має бути посиланням на зображення, яке ви хочете представляти своїм вмістом. Це має бути зображення з високою роздільною здатністю, яке соціальні мережі використовуватимуть у своїх стрічках.
  • og:url: Це має бути URL поточної сторінки.

Розміщуючи тег на своєму веб-сайті, ви повинні розміщувати його разом із будь-якими іншими метаданими. Використовуваний тег буде тегом і повинен виглядати так:

Отже, якби я створив набір чотирьох основних тегів з відкритим графіком для свого веб-сайту, colbyfayock.com, це може виглядати так:

Тип відкритого графіку веб-сайту

Протокол Open Graph має кілька варіантів “типу” веб-сайту, який він підтримує. Сюди входять такі типи, як веб-сайт, стаття чи відео.

Налаштовуючи відкриті теги графіків, ви хочете мати уявлення про те, який тип матиме більше сенсу для вашого веб-сайту. Якщо ваша сторінка орієнтована на одне відео, можливо, має сенс використовувати тип “відео”. Якщо це загальний веб-сайт без певної вертикалі, ви, мабуть, просто хочете використовувати тип "веб-сайт".

Подібно до інших, це унікально для кожної сторінки. Отже, якщо вашою домашньою сторінкою є "веб-сайт", ви завжди можете мати іншу сторінку типу "відео".

Отже, якби я створив відкритий тип графіку для свого веб-сайту, це могло б виглядати так на моїй домашній сторінці:

При переході до публікації в блозі це буде виглядати так:

Ви можете знайти найпоширеніші типи веб-сайтів із відкритим графіком на веб-сторінці з відкритим графіком: //ogp.me/#types

Деякі інші відкриті теги графіків, які варто додати

Незважаючи на те, що ви, як правило, добре знаєте основи, ось ще декілька, які варто додати:

  • og:description: Опис вашої сторінки. Так само og:title, це може бути таким самим, як тег вашого веб-сайту , якщо ви не хочете представляти його інакше.
  • og:locale: Якщо ви хочете локалізувати свої теги, мабуть, мало б сенс включити локаль. Формат - language_TERRITORYтам, де за замовчуванням en_US.
  • og:site_name: Назва загального веб-сайту, на якому розміщено ваш вміст. Якщо ви знаходитесь на сторінці допису в блозі, можливо, у вас є titleназва цього допису, де це site_nameбуде ім’я вашого блогу.
  • og:video: У вас є відео, яке підтримує ваш вміст? Ось шанс включити його. Додайте посилання на своє відео за допомогою цього тегу.

Ці теги будуть додані за тим самим шаблоном, що і раніше:

Twitter та інші соціальні мережі, використовуючи відкритий графік

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

Наприклад, Twitter дозволяє вказати twitter:card, який тип «картки» ви можете використовувати, коли вони показують ваш веб-сайт. На даний час їх типи карт включають:

  • резюме
  • summary_large_image
  • додаток
  • програвач

Це допоможе вам вибрати спосіб використання ваших посилань у їхній стрічці. Якщо ви вирішите, summary_large_imageнаприклад, Twitter покаже ваші посилання з великими зображеннями з високою роздільною здатністю, якщо ви надаєте це в og:imageтезі.

Ось декілька коротких посилань на документацію щодо використання тегів відкритих графіків на деяких сайтах соціальних мереж:

  • Twitter: //developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started
  • Facebook: //developers.facebook.com/docs/sharing/webmasters/
  • Pinterest: //developers.pinterest.com/docs/rich-pins/overview/?
  • LinkedIn: //www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareable-on-linkedin?lang=en

Зображення у відкритому графіку

Додаючи своє зображення, як того og:imageчасто має бути достатньо, іноді може бути складно змусити ваше зображення правильно відображатися. Якщо вам здається, що у вас трапляються проблеми, стандарт відкритого графіку включає кілька тегів зображень, таких як og:image:urlvs og:image:secure_url, а також og:image:widthі og:image:height.

Спробуйте переконатися, що ви дотримуєтесь усіх приміток та прикладів у відкритій графічній документації. Крім того, деякі соціальні мережі мають вимоги до іміджу. Наприклад, Twitter вимагає співвідношення 2: 1 з мінімальним розміром 300x157 і максимальним розміром 4096x4096, що менше 5 МБ, а також у форматі JPG, PNG, WEBP або GIF.

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

Тестування відкритих тегів графіків

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

  • Twitter: //cards-dev.twitter.com/validator
  • Facebook: //developers.facebook.com/tools/debug/
  • Pinterest: //developers.pinterest.com/tools/url-debugger/

Копаючись далі у відкриті теги графіків

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

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

//ogp.me/

Чи можу я отримати приклад?

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

Шукаєте інші способи оптимізації та аналізу свого вмісту?

  • Як додати зображення соціальних мереж до вашого сховища проектів Github
  • Як зрозуміти Google Analytics та відвідуваність вашого веб-сайту
  • Як налаштувати та відстежувати ефективність каналу YouTube за допомогою Google Analytics

Слідуйте за мною, щоб дізнатись більше про Javascript, UX та інші цікаві речі!

  • ? Слідуйте за мною у Twitter
  • ? Підписатися на мій Youtube
  • Підпишіться на мою розсилку