Какво е 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, може да изглежда така:

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

Протоколът с отворена графика има няколко вариации на „типа“ на уебсайта, който поддържа. Това включва типове като уебсайт, статия или видео.

Когато настройвате вашите отворени маркери на графики, ще искате да имате представа кой тип ще има повече смисъл за вашия уебсайт. Ако страницата ви е фокусирана върху едно видео, вероятно има смисъл да използвате типа „видео“. Ако това е общ уебсайт без конкретна вертикала, вероятно просто бихте искали да използвате типа „уебсайт“.

Подобно на останалите, това е уникално за всяка страница. Така че, ако вашата начална страница е „уебсайт“, винаги можете да имате друга страница от тип „видео“.

Така че, ако трябваше да създам отворен тип графика за моя уебсайт, това може да изглежда по следния начин на началната ми страница:

Когато навигирате към публикация в блог, тя ще изглежда така:

Можете да намерите най-често срещаните типове уебсайтове с отворена графика на уеб страницата с отворена графика: //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, който е под 5MB и във формат 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 и други интересни неща!

  • ? Последвай ме в Туйтър
  • ? ️ Абонирайте се за моя Youtube
  • Регистрирайте се за моя бюлетин