, если только вы не хотите представить ее как-то по-другому.","type":"unordered-list-item","key":"2512j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"og:type: “Тип” вашего веб-сайта. В следующем разделе я объясню подробнее, но вообще стандартный “тип” — это “веб-сайт”.","type":"unordered-list-item","key":"cg46i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"og:image: Здесь должна находиться ссылка на изображение, которым вы хотите репрезентировать ваш контент. Это должно быть изображение высокого разрешения, которое будет использоваться в лентах социальных сетей.","type":"unordered-list-item","key":"f8ahq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"og:url: Здесь должен находиться URL-адрес текущей страницы.","type":"unordered-list-item","key":"b90n3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На сайте тэг нужно поместить в <head> вместе с прочими метаданными. Используемый тэг будет тэгом <meta> и должен соответствовать следующему образцу:","type":"unstyled","key":"d4mtl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<meta property=“[NAME]” content=“[VALUE]” />","type":"unstyled","key":"fokrp"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":15,"offset":89}],"inlineStyleRanges":[],"text":"Итак, если бы я создавал набор из четырех основных тегов Open Graph для своего веб-сайта colbyfayock.com, он мог бы выглядеть так:","type":"unstyled","key":"9nibn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<meta property=\"og:title\" content=\"Colby Fayock - A UX Designer & Front-end Developer Blog\" /><meta property=\"og:type\" content=\"website\" /><meta property=\"og:image\" content=\"/static/website-social-card-44070c4a901df708aa1563ac4bbe595a.jpg\" /><meta property=\"og:url\" content=\"https://www.colbyfayock.com\" />","type":"unstyled","key":"20e6e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тип веб-сайта в Open Graph","type":"header-three","key":"1epb7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Протокол open graph имеет несколько вариантов “типа” веб-сайта, которые он поддерживает. Они включают в себя такие типы, как веб-сайт (website), статья (article) или видео (video).","type":"unstyled","key":"ekvrh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При настройке тегов Open Graph вы должны иметь представление о том, какой тип будет более подходящим для вашего сайта. Если ваша страница ориентирована на одно видео, то, вероятно, имеет смысл использовать тип “видео”. Если это обычный веб-сайт без конкретной вертикали, вы, вероятно, будете использовать просто тип “веб-сайт”.","type":"unstyled","key":"12bgj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как и в отношении всего прочего, здесь к каждой странице стоит подходить отдельно. Таким образом, если ваша домашняя страница — это “веб-сайт”, у вас всегда может быть другая страница с типом “видео”.","type":"unstyled","key":"diggm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поэтому, если бы я размечал типами Open Graph свой веб-сайт, относительно моей домашней страницы это могло бы выглядеть следующим образом:","type":"unstyled","key":"e9n7m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":0,"style":"ITALIC"}],"text":"<meta property=“og:type” content=“profile” />","type":"unstyled","key":"6n8c4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Но если перейти к посту в блоге, то будет уже иначе:","type":"unstyled","key":"83c9s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":116,"offset":0,"style":"ITALIC"}],"text":"<meta property=“og:type” content=“article” />","type":"unstyled","key":"5usdv"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":21,"offset":75}],"inlineStyleRanges":[],"text":"Наиболее распространенные типы веб-страниц в Open Graph вы можете найти на https://ogp.me/#types.","type":"unstyled","key":"ejqj0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Некоторые другие тэги Open Graph, которые также стоит добавить","type":"header-three","key":"a5hra"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Хотя как правило вам будет вполне достаточно основных тэгов, вот еще несколько примеров:","type":"unstyled","key":"1c1gu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"og:description: Описание вашей страницы. Точно так же, как в случае og: title, его содержимое может быть аналогично тэгу сайта <meta type=“description”>, если только вы не хотите представить его по-другому.","type":"unordered-list-item","key":"5edcf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"og:locale: Если вы хотите локализовать свои тэги, то, вероятно, имеет смысл включить сюда язык ресурса. Формат — language_TERRITORY, где по умолчанию используется en_US.","type":"unordered-list-item","key":"4j2bc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"og:site_name: Название всего веб-сайта, где размещен ваш контент. Если вы находитесь на странице блог-поста, у вас может быть title, где используется название этого конкретного поста, тогда как в site_name будет находится название вашего блога.","type":"unordered-list-item","key":"an5cr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"og:video: У вас есть видео, дополняющее ваш контент? Вот вам и шанс включить его в превью. Добавьте ссылку на свое видео, используя этот тэг.","type":"unordered-list-item","key":"86m08"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Эти тэги добавляются по всё той же схеме:","type":"unstyled","key":"3pau4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<meta property=“[NAME]” content=“[VALUE]” />","type":"unstyled","key":"4ktf1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Twitter и другие социальные сети, использующие Open Graph","type":"header-three","key":"6bmps"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Большинство социальных сетей придерживаются основ стандарта Open Graph, но некоторые из них также задействуют свое собственное расширение, чтобы помочь настроить внешний вид в соответствии с их экосистемой.","type":"unstyled","key":"bi41t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Например, Twitter позволяет вам использовать twitter: card — тип “карточки”, которую вы можете использовать при отображении вашего сайта. В настоящее время типы Twitter-карточек включают в себя:","type":"unstyled","key":"6bhjd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"summary;","type":"unordered-list-item","key":"3494d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"summary_large_image;","type":"unordered-list-item","key":"80sbv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"app;","type":"unordered-list-item","key":"76cut"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"player.","type":"unordered-list-item","key":"ejpe6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Они помогают выбрать, как именно будут отображаться ваши ссылки в ленте Twitter. Например, если вы выберете summary_large_image, то Twitter будет показывать ваши ссылки с большими изображениями высокого разрешения до тех пор, пока вы предоставляете эти изображения в тэге og:image.","type":"unstyled","key":"fu4ds"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот несколько кратких ссылок на документацию о том, как использовать теги Open Graph в некоторых социальных сетях:","type":"unstyled","key":"a8l2v"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":87,"offset":9}],"inlineStyleRanges":[],"text":"Twitter: https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started;","type":"unordered-list-item","key":"63bs8"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":56,"offset":10}],"inlineStyleRanges":[],"text":"Facebook: https://developers.facebook.com/docs/sharing/webmasters/;","type":"unordered-list-item","key":"5nhoh"},{"data":{},"depth":0,"entityRanges":[{"key":7,"length":57,"offset":11}],"inlineStyleRanges":[],"text":"Pinterest: https://developers.pinterest.com/docs/rich-pins/overview/?;","type":"unordered-list-item","key":"36f2u"},{"data":{},"depth":0,"entityRanges":[{"key":8,"length":101,"offset":10}],"inlineStyleRanges":[],"text":"LinkedIn: https://www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareable-on-linkedin?lang=en.","type":"unordered-list-item","key":"8kfep"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Изображения в Open Graph","type":"header-three","key":"4dse5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обычно достаточно добавить ваше изображение в тэг og:image, однако порой может быть непросто сделать так, чтобы это изображение отображалось правильно. На случай если вы столкнулись с проблемой, стандарт Open Graph включает в себя несколько тэгов изображений, таких как og:image:url или og:image:secure_url, а также og:image:width и og:image:height.","type":"unstyled","key":"19d"},{"data":{},"depth":0,"entityRanges":[{"key":9,"length":49,"offset":47},{"key":10,"length":15,"offset":201}],"inlineStyleRanges":[],"text":"Постарайтесь удостовериться, что следуете всем примечаниям и примерам из документации Open Graph. Кроме того, некоторые социальные сети имеют собственные требования относительно изображений. Например, Twitter требует, чтобы соотношение сторон было 2:1, минимальное разрешение — 300×157 и максимальное разрешение — 4096×4096, размер файла составлял меньше 5 Мб, а сам файл был в формате JPG, PNG, WEBP или GIF.","type":"unstyled","key":"3pg30"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вы столкнулись с трудностями, проверьте свои тэги с помощью инструментов конкретной социальной сети и посмотрите, сможете ли обнаружить проблему.","type":"unstyled","key":"a3vh3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тестирование тэгов Open Graph","type":"header-three","key":"dfjsc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"К счастью, наши любимые социальные сети также предоставляют инструменты, помогающие с отладкой тэгов. Как только вы убедитесь, что тэги действительно отображаются в исходном коде вашего сайта, вы сможете просмотреть, как ваш сайт будет выглядеть в ленте:","type":"unstyled","key":"41u9k"},{"data":{},"depth":0,"entityRanges":[{"key":11,"length":39,"offset":9}],"inlineStyleRanges":[],"text":"Twitter: https://cards-dev.twitter.com/validator;","type":"unordered-list-item","key":"8u7t8"},{"data":{},"depth":0,"entityRanges":[{"key":12,"length":44,"offset":10}],"inlineStyleRanges":[],"text":"Facebook: https://developers.facebook.com/tools/debug/;","type":"unordered-list-item","key":"f6iam"},{"data":{},"depth":0,"entityRanges":[{"key":13,"length":52,"offset":11}],"inlineStyleRanges":[],"text":"Pinterest: https://developers.pinterest.com/tools/url-debugger/.","type":"unordered-list-item","key":"bhjmb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подробнее о тэгах Open Graph","type":"header-three","key":"5o7i0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Хотя вышеописанного должно быть достаточно для несложного веб-сайта, есть еще несколько тэгов, которые могут помочь вам и вашему бизнесу раскрыться в социальных сетях.","type":"unstyled","key":"de4lk"},{"data":{},"depth":0,"entityRanges":[{"key":14,"length":12,"offset":64}],"inlineStyleRanges":[],"text":"Если вы заинтересованы в том, чтобы нырнуть глубже, просмотрите документацию, в которой представлен весь список доступных для использования тэгов.","type":"unstyled","key":"978dc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример","type":"header-three","key":"dqjgl"},{"data":{},"depth":0,"entityRanges":[{"key":15,"length":14,"offset":98}],"inlineStyleRanges":[],"text":"Если вы просто ищете пример для того, чтобы начать работу, то вот что у вас должно получиться для записи в блоге:","type":"unstyled","key":"14hhu"},{"data":{"embedData":{"type":"github-gist","nickname":"MrGrandMan","id":"3d7912e04dea8d24064534d119b738c3"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:embed","key":"6u7rs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"98d9o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"97ns6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Читайте также:","type":"unstyled","key":"efif1"},{"data":{},"depth":0,"entityRanges":[{"key":16,"length":49,"offset":0}],"inlineStyleRanges":[],"text":"Введение в GraphQL: сложные операции и переменные","type":"unordered-list-item","key":"539g6"},{"data":{},"depth":0,"entityRanges":[{"key":17,"length":62,"offset":0}],"inlineStyleRanges":[],"text":"Как создать GraphQL-сервер с запросами, мутациями и подписками","type":"unordered-list-item","key":"fnuq8"},{"data":{},"depth":0,"entityRanges":[{"key":18,"length":41,"offset":0}],"inlineStyleRanges":[],"text":"Эмпирический анализ схем GraphQL. Часть 1","type":"unordered-list-item","key":"1svtd"},{"data":{},"depth":0,"entityRanges":[{"key":19,"length":10,"offset":14},{"key":20,"length":2,"offset":27}],"inlineStyleRanges":[],"text":"Читайте нас в телеграмме и vk","type":"unstyled","key":"ado4e"},{"data":{},"depth":0,"entityRanges":[{"key":21,"length":12,"offset":15},{"key":22,"length":55,"offset":29}],"inlineStyleRanges":[{"length":14,"offset":0,"style":"ITALIC"}],"text":"Перевод статьи Colby Fayock: What is Open Graph and how can I use it for my website?","type":"unstyled","key":"b9mkk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"Vydrx8P6Y1VKoHmEQphJ"}],"entityMap":{"11":{"data":{"href":"https://cards-dev.twitter.com/validator","url":"https://cards-dev.twitter.com/validator"},"mutability":"MUTABLE","type":"LINK"},"22":{"data":{"href":"https://www.freecodecamp.org/news/what-is-open-graph-and-how-can-i-use-it-for-my-website/","url":"https://www.freecodecamp.org/news/what-is-open-graph-and-how-can-i-use-it-for-my-website/"},"mutability":"MUTABLE","type":"LINK"},"12":{"data":{"href":"https://developers.facebook.com/tools/debug/","url":"https://developers.facebook.com/tools/debug/"},"mutability":"MUTABLE","type":"LINK"},"13":{"data":{"href":"https://developers.pinterest.com/tools/url-debugger/","url":"https://developers.pinterest.com/tools/url-debugger/"},"mutability":"MUTABLE","type":"LINK"},"14":{"data":{"href":"https://ogp.me/","url":"https://ogp.me/"},"mutability":"MUTABLE","type":"LINK"},"15":{"data":{"href":"https://www.colbyfayock.com/2020/03/anyone-can-map-inspiration-and-an-introduction-to-the-world-of-mapping/","url":"https://www.colbyfayock.com/2020/03/anyone-can-map-inspiration-and-an-introduction-to-the-world-of-mapping/"},"mutability":"MUTABLE","type":"LINK"},"16":{"data":{"href":"https://nuancesprog.ru/p/7717/","url":"https://nuancesprog.ru/p/7717/"},"mutability":"MUTABLE","type":"LINK"},"17":{"data":{"href":"https://nuancesprog.ru/p/5962/","url":"https://nuancesprog.ru/p/5962/"},"mutability":"MUTABLE","type":"LINK"},"18":{"data":{"href":"https://nuancesprog.ru/p/5832/","url":"https://nuancesprog.ru/p/5832/"},"mutability":"MUTABLE","type":"LINK"},"19":{"data":{"href":"https://t.me/nuancesprog","url":"https://t.me/nuancesprog"},"mutability":"MUTABLE","type":"LINK"},"0":{"data":{"url":"https://nuancesprog.ru/p/8337/"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://ogp.me/","url":"https://ogp.me/"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://colbyfayock.com/","url":"https://colbyfayock.com/"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://colbyfayock.com/","url":"https://colbyfayock.com/"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"https://ogp.me/#types","url":"https://ogp.me/#types"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"href":"https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started","url":"https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"href":"https://developers.facebook.com/docs/sharing/webmasters/","url":"https://developers.facebook.com/docs/sharing/webmasters/"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"href":"https://developers.pinterest.com/docs/rich-pins/overview/","url":"https://developers.pinterest.com/docs/rich-pins/overview/"},"mutability":"MUTABLE","type":"LINK"},"8":{"data":{"href":"https://www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareable-on-linkedin?lang=en","url":"https://www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareable-on-linkedin?lang=en"},"mutability":"MUTABLE","type":"LINK"},"9":{"data":{"href":"https://ogp.me/#structured","url":"https://ogp.me/#structured"},"mutability":"MUTABLE","type":"LINK"},"20":{"data":{"href":"https://vk.com/nuancesprog","url":"https://vk.com/nuancesprog"},"mutability":"MUTABLE","type":"LINK"},"10":{"data":{"href":"https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary-card-with-large-image","url":"https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary-card-with-large-image"},"mutability":"MUTABLE","type":"LINK"},"21":{"data":{"href":"https://www.freecodecamp.org/news/author/colbyfayock/","url":"https://www.freecodecamp.org/news/author/colbyfayock/"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}</article></body></html>

{"draftJsState":{"blocks":[{"data":{"image":{"id":"5f705cfafde6297ce3e538ac"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"7re24"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":22,"offset":10}],"inlineStyleRanges":[],"text":"Источник: Nuances of Programming","type":"unstyled","key":"eo1su"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На то, чтобы наполнять сайт контентом и поддерживать его, уходит много времени. Как удостовериться в том, что контент отображается правильно, когда им делятся в лентах социальных сетей на просторах интернета?","type":"unstyled","key":"f79pd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что такое Open Graph?","type":"header-three","key":"7ng7b"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":10,"offset":0}],"inlineStyleRanges":[],"text":"Open Graph — это интернет-протокол, который был создан Facebook, чтобы стандартизировать использование мета-данных, представляющих содержимое веб-страницы.","type":"unstyled","key":"b4d8i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В нем вы можете предоставить такие простые сведения, как название страницы, а также более конкретные, такие как продолжительность видео-фрагмента. Все эти элементы соединяются вместе для создания уникального представления любой интернет-страницы.","type":"unstyled","key":"1uae5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Зачем это нужно?","type":"header-three","key":"acmfg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Контент в интернете обычно создается с одной-единственной целью: поделиться им с другими. Это может быть не так важно, если вы просто отправляете что-либо другу, но если вы хотите, чтобы ваш контент был доступен в социальных сетях и приложениях, использующих богатые превью, тогда необходимо убедиться, чтобы эти превью были максимально полезными.","type":"unstyled","key":"8crhk"},{"data":{"image":{"id":"5f705d0cfde6297ce3e552eb"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"3vufa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Хорошее превью подталкивает людей к тому, чтобы остановить внимание на вашем контенте и в конечном счете перейти к нему с помощью клика.","type":"unstyled","key":"7f9dt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что произойдет при отсутствии превью?","type":"header-three","key":"edin1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Большинство социальных сетей по умолчанию создают превью для вашего контента. Чаще всего результат получается не очень хорошим.","type":"unstyled","key":"aeglm"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":15,"offset":36}],"inlineStyleRanges":[],"text":"Для примера рассмотрим мой веб-сайт colbyfayock.com:","type":"unstyled","key":"2rc56"},{"data":{"image":{"id":"5f705d0cfde6297ce3e552ed"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример простой Twitter-карточки\n","type":"atomic:image","key":"5k9e3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Название страницы и ее описание отображены верно, однако внешне это не самый заманчивый твит в ленте.","type":"unstyled","key":"13sc8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сравните его с превью другого поста и увидите совсем другую историю:","type":"unstyled","key":"e8grv"},{"data":{"image":{"id":"5f705d0cfde6297ce3e552ec"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример Twitter-карточки с крупным изображением\n","type":"atomic:image","key":"1af7p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Так что же произойдет при отсутствии тэгов Open Graph? Ничего плохого, но вы не сможете воспользоваться преимуществами некоторых функций, которые помогают выделить ваш контент среди множества других материалов, размещенных в интернете.","type":"unstyled","key":"5g96d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Основы Open Graph","type":"header-three","key":"4nvee"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Четыре основных тэга Open Graph, которые необходимы для каждой страницы: og:title, og:type, og:image и og:url. Они должны быть уникальными: тэги вашей домашней страницы должны отличаться от тэгов страницы-поста в блоге.","type":"unstyled","key":"3kkpk"},{"data":{"image":{"id":"5f705d0cdf292d11099779d5"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Анатомия Twitter-карточки с тэгами Open Graph\n","type":"atomic:image","key":"6f69d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разберемся, что обозначает каждый из перечисленных тэгов:","type":"unstyled","key":"djjru"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"og:title: Название вашей страницы. Как правило, то же самое, что и тэг веб-страницы , если только вы не хотите представить ее как-то по-другому.","type":"unordered-list-item","key":"2512j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"og:type: “Тип” вашего веб-сайта. В следующем разделе я объясню подробнее, но вообще стандартный “тип” — это “веб-сайт”.","type":"unordered-list-item","key":"cg46i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"og:image: Здесь должна находиться ссылка на изображение, которым вы хотите репрезентировать ваш контент. Это должно быть изображение высокого разрешения, которое будет использоваться в лентах социальных сетей.","type":"unordered-list-item","key":"f8ahq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"og:url: Здесь должен находиться URL-адрес текущей страницы.","type":"unordered-list-item","key":"b90n3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На сайте тэг нужно поместить в <head> вместе с прочими метаданными. Используемый тэг будет тэгом <meta> и должен соответствовать следующему образцу:","type":"unstyled","key":"d4mtl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<meta property=“[NAME]” content=“[VALUE]” />","type":"unstyled","key":"fokrp"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":15,"offset":89}],"inlineStyleRanges":[],"text":"Итак, если бы я создавал набор из четырех основных тегов Open Graph для своего веб-сайта colbyfayock.com, он мог бы выглядеть так:","type":"unstyled","key":"9nibn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<meta property=\"og:title\" content=\"Colby Fayock - A UX Designer & Front-end Developer Blog\" /><meta property=\"og:type\" content=\"website\" /><meta property=\"og:image\" content=\"/static/website-social-card-44070c4a901df708aa1563ac4bbe595a.jpg\" /><meta property=\"og:url\" content=\"https://www.colbyfayock.com\" />","type":"unstyled","key":"20e6e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тип веб-сайта в Open Graph","type":"header-three","key":"1epb7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Протокол open graph имеет несколько вариантов “типа” веб-сайта, которые он поддерживает. Они включают в себя такие типы, как веб-сайт (website), статья (article) или видео (video).","type":"unstyled","key":"ekvrh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При настройке тегов Open Graph вы должны иметь представление о том, какой тип будет более подходящим для вашего сайта. Если ваша страница ориентирована на одно видео, то, вероятно, имеет смысл использовать тип “видео”. Если это обычный веб-сайт без конкретной вертикали, вы, вероятно, будете использовать просто тип “веб-сайт”.","type":"unstyled","key":"12bgj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как и в отношении всего прочего, здесь к каждой странице стоит подходить отдельно. Таким образом, если ваша домашняя страница — это “веб-сайт”, у вас всегда может быть другая страница с типом “видео”.","type":"unstyled","key":"diggm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поэтому, если бы я размечал типами Open Graph свой веб-сайт, относительно моей домашней страницы это могло бы выглядеть следующим образом:","type":"unstyled","key":"e9n7m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":0,"style":"ITALIC"}],"text":"<meta property=“og:type” content=“profile” />","type":"unstyled","key":"6n8c4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Но если перейти к посту в блоге, то будет уже иначе:","type":"unstyled","key":"83c9s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":116,"offset":0,"style":"ITALIC"}],"text":"<meta property=“og:type” content=“article” />","type":"unstyled","key":"5usdv"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":21,"offset":75}],"inlineStyleRanges":[],"text":"Наиболее распространенные типы веб-страниц в Open Graph вы можете найти на https://ogp.me/#types.","type":"unstyled","key":"ejqj0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Некоторые другие тэги Open Graph, которые также стоит добавить","type":"header-three","key":"a5hra"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Хотя как правило вам будет вполне достаточно основных тэгов, вот еще несколько примеров:","type":"unstyled","key":"1c1gu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"og:description: Описание вашей страницы. Точно так же, как в случае og: title, его содержимое может быть аналогично тэгу сайта <meta type=“description”>, если только вы не хотите представить его по-другому.","type":"unordered-list-item","key":"5edcf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"og:locale: Если вы хотите локализовать свои тэги, то, вероятно, имеет смысл включить сюда язык ресурса. Формат — language_TERRITORY, где по умолчанию используется en_US.","type":"unordered-list-item","key":"4j2bc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"og:site_name: Название всего веб-сайта, где размещен ваш контент. Если вы находитесь на странице блог-поста, у вас может быть title, где используется название этого конкретного поста, тогда как в site_name будет находится название вашего блога.","type":"unordered-list-item","key":"an5cr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"og:video: У вас есть видео, дополняющее ваш контент? Вот вам и шанс включить его в превью. Добавьте ссылку на свое видео, используя этот тэг.","type":"unordered-list-item","key":"86m08"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Эти тэги добавляются по всё той же схеме:","type":"unstyled","key":"3pau4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<meta property=“[NAME]” content=“[VALUE]” />","type":"unstyled","key":"4ktf1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Twitter и другие социальные сети, использующие Open Graph","type":"header-three","key":"6bmps"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Большинство социальных сетей придерживаются основ стандарта Open Graph, но некоторые из них также задействуют свое собственное расширение, чтобы помочь настроить внешний вид в соответствии с их экосистемой.","type":"unstyled","key":"bi41t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Например, Twitter позволяет вам использовать twitter: card — тип “карточки”, которую вы можете использовать при отображении вашего сайта. В настоящее время типы Twitter-карточек включают в себя:","type":"unstyled","key":"6bhjd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"summary;","type":"unordered-list-item","key":"3494d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"summary_large_image;","type":"unordered-list-item","key":"80sbv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"app;","type":"unordered-list-item","key":"76cut"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"player.","type":"unordered-list-item","key":"ejpe6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Они помогают выбрать, как именно будут отображаться ваши ссылки в ленте Twitter. Например, если вы выберете summary_large_image, то Twitter будет показывать ваши ссылки с большими изображениями высокого разрешения до тех пор, пока вы предоставляете эти изображения в тэге og:image.","type":"unstyled","key":"fu4ds"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот несколько кратких ссылок на документацию о том, как использовать теги Open Graph в некоторых социальных сетях:","type":"unstyled","key":"a8l2v"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":87,"offset":9}],"inlineStyleRanges":[],"text":"Twitter: https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started;","type":"unordered-list-item","key":"63bs8"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":56,"offset":10}],"inlineStyleRanges":[],"text":"Facebook: https://developers.facebook.com/docs/sharing/webmasters/;","type":"unordered-list-item","key":"5nhoh"},{"data":{},"depth":0,"entityRanges":[{"key":7,"length":57,"offset":11}],"inlineStyleRanges":[],"text":"Pinterest: https://developers.pinterest.com/docs/rich-pins/overview/?;","type":"unordered-list-item","key":"36f2u"},{"data":{},"depth":0,"entityRanges":[{"key":8,"length":101,"offset":10}],"inlineStyleRanges":[],"text":"LinkedIn: https://www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareable-on-linkedin?lang=en.","type":"unordered-list-item","key":"8kfep"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Изображения в Open Graph","type":"header-three","key":"4dse5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обычно достаточно добавить ваше изображение в тэг og:image, однако порой может быть непросто сделать так, чтобы это изображение отображалось правильно. На случай если вы столкнулись с проблемой, стандарт Open Graph включает в себя несколько тэгов изображений, таких как og:image:url или og:image:secure_url, а также og:image:width и og:image:height.","type":"unstyled","key":"19d"},{"data":{},"depth":0,"entityRanges":[{"key":9,"length":49,"offset":47},{"key":10,"length":15,"offset":201}],"inlineStyleRanges":[],"text":"Постарайтесь удостовериться, что следуете всем примечаниям и примерам из документации Open Graph. Кроме того, некоторые социальные сети имеют собственные требования относительно изображений. Например, Twitter требует, чтобы соотношение сторон было 2:1, минимальное разрешение — 300×157 и максимальное разрешение — 4096×4096, размер файла составлял меньше 5 Мб, а сам файл был в формате JPG, PNG, WEBP или GIF.","type":"unstyled","key":"3pg30"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вы столкнулись с трудностями, проверьте свои тэги с помощью инструментов конкретной социальной сети и посмотрите, сможете ли обнаружить проблему.","type":"unstyled","key":"a3vh3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тестирование тэгов Open Graph","type":"header-three","key":"dfjsc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"К счастью, наши любимые социальные сети также предоставляют инструменты, помогающие с отладкой тэгов. Как только вы убедитесь, что тэги действительно отображаются в исходном коде вашего сайта, вы сможете просмотреть, как ваш сайт будет выглядеть в ленте:","type":"unstyled","key":"41u9k"},{"data":{},"depth":0,"entityRanges":[{"key":11,"length":39,"offset":9}],"inlineStyleRanges":[],"text":"Twitter: https://cards-dev.twitter.com/validator;","type":"unordered-list-item","key":"8u7t8"},{"data":{},"depth":0,"entityRanges":[{"key":12,"length":44,"offset":10}],"inlineStyleRanges":[],"text":"Facebook: https://developers.facebook.com/tools/debug/;","type":"unordered-list-item","key":"f6iam"},{"data":{},"depth":0,"entityRanges":[{"key":13,"length":52,"offset":11}],"inlineStyleRanges":[],"text":"Pinterest: https://developers.pinterest.com/tools/url-debugger/.","type":"unordered-list-item","key":"bhjmb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подробнее о тэгах Open Graph","type":"header-three","key":"5o7i0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Хотя вышеописанного должно быть достаточно для несложного веб-сайта, есть еще несколько тэгов, которые могут помочь вам и вашему бизнесу раскрыться в социальных сетях.","type":"unstyled","key":"de4lk"},{"data":{},"depth":0,"entityRanges":[{"key":14,"length":12,"offset":64}],"inlineStyleRanges":[],"text":"Если вы заинтересованы в том, чтобы нырнуть глубже, просмотрите документацию, в которой представлен весь список доступных для использования тэгов.","type":"unstyled","key":"978dc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример","type":"header-three","key":"dqjgl"},{"data":{},"depth":0,"entityRanges":[{"key":15,"length":14,"offset":98}],"inlineStyleRanges":[],"text":"Если вы просто ищете пример для того, чтобы начать работу, то вот что у вас должно получиться для записи в блоге:","type":"unstyled","key":"14hhu"},{"data":{"embedData":{"type":"github-gist","nickname":"MrGrandMan","id":"3d7912e04dea8d24064534d119b738c3"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:embed","key":"6u7rs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"98d9o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"97ns6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Читайте также:","type":"unstyled","key":"efif1"},{"data":{},"depth":0,"entityRanges":[{"key":16,"length":49,"offset":0}],"inlineStyleRanges":[],"text":"Введение в GraphQL: сложные операции и переменные","type":"unordered-list-item","key":"539g6"},{"data":{},"depth":0,"entityRanges":[{"key":17,"length":62,"offset":0}],"inlineStyleRanges":[],"text":"Как создать GraphQL-сервер с запросами, мутациями и подписками","type":"unordered-list-item","key":"fnuq8"},{"data":{},"depth":0,"entityRanges":[{"key":18,"length":41,"offset":0}],"inlineStyleRanges":[],"text":"Эмпирический анализ схем GraphQL. Часть 1","type":"unordered-list-item","key":"1svtd"},{"data":{},"depth":0,"entityRanges":[{"key":19,"length":10,"offset":14},{"key":20,"length":2,"offset":27}],"inlineStyleRanges":[],"text":"Читайте нас в телеграмме и vk","type":"unstyled","key":"ado4e"},{"data":{},"depth":0,"entityRanges":[{"key":21,"length":12,"offset":15},{"key":22,"length":55,"offset":29}],"inlineStyleRanges":[{"length":14,"offset":0,"style":"ITALIC"}],"text":"Перевод статьи Colby Fayock: What is Open Graph and how can I use it for my website?","type":"unstyled","key":"b9mkk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"Vydrx8P6Y1VKoHmEQphJ"}],"entityMap":{"11":{"data":{"href":"https://cards-dev.twitter.com/validator","url":"https://cards-dev.twitter.com/validator"},"mutability":"MUTABLE","type":"LINK"},"22":{"data":{"href":"https://www.freecodecamp.org/news/what-is-open-graph-and-how-can-i-use-it-for-my-website/","url":"https://www.freecodecamp.org/news/what-is-open-graph-and-how-can-i-use-it-for-my-website/"},"mutability":"MUTABLE","type":"LINK"},"12":{"data":{"href":"https://developers.facebook.com/tools/debug/","url":"https://developers.facebook.com/tools/debug/"},"mutability":"MUTABLE","type":"LINK"},"13":{"data":{"href":"https://developers.pinterest.com/tools/url-debugger/","url":"https://developers.pinterest.com/tools/url-debugger/"},"mutability":"MUTABLE","type":"LINK"},"14":{"data":{"href":"https://ogp.me/","url":"https://ogp.me/"},"mutability":"MUTABLE","type":"LINK"},"15":{"data":{"href":"https://www.colbyfayock.com/2020/03/anyone-can-map-inspiration-and-an-introduction-to-the-world-of-mapping/","url":"https://www.colbyfayock.com/2020/03/anyone-can-map-inspiration-and-an-introduction-to-the-world-of-mapping/"},"mutability":"MUTABLE","type":"LINK"},"16":{"data":{"href":"https://nuancesprog.ru/p/7717/","url":"https://nuancesprog.ru/p/7717/"},"mutability":"MUTABLE","type":"LINK"},"17":{"data":{"href":"https://nuancesprog.ru/p/5962/","url":"https://nuancesprog.ru/p/5962/"},"mutability":"MUTABLE","type":"LINK"},"18":{"data":{"href":"https://nuancesprog.ru/p/5832/","url":"https://nuancesprog.ru/p/5832/"},"mutability":"MUTABLE","type":"LINK"},"19":{"data":{"href":"https://t.me/nuancesprog","url":"https://t.me/nuancesprog"},"mutability":"MUTABLE","type":"LINK"},"0":{"data":{"url":"https://nuancesprog.ru/p/8337/"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://ogp.me/","url":"https://ogp.me/"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://colbyfayock.com/","url":"https://colbyfayock.com/"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://colbyfayock.com/","url":"https://colbyfayock.com/"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"https://ogp.me/#types","url":"https://ogp.me/#types"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"href":"https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started","url":"https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"href":"https://developers.facebook.com/docs/sharing/webmasters/","url":"https://developers.facebook.com/docs/sharing/webmasters/"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"href":"https://developers.pinterest.com/docs/rich-pins/overview/","url":"https://developers.pinterest.com/docs/rich-pins/overview/"},"mutability":"MUTABLE","type":"LINK"},"8":{"data":{"href":"https://www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareable-on-linkedin?lang=en","url":"https://www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareable-on-linkedin?lang=en"},"mutability":"MUTABLE","type":"LINK"},"9":{"data":{"href":"https://ogp.me/#structured","url":"https://ogp.me/#structured"},"mutability":"MUTABLE","type":"LINK"},"20":{"data":{"href":"https://vk.com/nuancesprog","url":"https://vk.com/nuancesprog"},"mutability":"MUTABLE","type":"LINK"},"10":{"data":{"href":"https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary-card-with-large-image","url":"https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary-card-with-large-image"},"mutability":"MUTABLE","type":"LINK"},"21":{"data":{"href":"https://www.freecodecamp.org/news/author/colbyfayock/","url":"https://www.freecodecamp.org/news/author/colbyfayock/"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}</article></body></html>