[{"data":1,"prerenderedAt":975},["ShallowReactive",2],{"guide-open-graph-tags-guide":3},{"id":4,"title":5,"body":6,"date":965,"description":966,"extension":967,"meta":968,"navigation":969,"path":970,"readingTime":971,"seo":972,"stem":973,"__hash__":974},"guides\u002Fguides\u002Fopen-graph-tags-guide.md","Open Graph Tags Guide",{"type":7,"value":8,"toc":948},"minimark",[9,14,18,21,25,28,108,220,231,235,246,319,322,415,419,422,429,435,441,447,539,550,554,557,560,603,701,711,727,731,734,739,750,754,763,767,776,780,806,810,867,871,914,918,926,930,944],[10,11,13],"h2",{"id":12},"what-is-open-graph","What Is Open Graph?",[15,16,17],"p",{},"Open Graph (OG) is a protocol created by Facebook in 2010. It lets you control how your webpage looks when someone shares it on social media. Without OG tags, platforms guess — they might pull the wrong title, a broken image, or an irrelevant description.",[15,19,20],{},"Any platform that renders link previews — Facebook, LinkedIn, Discord, Slack, Twitter, and others — reads Open Graph tags. Setting them correctly ensures your shared links always look professional and clickable.",[10,22,24],{"id":23},"core-og-tags","Core OG Tags",[15,26,27],{},"Four tags form the minimum viable set. Include them on every page:",[29,30,31,47],"table",{},[32,33,34],"thead",{},[35,36,37,41,44],"tr",{},[38,39,40],"th",{},"Tag",[38,42,43],{},"Purpose",[38,45,46],{},"Example",[48,49,50,65,78,93],"tbody",{},[35,51,52,59,62],{},[53,54,55],"td",{},[56,57,58],"code",{},"og:title",[53,60,61],{},"Headline shown in the preview",[53,63,64],{},"\"JSON Formatter Online - Free Tool\"",[35,66,67,72,75],{},[53,68,69],{},[56,70,71],{},"og:description",[53,73,74],{},"Summary beneath the headline",[53,76,77],{},"\"Format and validate JSON instantly.\"",[35,79,80,85,88],{},[53,81,82],{},[56,83,84],{},"og:image",[53,86,87],{},"Thumbnail image URL",[53,89,90],{},[56,91,92],{},"https:\u002F\u002Fexample.com\u002Fog-image.png",[35,94,95,100,103],{},[53,96,97],{},[56,98,99],{},"og:url",[53,101,102],{},"Canonical URL of the page",[53,104,105],{},[56,106,107],{},"https:\u002F\u002Fexample.com\u002Ftools\u002Fjson-formatter",[109,110,115],"pre",{"className":111,"code":112,"language":113,"meta":114,"style":114},"language-html shiki shiki-themes github-light github-dark","\u003Cmeta property=\"og:title\" content=\"JSON Formatter Online - Free Tool\">\n\u003Cmeta property=\"og:description\" content=\"Format and validate JSON instantly. No signup needed.\">\n\u003Cmeta property=\"og:image\" content=\"https:\u002F\u002Fexample.com\u002Fog-image.png\">\n\u003Cmeta property=\"og:url\" content=\"https:\u002F\u002Fexample.com\u002Ftools\u002Fjson-formatter\">\n","html","",[56,116,117,151,174,197],{"__ignoreMap":114},[118,119,122,126,130,134,137,141,144,146,148],"span",{"class":120,"line":121},"line",1,[118,123,125],{"class":124},"sVt8B","\u003C",[118,127,129],{"class":128},"s9eBZ","meta",[118,131,133],{"class":132},"sScJk"," property",[118,135,136],{"class":124},"=",[118,138,140],{"class":139},"sZZnC","\"og:title\"",[118,142,143],{"class":132}," content",[118,145,136],{"class":124},[118,147,64],{"class":139},[118,149,150],{"class":124},">\n",[118,152,154,156,158,160,162,165,167,169,172],{"class":120,"line":153},2,[118,155,125],{"class":124},[118,157,129],{"class":128},[118,159,133],{"class":132},[118,161,136],{"class":124},[118,163,164],{"class":139},"\"og:description\"",[118,166,143],{"class":132},[118,168,136],{"class":124},[118,170,171],{"class":139},"\"Format and validate JSON instantly. No signup needed.\"",[118,173,150],{"class":124},[118,175,177,179,181,183,185,188,190,192,195],{"class":120,"line":176},3,[118,178,125],{"class":124},[118,180,129],{"class":128},[118,182,133],{"class":132},[118,184,136],{"class":124},[118,186,187],{"class":139},"\"og:image\"",[118,189,143],{"class":132},[118,191,136],{"class":124},[118,193,194],{"class":139},"\"https:\u002F\u002Fexample.com\u002Fog-image.png\"",[118,196,150],{"class":124},[118,198,200,202,204,206,208,211,213,215,218],{"class":120,"line":199},4,[118,201,125],{"class":124},[118,203,129],{"class":128},[118,205,133],{"class":132},[118,207,136],{"class":124},[118,209,210],{"class":139},"\"og:url\"",[118,212,143],{"class":132},[118,214,136],{"class":124},[118,216,217],{"class":139},"\"https:\u002F\u002Fexample.com\u002Ftools\u002Fjson-formatter\"",[118,219,150],{"class":124},[15,221,222,223,226,227,230],{},"Skip any of these four and you risk broken or empty previews. Platforms fall back to scraping ",[56,224,225],{},"\u003Ctitle>"," and the first ",[56,228,229],{},"\u003Cp>"," tag — results are unpredictable.",[10,232,234],{"id":233},"ogtype-values","og:type Values",[15,236,237,238,241,242,245],{},"The ",[56,239,240],{},"og:type"," tag tells the platform what kind of content you are sharing. The default is ",[56,243,244],{},"website",", which covers most pages:",[29,247,248,258],{},[32,249,250],{},[35,251,252,255],{},[38,253,254],{},"Value",[38,256,257],{},"Use When",[48,259,260,269,279,289,299,309],{},[35,261,262,266],{},[53,263,264],{},[56,265,244],{},[53,267,268],{},"General web pages (default)",[35,270,271,276],{},[53,272,273],{},[56,274,275],{},"article",[53,277,278],{},"Blog posts, news stories, guides",[35,280,281,286],{},[53,282,283],{},[56,284,285],{},"product",[53,287,288],{},"E-commerce product pages",[35,290,291,296],{},[53,292,293],{},[56,294,295],{},"profile",[53,297,298],{},"User or organization profiles",[35,300,301,306],{},[53,302,303],{},[56,304,305],{},"video.movie",[53,307,308],{},"Movie or video content",[35,310,311,316],{},[53,312,313],{},[56,314,315],{},"music.song",[53,317,318],{},"Individual music tracks",[15,320,321],{},"For articles, add these supplementary tags:",[109,323,325],{"className":111,"code":324,"language":113,"meta":114,"style":114},"\u003Cmeta property=\"og:type\" content=\"article\">\n\u003Cmeta property=\"article:published_time\" content=\"2026-05-28T09:00:00Z\">\n\u003Cmeta property=\"article:author\" content=\"Jane Doe\">\n\u003Cmeta property=\"article:section\" content=\"Web Development\">\n",[56,326,327,349,371,393],{"__ignoreMap":114},[118,328,329,331,333,335,337,340,342,344,347],{"class":120,"line":121},[118,330,125],{"class":124},[118,332,129],{"class":128},[118,334,133],{"class":132},[118,336,136],{"class":124},[118,338,339],{"class":139},"\"og:type\"",[118,341,143],{"class":132},[118,343,136],{"class":124},[118,345,346],{"class":139},"\"article\"",[118,348,150],{"class":124},[118,350,351,353,355,357,359,362,364,366,369],{"class":120,"line":153},[118,352,125],{"class":124},[118,354,129],{"class":128},[118,356,133],{"class":132},[118,358,136],{"class":124},[118,360,361],{"class":139},"\"article:published_time\"",[118,363,143],{"class":132},[118,365,136],{"class":124},[118,367,368],{"class":139},"\"2026-05-28T09:00:00Z\"",[118,370,150],{"class":124},[118,372,373,375,377,379,381,384,386,388,391],{"class":120,"line":176},[118,374,125],{"class":124},[118,376,129],{"class":128},[118,378,133],{"class":132},[118,380,136],{"class":124},[118,382,383],{"class":139},"\"article:author\"",[118,385,143],{"class":132},[118,387,136],{"class":124},[118,389,390],{"class":139},"\"Jane Doe\"",[118,392,150],{"class":124},[118,394,395,397,399,401,403,406,408,410,413],{"class":120,"line":199},[118,396,125],{"class":124},[118,398,129],{"class":128},[118,400,133],{"class":132},[118,402,136],{"class":124},[118,404,405],{"class":139},"\"article:section\"",[118,407,143],{"class":132},[118,409,136],{"class":124},[118,411,412],{"class":139},"\"Web Development\"",[118,414,150],{"class":124},[10,416,418],{"id":417},"og-image-best-practices","OG Image Best Practices",[15,420,421],{},"The image tag deserves special attention because visuals drive clicks. A strong OG image can increase share engagement by 2–3x.",[15,423,424,428],{},[425,426,427],"strong",{},"Dimensions:"," Use 1200 × 630 pixels. This ratio works across Facebook, LinkedIn, and most platforms. Images smaller than 600 × 315 may appear blurry or get rejected.",[15,430,431,434],{},[425,432,433],{},"File size:"," Keep images under 5 MB. Large files slow down preview rendering and some platforms time out.",[15,436,437,440],{},[425,438,439],{},"Text safety zone:"," Place all text within the center 80% of the image. Platforms crop edges differently — Facebook trims top and bottom on mobile, LinkedIn crops from the sides.",[15,442,443,446],{},[425,444,445],{},"Format:"," PNG or JPEG. Use PNG for graphics with text, JPEG for photographs.",[109,448,450],{"className":111,"code":449,"language":113,"meta":114,"style":114},"\u003Cmeta property=\"og:image\" content=\"https:\u002F\u002Fexample.com\u002Fimages\u002Fog-json-formatter.png\">\n\u003Cmeta property=\"og:image:width\" content=\"1200\">\n\u003Cmeta property=\"og:image:height\" content=\"630\">\n\u003Cmeta property=\"og:image:alt\" content=\"JSON Formatter tool screenshot showing formatted code output\">\n",[56,451,452,473,495,517],{"__ignoreMap":114},[118,453,454,456,458,460,462,464,466,468,471],{"class":120,"line":121},[118,455,125],{"class":124},[118,457,129],{"class":128},[118,459,133],{"class":132},[118,461,136],{"class":124},[118,463,187],{"class":139},[118,465,143],{"class":132},[118,467,136],{"class":124},[118,469,470],{"class":139},"\"https:\u002F\u002Fexample.com\u002Fimages\u002Fog-json-formatter.png\"",[118,472,150],{"class":124},[118,474,475,477,479,481,483,486,488,490,493],{"class":120,"line":153},[118,476,125],{"class":124},[118,478,129],{"class":128},[118,480,133],{"class":132},[118,482,136],{"class":124},[118,484,485],{"class":139},"\"og:image:width\"",[118,487,143],{"class":132},[118,489,136],{"class":124},[118,491,492],{"class":139},"\"1200\"",[118,494,150],{"class":124},[118,496,497,499,501,503,505,508,510,512,515],{"class":120,"line":176},[118,498,125],{"class":124},[118,500,129],{"class":128},[118,502,133],{"class":132},[118,504,136],{"class":124},[118,506,507],{"class":139},"\"og:image:height\"",[118,509,143],{"class":132},[118,511,136],{"class":124},[118,513,514],{"class":139},"\"630\"",[118,516,150],{"class":124},[118,518,519,521,523,525,527,530,532,534,537],{"class":120,"line":199},[118,520,125],{"class":124},[118,522,129],{"class":128},[118,524,133],{"class":132},[118,526,136],{"class":124},[118,528,529],{"class":139},"\"og:image:alt\"",[118,531,143],{"class":132},[118,533,136],{"class":124},[118,535,536],{"class":139},"\"JSON Formatter tool screenshot showing formatted code output\"",[118,538,150],{"class":124},[15,540,541,542,545,546,549],{},"Including ",[56,543,544],{},"og:image:width"," and ",[56,547,548],{},"og:image:height"," helps platforms render previews faster because they skip dimensional lookups.",[10,551,553],{"id":552},"twitter-card-tags","Twitter Card Tags",[15,555,556],{},"Twitter (now X) has its own meta tag system called Twitter Cards. While modern Twitter also reads OG tags, explicit Twitter Card tags give you more control and avoid edge-case fallback issues.",[15,558,559],{},"Two card types matter:",[29,561,562,575],{},[32,563,564],{},[35,565,566,569,572],{},[38,567,568],{},"Card Type",[38,570,571],{},"Layout",[38,573,574],{},"When to Use",[48,576,577,590],{},[35,578,579,584,587],{},[53,580,581],{},[56,582,583],{},"summary",[53,585,586],{},"Small square thumbnail on the left",[53,588,589],{},"Articles, generic pages",[35,591,592,597,600],{},[53,593,594],{},[56,595,596],{},"summary_large_image",[53,598,599],{},"Large image spanning full width",[53,601,602],{},"Visual content, tools, products",[109,604,606],{"className":111,"code":605,"language":113,"meta":114,"style":114},"\u003C!-- summary_large_image — best for tools and products -->\n\u003Cmeta name=\"twitter:card\" content=\"summary_large_image\">\n\u003Cmeta name=\"twitter:title\" content=\"JSON Formatter Online - Free Tool\">\n\u003Cmeta name=\"twitter:description\" content=\"Format and validate JSON instantly.\">\n\u003Cmeta name=\"twitter:image\" content=\"https:\u002F\u002Fexample.com\u002Fimages\u002Fog-json-formatter.png\">\n",[56,607,608,614,637,658,679],{"__ignoreMap":114},[118,609,610],{"class":120,"line":121},[118,611,613],{"class":612},"sJ8bj","\u003C!-- summary_large_image — best for tools and products -->\n",[118,615,616,618,620,623,625,628,630,632,635],{"class":120,"line":153},[118,617,125],{"class":124},[118,619,129],{"class":128},[118,621,622],{"class":132}," name",[118,624,136],{"class":124},[118,626,627],{"class":139},"\"twitter:card\"",[118,629,143],{"class":132},[118,631,136],{"class":124},[118,633,634],{"class":139},"\"summary_large_image\"",[118,636,150],{"class":124},[118,638,639,641,643,645,647,650,652,654,656],{"class":120,"line":176},[118,640,125],{"class":124},[118,642,129],{"class":128},[118,644,622],{"class":132},[118,646,136],{"class":124},[118,648,649],{"class":139},"\"twitter:title\"",[118,651,143],{"class":132},[118,653,136],{"class":124},[118,655,64],{"class":139},[118,657,150],{"class":124},[118,659,660,662,664,666,668,671,673,675,677],{"class":120,"line":199},[118,661,125],{"class":124},[118,663,129],{"class":128},[118,665,622],{"class":132},[118,667,136],{"class":124},[118,669,670],{"class":139},"\"twitter:description\"",[118,672,143],{"class":132},[118,674,136],{"class":124},[118,676,77],{"class":139},[118,678,150],{"class":124},[118,680,682,684,686,688,690,693,695,697,699],{"class":120,"line":681},5,[118,683,125],{"class":124},[118,685,129],{"class":128},[118,687,622],{"class":132},[118,689,136],{"class":124},[118,691,692],{"class":139},"\"twitter:image\"",[118,694,143],{"class":132},[118,696,136],{"class":124},[118,698,470],{"class":139},[118,700,150],{"class":124},[15,702,703,710],{},[425,704,705,706,709],{},"Always set ",[56,707,708],{},"twitter:card"," first."," The card type determines how Twitter interprets all other tags. Without it, Twitter ignores your other Twitter meta tags entirely.",[15,712,713,714,717,718,721,722,545,724,726],{},"If you omit ",[56,715,716],{},"twitter:title"," or ",[56,719,720],{},"twitter:image",", Twitter falls back to ",[56,723,58],{},[56,725,84],{},". This works most of the time, but defining both sets eliminates ambiguity.",[10,728,730],{"id":729},"testing-and-debugging-og-tags","Testing and Debugging OG Tags",[15,732,733],{},"Never publish OG tags without testing them. Each platform caches previews aggressively — fixing mistakes after deployment often requires cache-busting.",[735,736,738],"h3",{"id":737},"facebook-sharing-debugger","Facebook Sharing Debugger",[15,740,741,742,749],{},"Visit ",[743,744,748],"a",{"href":745,"rel":746},"https:\u002F\u002Fdevelopers.facebook.com\u002Ftools\u002Fdebug\u002F",[747],"nofollow","developers.facebook.com\u002Ftools\u002Fdebug\u002F"," and enter your URL. It shows exactly what Facebook renders, including warnings for missing or malformed tags. Click \"Scrape Again\" to force a cache refresh.",[735,751,753],{"id":752},"linkedin-post-inspector","LinkedIn Post Inspector",[15,755,756,757,762],{},"Go to ",[743,758,761],{"href":759,"rel":760},"https:\u002F\u002Fwww.linkedin.com\u002Fpost-inspector\u002F",[747],"linkedin.com\u002Fpost-inspector\u002F"," to preview how LinkedIn displays your link. This tool also clears LinkedIn's cache.",[735,764,766],{"id":765},"twitter-card-validator","Twitter Card Validator",[15,768,769,770,775],{},"Use ",[743,771,774],{"href":772,"rel":773},"https:\u002F\u002Fcards-dev.twitter.com\u002Fvalidator",[747],"cards-dev.twitter.com\u002Fvalidator"," to check your Twitter Card markup. Note: Twitter's tool sometimes requires login.",[735,777,779],{"id":778},"general-tips","General Tips",[781,782,783,790,800],"ul",{},[784,785,786,789],"li",{},[425,787,788],{},"Test before launch"," — once a platform caches a broken preview, clearing it can take hours",[784,791,792,795,796,799],{},[425,793,794],{},"Use query strings to bust cache"," — append ",[56,797,798],{},"?v=2"," to your URL when testing changes",[784,801,802,805],{},[425,803,804],{},"Check HTTPS"," — mixed-content images (HTTP OG images on HTTPS pages) get blocked by most platforms",[10,807,809],{"id":808},"common-og-tag-mistakes","Common OG Tag Mistakes",[781,811,812,820,830,836,844,855,861],{},[784,813,814,819],{},[425,815,816,817],{},"Missing ",[56,818,84],{}," — the most impactful tag omitted most often; previews show blank thumbnails",[784,821,822,825,826,829],{},[425,823,824],{},"Using relative image URLs"," — OG images must be absolute, including the protocol (",[56,827,828],{},"https:\u002F\u002F",")",[784,831,832,835],{},[425,833,834],{},"Tiny or low-resolution images"," — anything under 600 × 315 looks blurry on desktop",[784,837,838,843],{},[425,839,840,841],{},"Forgetting ",[56,842,708],{}," — without it, Twitter ignores every other Twitter meta tag",[784,845,846,851,852,854],{},[425,847,848,849],{},"Not setting ",[56,850,240],{}," — platforms default to ",[56,853,244],{},", which may strip article-specific features",[784,856,857,860],{},[425,858,859],{},"Stale cached previews"," — after updating OG tags, the old version may persist for days without manual cache clearing",[784,862,863,866],{},[425,864,865],{},"Images behind authentication"," — crawlers cannot access login-protected images, so previews break",[10,868,870],{"id":869},"key-takeaways","Key Takeaways",[781,872,873,887,890,902,908,911],{},[784,874,875,876,878,879,878,881,883,884,886],{},"Include ",[56,877,58],{},", ",[56,880,71],{},[56,882,84],{},", and ",[56,885,99],{}," on every page",[784,888,889],{},"Use 1200 × 630 pixel images with text in the center 80% safety zone",[784,891,892,893,895,896,898,899,901],{},"Set ",[56,894,240],{}," to ",[56,897,275],{}," for blog posts and ",[56,900,244],{}," for tool pages",[784,903,904,905,907],{},"Always add ",[56,906,708],{}," — it activates all other Twitter Card tags",[784,909,910],{},"Test previews with Facebook Debugger, LinkedIn Inspector, and Twitter Validator before launch",[784,912,913],{},"Use absolute HTTPS URLs for all OG image paths",[10,915,917],{"id":916},"try-it-yourself","Try It Yourself",[15,919,920,921,925],{},"Build your OG and Twitter Card tags the easy way with our free ",[743,922,924],{"href":923},"\u002Ftools\u002Fmeta-tag-generator","Meta Tag Generator",". Fill in your content details and copy the complete HTML snippet — includes Open Graph, Twitter Cards, and standard SEO meta tags.",[10,927,929],{"id":928},"related-guides","Related Guides",[781,931,932,938],{},[784,933,934],{},[743,935,937],{"href":936},"\u002Fguides\u002Fmeta-tag-generator-guide","Meta Tag Generator Guide",[784,939,940],{},[743,941,943],{"href":942},"\u002Fguides\u002Fseo-tools-for-developers","SEO Tools for Developers",[945,946,947],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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 .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":114,"searchDepth":153,"depth":153,"links":949},[950,951,952,953,954,955,961,962,963,964],{"id":12,"depth":153,"text":13},{"id":23,"depth":153,"text":24},{"id":233,"depth":153,"text":234},{"id":417,"depth":153,"text":418},{"id":552,"depth":153,"text":553},{"id":729,"depth":153,"text":730,"children":956},[957,958,959,960],{"id":737,"depth":176,"text":738},{"id":752,"depth":176,"text":753},{"id":765,"depth":176,"text":766},{"id":778,"depth":176,"text":779},{"id":808,"depth":153,"text":809},{"id":869,"depth":153,"text":870},{"id":916,"depth":153,"text":917},{"id":928,"depth":153,"text":929},"2026-05-28","Complete guide to Open Graph meta tags — control how your content appears when shared on Facebook, LinkedIn, and more.","md",{"immutable":969},true,"\u002Fguides\u002Fopen-graph-tags-guide",7,{"title":5,"description":966},"guides\u002Fopen-graph-tags-guide","e5znqxINbtA2HTO1zvP9Dchf6_VD4Khq5d-yL_tpF0k",1780401330584]