[{"data":1,"prerenderedAt":478},["ShallowReactive",2],{"page:\u002Fru\u002Fposts\u002Fcode_n_shit\u002Flinks_preview":3,"translations:\u002Fru\u002Fposts\u002Fcode_n_shit\u002Flinks_preview":477},{"id":4,"title":5,"author":6,"body":7,"date":462,"description":463,"draft":464,"extension":465,"image":466,"listed":467,"meta":468,"navigation":467,"path":469,"seo":470,"stem":471,"tags":472,"theme":6,"toc":467,"__hash__":476},"content_ru\u002Fru\u002Fposts\u002Fcode_n_shit\u002Flinks_preview.md","OpenGraph: предпросмотр ссылок в Telegram и Facebook",null,{"type":8,"value":9,"toc":455},"minimark",[10,15,19,22,26,34,41,44,49,57,119,130,134,137,143,193,198,348,372,376,384,388,451],[11,12,14],"h2",{"id":13},"о-чем-это-всё","О чем это всё",[16,17,18],"p",{},"Недавно(нет) я заметил, что ссылки на мои статьи неправильно \"предпоказываются\" в Telegram(и как выяснилось в facebook), несмотря на то, что я включил OpenGraph в hugo. Почему? Сейчас разберемся, а также глянем, что такое OpenGraph в целом.",[20,21],"hr",{},[11,23,25],{"id":24},"opengraph","OpenGraph",[16,27,28,29,33],{},"OpenGraph это разработка всем известного ",[30,31,32],"del",{},"the"," facebook. Смысл в том, чтобы облегчить в первую очередь себе, но заодно и всем другим социальным платформам(в данном контексте любое место, где можно делиться контентом, в том числе и ссылками) взаимодействие со сторонними ресурсами. Что все это значит для пользователя? Ссылка оставленная в соц. сети выглядит не так:",[16,35,36],{},[37,38],"img",{"alt":39,"src":40},"","\u002Fimages\u002Flinks_preview\u002Fwithout_og.png",[16,42,43],{},"А так:",[16,45,46],{},[37,47],{"alt":39,"src":48},"\u002Fimages\u002Flinks_preview\u002Fwith_og.png",[16,50,51,52,56],{},"Как? С помощью мета-данных. Не знаю точно, но могу даже предположить, что парсеру не нужно читать страницу дальше ",[53,54,55],"code",{},"\u003C\u002Fhead>",", ведь именно там и задаются мета-данные. Краткий обзор на то, какие определены стандартом:",[58,59,60,68,74,80,86,92,98,104,110],"ul",{},[61,62,63,67],"li",{},[64,65,66],"strong",{},"og:locale"," — указывает локализацию (язык сайта), можно использовать значение \"ru_RU\" по умолчанию.",[61,69,70,73],{},[64,71,72],{},"og:type"," — указывает тип страницы (статья, новость, видео, категория и т. д.), можно использовать по умолчанию \"article\".",[61,75,76,79],{},[64,77,78],{},"og:title"," — указывает заголовок статьи.",[61,81,82,85],{},[64,83,84],{},"og:description"," — указывает краткое описание, которое выводится при формировании превью ссылки.",[61,87,88,91],{},[64,89,90],{},"og:url"," — ссылка на страницу сайта.",[61,93,94,97],{},[64,95,96],{},"og:image"," — ссылка на картинку, которая будет отображаться в посте.",[61,99,100,103],{},[64,101,102],{},"og:site_name"," — название сайта.",[61,105,106,109],{},[64,107,108],{},"og:video"," - ссылка на видео, если тип будет video, то подтянет данный видео-файл.",[61,111,112,115,116],{},[64,113,114],{},"og:audio"," - ссылка на аудио, тоже самое что и video. Также есть ",[64,117,118],{},"og:music",[16,120,121,122,129],{},"На самом деле еще очень много разных типов и расширений у них, так что для полного ознакомления лучше почитать на ",[123,124,128],"a",{"href":125,"rel":126},"https:\u002F\u002Fogp.me\u002F",[127],"nofollow","главной странице проекта\u002Fстандарта",".",[11,131,133],{"id":132},"как-начать-использовать","Как начать использовать",[16,135,136],{},"Если речь идет про hugo, то ссылка на мануал далее. Если же речь идет о сайте на своих шаблонах и рендерах, то добавляется это все следующим образом:",[138,139,140],"ol",{},[61,141,142],{},"Большинство соц. сетей сами понимают, что сайт использует OpenGraph и читают сразу мета-данные, однако иногда, например в случае Telegram, нужно указывать это явно с помощью аттрибута:",[144,145,149],"pre",{"className":146,"code":147,"language":148,"meta":39,"style":39},"language-html shiki shiki-themes monokai","\u003Chtml prefix=\"og: http:\u002F\u002Fogp.me\u002Fns#\">\n    *  *  *\n\u003C\u002Fhtml>\n","html",[53,150,151,177,183],{"__ignoreMap":39},[152,153,156,160,163,167,170,174],"span",{"class":154,"line":155},"line",1,[152,157,159],{"class":158},"sCdxs","\u003C",[152,161,148],{"class":162},"s8I7P",[152,164,166],{"class":165},"sHkqI"," prefix",[152,168,169],{"class":158},"=",[152,171,173],{"class":172},"s_Ekj","\"og: http:\u002F\u002Fogp.me\u002Fns#\"",[152,175,176],{"class":158},">\n",[152,178,180],{"class":154,"line":179},2,[152,181,182],{"class":158},"    *  *  *\n",[152,184,186,189,191],{"class":154,"line":185},3,[152,187,188],{"class":158},"\u003C\u002F",[152,190,148],{"class":162},[152,192,176],{"class":158},[138,194,195],{"start":179},[61,196,197],{},"Далее указываем сами типы, файлы и тд.:",[144,199,201],{"className":146,"code":200,"language":148,"meta":39,"style":39},"\u003Cmeta property=\"og:type\" content=\"article\">\n\u003Cmeta property=\"og:title\" content=\"Vue и Битрикс24\">\n\u003Cmeta property=\"og:description\" content=\"Однажды мне пришлось…\">\n\u003Cmeta property=\"og:url\" content=\"https:\u002F\u002Fslnt-opp.xyz\u002Fposts\u002Fcode_n_shit\u002Fbx24\u002F\">\n\u003Cmeta property=\"og:image\" content=\"https:\u002F\u002Fslnt-opp.xyz\u002Fimages\u002Fbx24_vue.png\">\n\u003Cmeta property=\"og:video\" content=\"https:\u002F\u002Fslnt-opp.xyz\u002Fmov\u002Fbx24.mov\">\n\u003C!-- Кстати пока что видео еще нигде не спарсилось -->\n",[53,202,203,228,250,272,295,318,341],{"__ignoreMap":39},[152,204,205,207,210,213,215,218,221,223,226],{"class":154,"line":155},[152,206,159],{"class":158},[152,208,209],{"class":162},"meta",[152,211,212],{"class":165}," property",[152,214,169],{"class":158},[152,216,217],{"class":172},"\"og:type\"",[152,219,220],{"class":165}," content",[152,222,169],{"class":158},[152,224,225],{"class":172},"\"article\"",[152,227,176],{"class":158},[152,229,230,232,234,236,238,241,243,245,248],{"class":154,"line":179},[152,231,159],{"class":158},[152,233,209],{"class":162},[152,235,212],{"class":165},[152,237,169],{"class":158},[152,239,240],{"class":172},"\"og:title\"",[152,242,220],{"class":165},[152,244,169],{"class":158},[152,246,247],{"class":172},"\"Vue и Битрикс24\"",[152,249,176],{"class":158},[152,251,252,254,256,258,260,263,265,267,270],{"class":154,"line":185},[152,253,159],{"class":158},[152,255,209],{"class":162},[152,257,212],{"class":165},[152,259,169],{"class":158},[152,261,262],{"class":172},"\"og:description\"",[152,264,220],{"class":165},[152,266,169],{"class":158},[152,268,269],{"class":172},"\"Однажды мне пришлось…\"",[152,271,176],{"class":158},[152,273,275,277,279,281,283,286,288,290,293],{"class":154,"line":274},4,[152,276,159],{"class":158},[152,278,209],{"class":162},[152,280,212],{"class":165},[152,282,169],{"class":158},[152,284,285],{"class":172},"\"og:url\"",[152,287,220],{"class":165},[152,289,169],{"class":158},[152,291,292],{"class":172},"\"https:\u002F\u002Fslnt-opp.xyz\u002Fposts\u002Fcode_n_shit\u002Fbx24\u002F\"",[152,294,176],{"class":158},[152,296,298,300,302,304,306,309,311,313,316],{"class":154,"line":297},5,[152,299,159],{"class":158},[152,301,209],{"class":162},[152,303,212],{"class":165},[152,305,169],{"class":158},[152,307,308],{"class":172},"\"og:image\"",[152,310,220],{"class":165},[152,312,169],{"class":158},[152,314,315],{"class":172},"\"https:\u002F\u002Fslnt-opp.xyz\u002Fimages\u002Fbx24_vue.png\"",[152,317,176],{"class":158},[152,319,321,323,325,327,329,332,334,336,339],{"class":154,"line":320},6,[152,322,159],{"class":158},[152,324,209],{"class":162},[152,326,212],{"class":165},[152,328,169],{"class":158},[152,330,331],{"class":172},"\"og:video\"",[152,333,220],{"class":165},[152,335,169],{"class":158},[152,337,338],{"class":172},"\"https:\u002F\u002Fslnt-opp.xyz\u002Fmov\u002Fbx24.mov\"",[152,340,176],{"class":158},[152,342,344],{"class":154,"line":343},7,[152,345,347],{"class":346},"snpHw","\u003C!-- Кстати пока что видео еще нигде не спарсилось -->\n",[138,349,350],{"start":185},[61,351,352,353],{},"Опционально, но часто важно, если ссылка уже была обработана соц. сетью.\n",[138,354,355,364],{},[61,356,357,358,363],{},"Если Telegram, нужно найти ",[123,359,362],{"href":360,"rel":361},"https:\u002F\u002Ft.me\u002FWebpageBot",[127],"бота @WebpageBot",", и перепарсить контент и превью.",[61,365,366,367,129],{},"Для Facebook, Pinterest, LinkedIn и Twitter нужно открыть соответствующую консоль разработчика и перепарсить тут, заодно там же можно получить полезную стату по твоему сайту. ",[123,368,371],{"href":369,"rel":370},"https:\u002F\u002Fsupport.shareaholic.com\u002Fhc\u002Fen-us\u002Farticles\u002F360000263426-How-to-clear-link-preview-cache-stored-by-Facebook-Pinterest-LinkedIn-Twitter",[127],"Мануалы здесь",[11,373,375],{"id":374},"подключение-opengraph-в-hugo","Подключение OpenGraph в hugo",[16,377,378,379,129],{},"OpenGraph является стандартным встроенным в hugo компонентом, поэтому для любых шаблонов все подключается просто через конфиг: ",[123,380,383],{"href":381,"rel":382},"https:\u002F\u002Fgohugo.io\u002Ftemplates\u002Finternal\u002F#configure-open-graph",[127],"мануал",[11,385,387],{"id":386},"ссылки","Ссылки",[58,389,390,400,409,417,426,435,444],{},[61,391,392,395,396],{},[64,393,394],{},"Главная страница проекта"," - ",[123,397,399],{"href":125,"rel":398},[127],"ссылка",[61,401,402,395,405],{},[64,403,404],{},"Краткое описание на Вики",[123,406,399],{"href":407,"rel":408},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FFacebook_Platform#Graph_API",[127],[61,410,411,395,414],{},[64,412,413],{},"Как перепарсить свой сайт в соц. сетях",[123,415,399],{"href":369,"rel":416},[127],[61,418,419,395,422],{},[64,420,421],{},"Как перепарсить сайт в Telegram и почему префикс это важно",[123,423,399],{"href":424,"rel":425},"https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002F34707915\u002Fhow-do-you-clear-the-open-graph-cache-of-an-url-on-telegram",[127],[61,427,428,395,431],{},[64,429,430],{},"Как перепарсить сайт в Telegram",[123,432,399],{"href":433,"rel":434},"https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002F35268940\u002Fhow-to-force-telegram-to-update-link-preview",[127],[61,436,437,395,440],{},[64,438,439],{},"Мануал на русском языке",[123,441,399],{"href":442,"rel":443},"https:\u002F\u002Fq-seo.com.ua\u002Fblog\u002Fchto-takoye-open-graph-i-kak-effektivno-yego-ispolzovat\u002F",[127],[61,445,446,395,448],{},[64,447,375],{},[123,449,399],{"href":381,"rel":450},[127],[452,453,454],"style",{},"html pre.shiki code .sCdxs, html code.shiki .sCdxs{--shiki-default:#F8F8F2}html pre.shiki code .s8I7P, html code.shiki .s8I7P{--shiki-default:#F92672}html pre.shiki code .sHkqI, html code.shiki .sHkqI{--shiki-default:#A6E22E}html pre.shiki code .s_Ekj, html code.shiki .s_Ekj{--shiki-default:#E6DB74}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .snpHw, html code.shiki .snpHw{--shiki-default:#88846F}",{"title":39,"searchDepth":179,"depth":179,"links":456},[457,458,459,460,461],{"id":13,"depth":179,"text":14},{"id":24,"depth":179,"text":25},{"id":132,"depth":179,"text":133},{"id":374,"depth":179,"text":375},{"id":386,"depth":179,"text":387},"2020-01-26","О чем это всё Недавно(нет) я заметил, что ссылки на мои статьи неправильно \"предпоказываются\" в Telegram(и как выяснилось в facebook), несмотря на то, что я включил OpenGraph в hugo. Почему? Сейчас разберемся, а также глянем, что такое OpenGraph в целом. ---",false,"md","\u002Fimages\u002Flinks_preview\u002Flogo.png",true,{},"\u002Fru\u002Fposts\u002Fcode_n_shit\u002Flinks_preview",{"title":5,"description":463},"ru\u002Fposts\u002Fcode_n_shit\u002Flinks_preview",[53,473,474,475],"blog","frameworks","hugo","G-n0vtTDzCMPCy-daBEWzOtFLR2PQXtx_2ToGxVRxps",[],1790369235096]