[{"data":1,"prerenderedAt":642},["ShallowReactive",2],{"blog-design":3},[4,396],{"id":5,"title":6,"author":7,"body":8,"category":382,"date":383,"description":384,"draft":385,"extension":386,"image":387,"meta":388,"navigation":389,"path":390,"seo":391,"stem":392,"tags":393,"__hash__":395},"blog/blog/open-graph-tags-social-seo.md","Open Graph Tags: The Hidden SEO Trick for Social Media CTR",null,{"type":9,"value":10,"toc":360},"minimark",[11,15,18,23,26,38,42,45,48,51,55,58,63,66,76,80,83,89,93,96,131,145,151,155,158,164,168,179,185,189,192,198,202,205,211,215,218,224,235,239,242,261,265,271,275,278,284,288,291,311,315,320,323,328,331,336,339,344,347,352,355],[12,13,14],"p",{},"Share a link from a properly optimised page on LinkedIn, and you get a beautiful preview card: a sharp hero image, a bold headline, and a concise description that makes people want to click. Share a link from a page without Open Graph tags, and you get a grey box, a random tiny image pulled from a footer widget, and fragment of text that makes no sense out of context.",[12,16,17],{},"The difference between these two outcomes? Four lines of HTML in the page header. And most websites are still getting it wrong.",[19,20,22],"h2",{"id":21},"what-are-open-graph-tags","What Are Open Graph Tags?",[12,24,25],{},"Open Graph (OG) is a protocol created by Facebook in 2010 to standardise how URLs are displayed when shared on social media platforms. It was originally built for the Facebook News Feed, but it's since been adopted by LinkedIn, Twitter/X, Pinterest, Slack, WhatsApp, iMessage, and virtually every other platform that generates link previews.",[12,27,28,29,33,34,37],{},"Open Graph tags are HTML ",[30,31,32],"code",{},"\u003Cmeta>"," tags placed in the ",[30,35,36],{},"\u003Chead>"," section of a web page. They are invisible to your page visitors, but they are read by every social platform's \"link scraper\" the moment someone shares your URL.",[19,39,41],{"id":40},"why-open-graph-tags-are-technically-seo","Why Open Graph Tags Are Technically SEO",[12,43,44],{},"Open Graph tags don't directly influence your Google ranking position. But SEO is not just about rankings — it's about organic traffic. And here, OG tags are critical.",[12,46,47],{},"When your links generate compelling social media previews, more people click them. More clicks = more traffic = more backlinks from people who share your content elsewhere = higher domain authority over time. Additionally, if people stay on your page longer (because it delivered on what the preview promised), your engagement metrics improve, which is a signal Google does monitor.",[12,49,50],{},"Well-crafted OG tags are one of the highest ROI improvements you can make to a webpage, especially for content that gets significant social sharing.",[19,52,54],{"id":53},"the-essential-open-graph-tags","The Essential Open Graph Tags",[12,56,57],{},"Here are the core OG tags every page should have, along with their syntax and the exact values to use:",[59,60,62],"h3",{"id":61},"ogtitle","og:title",[12,64,65],{},"The headline displayed in the social preview card. Keep it between 60–70 characters. It can be the same as your HTML title tag, but you can write a slightly more social-friendly version — more conversational, curiosity-driven, or benefit-focused.",[67,68,74],"pre",{"className":69,"code":71,"language":72,"meta":73},[70],"language-text","\u003Cmeta property=\"og:title\" content=\"Free Image Compressor — Reduce File Size Without Losing Quality\" />\n","text","",[30,75,71],{"__ignoreMap":73},[59,77,79],{"id":78},"ogdescription","og:description",[12,81,82],{},"The supporting text beneath the headline. Keep it under 125 characters for mobile compatibility. Include a benefit and a subtle CTA. This is similar to your meta description but is specifically for social sharing.",[67,84,87],{"className":85,"code":86,"language":72,"meta":73},[70],"\u003Cmeta property=\"og:description\" content=\"Compress JPEG, PNG & WebP images for free. No upload. Files stay in your browser.\" />\n",[30,88,86],{"__ignoreMap":73},[59,90,92],{"id":91},"ogimage","og:image",[12,94,95],{},"The most important Open Graph tag. This is the image displayed in the social preview. Get this wrong, and even a perfect headline is undermined by a blurry, stretched, or missing image.",[97,98,99,107,113,119,125],"ul",{},[100,101,102,106],"li",{},[103,104,105],"strong",{},"Recommended size:"," 1200 × 630 pixels",[100,108,109,112],{},[103,110,111],{},"Minimum size:"," 600 × 315 pixels",[100,114,115,118],{},[103,116,117],{},"File format:"," JPEG or PNG preferred (smaller file sizes)",[100,120,121,124],{},[103,122,123],{},"File size:"," Under 8MB (Facebook limit)",[100,126,127,130],{},[103,128,129],{},"URL:"," Must be an absolute URL (not a relative path)",[12,132,133,134,139,140,144],{},"Use the ",[135,136,138],"a",{"href":137},"/tools/image-resizer","CampaignMorph Image Resizer"," to quickly resize your images to the exact 1200×630px OG specification. For a full breakdown of image dimensions across every platform, see the ",[135,141,143],{"href":142},"/blog/social-media-image-sizes-guide","Social Media Image Sizes Guide",".",[67,146,149],{"className":147,"code":148,"language":72,"meta":73},[70],"\u003Cmeta property=\"og:image\" content=\"https://campaignmorph.com/assets/og-image-compressor.jpg\" />\n",[30,150,148],{"__ignoreMap":73},[59,152,154],{"id":153},"ogurl","og:url",[12,156,157],{},"The canonical URL of the page — the version you want indexed and shared. If your page is accessible via multiple URLs (with and without trailing slash, with UTM parameters, etc.), this tells scrapers which is the definitive one.",[67,159,162],{"className":160,"code":161,"language":72,"meta":73},[70],"\u003Cmeta property=\"og:url\" content=\"https://campaignmorph.com/tools/image-compressor\" />\n",[30,163,161],{"__ignoreMap":73},[59,165,167],{"id":166},"ogtype","og:type",[12,169,170,171,174,175,178],{},"Tells the platform what kind of content this is. The most common values are ",[30,172,173],{},"website"," (for homepages and tool pages) and ",[30,176,177],{},"article"," (for blog posts). Setting this correctly enables richer integrations on some platforms.",[67,180,183],{"className":181,"code":182,"language":72,"meta":73},[70],"\u003Cmeta property=\"og:type\" content=\"article\" />\n",[30,184,182],{"__ignoreMap":73},[59,186,188],{"id":187},"ogsite_name","og:site_name",[12,190,191],{},"The name of your website, displayed as a brand label in the preview. Always include this for brand recognition.",[67,193,196],{"className":194,"code":195,"language":72,"meta":73},[70],"\u003Cmeta property=\"og:site_name\" content=\"CampaignMorph\" />\n",[30,197,195],{"__ignoreMap":73},[59,199,201],{"id":200},"oglocale","og:locale",[12,203,204],{},"Specifies the language and region of the page. This helps social platforms serve the right version to the right audience.",[67,206,209],{"className":207,"code":208,"language":72,"meta":73},[70],"\u003Cmeta property=\"og:locale\" content=\"en_US\" />\n",[30,210,208],{"__ignoreMap":73},[19,212,214],{"id":213},"twitterx-card-tags","Twitter/X Card Tags",[12,216,217],{},"Despite rebranding to X, the platform still uses the \"Twitter Card\" meta tag standard. While Twitter/X will fall back to your Open Graph tags if no Twitter Cards are set, you get more control — and a better preview — by including them explicitly.",[67,219,222],{"className":220,"code":221,"language":72,"meta":73},[70],"\u003Cmeta name=\"twitter:card\" content=\"summary_large_image\" />\n\u003Cmeta name=\"twitter:title\" content=\"Free Image Compressor | CampaignMorph\" />\n\u003Cmeta name=\"twitter:description\" content=\"Compress images without losing quality. Runs in your browser. Free.\" />\n\u003Cmeta name=\"twitter:image\" content=\"https://campaignmorph.com/assets/twitter-card-compressor.jpg\" />\n\u003Cmeta name=\"twitter:site\" content=\"@campaignmorph\" />\n\u003Cmeta name=\"twitter:creator\" content=\"@campaignmorph\" />\n",[30,223,221],{"__ignoreMap":73},[12,225,226,227,230,231,234],{},"The most impactful setting is ",[30,228,229],{},"twitter:card"," set to ",[103,232,233],{},"summary_large_image",". This displays a large, full-width image preview in the feed, which dramatically outperforms the small thumbnail format in engagement.",[19,236,238],{"id":237},"linkedin-specific-considerations","LinkedIn-Specific Considerations",[12,240,241],{},"LinkedIn uses Open Graph tags as its primary metadata source. However, it has some quirks:",[97,243,244,247,258],{},[100,245,246],{},"LinkedIn's link scraper caches previews aggressively. If you update your OG tags after sharing a link, use the LinkedIn Post Inspector to force a cache refresh.",[100,248,249,250,253,254,257],{},"LinkedIn also reads ",[30,251,252],{},"article:published_time"," and ",[30,255,256],{},"article:author"," tags if you're marking the page as an article type, which can add author attribution to the preview.",[100,259,260],{},"Image quality matters more on LinkedIn than other platforms because the preview is displayed larger in the feed. Use crisp, high-contrast images with minimal text.",[19,262,264],{"id":263},"how-to-generate-all-og-tags-for-free","How to Generate All OG Tags for Free",[12,266,267,268,270],{},"You don't need to write this code by hand. The CampaignMorph Meta Tag Generator lets you fill in your title, description, URL, and image URL, then generates the complete HTML for all Open Graph tags, Twitter Card tags, and standard meta tags in one click. Copy the code and paste it into your page's ",[30,269,36],{}," section.",[59,272,274],{"id":273},"generate-your-open-graph-tags-for-free","Generate Your Open Graph Tags for Free",[12,276,277],{},"Enter your details and get complete OG + Twitter Card HTML. Copy and paste into your site.",[12,279,280],{},[135,281,283],{"href":282},"/tools/meta-tag-generator","Open Meta Tag Generator",[19,285,287],{"id":286},"how-to-test-your-open-graph-tags","How to Test Your Open Graph Tags",[12,289,290],{},"After implementing your OG tags, always test before sharing. Use these official tools:",[97,292,293,299,305],{},[100,294,295,298],{},[103,296,297],{},"Facebook Sharing Debugger:"," Go to developers.facebook.com/tools/debug and paste your URL. It scrapes the page, shows the preview, and lets you force a cache refresh if tags were recently changed.",[100,300,301,304],{},[103,302,303],{},"LinkedIn Post Inspector:"," Go to linkedin.com/post-inspector. Enter your URL to see exactly how LinkedIn will display your link preview and to clear the cache.",[100,306,307,310],{},[103,308,309],{},"Twitter Card Validator:"," Visit cards-dev.twitter.com/validator and paste your URL to preview how your Twitter Card will appear in the feed.",[19,312,314],{"id":313},"frequently-asked-questions","Frequently Asked Questions",[12,316,317],{},[103,318,319],{},"Do Open Graph tags help SEO?",[12,321,322],{},"Not directly as a ranking signal, but they have a powerful indirect SEO impact. Better social media previews drive more clicks and shares, which leads to more backlinks and higher domain authority over time. OG tags are one of the highest-ROI on-page improvements for content that is shared socially.",[12,324,325],{},[103,326,327],{},"What is the ideal Open Graph image size?",[12,329,330],{},"The recommended size is 1200 × 630 pixels. This is the size Facebook, LinkedIn, and Twitter/X all use for their standard large image previews. Use a JPEG or PNG file, keep the file under 8MB, and always use an absolute URL (starting with https://).",[12,332,333],{},[103,334,335],{},"Why isn't my Open Graph image showing on Facebook?",[12,337,338],{},"Facebook aggressively caches link previews. If you updated your OG image after the link was first shared, Facebook may still be showing the old cached version. Use the Facebook Sharing Debugger (developers.facebook.com/tools/debug) and click \"Scrape Again\" to force a cache refresh.",[12,340,341],{},[103,342,343],{},"Do I need separate OG tags for every page?",[12,345,346],{},"Yes, ideally. Each page should have unique OG tags — particularly og:title, og:description, og:image, and og:url. Generic site-wide OG tags result in the same preview image appearing whenever any page is shared, which looks unprofessional and reduces CTR.",[12,348,349],{},[103,350,351],{},"What happens if I don't add Open Graph tags?",[12,353,354],{},"Without OG tags, social platforms will guess what to display. They might pull a random image from the page, use the page title, and extract a snippet of body text. The result is often a messy, unappealing preview that gets far fewer clicks than a properly formatted one.",[12,356,357],{},[103,358,359],{},"Open Graph tags are four lines of HTML that can meaningfully increase the traffic you get from every social share of your content. With the CampaignMorph Meta Tag Generator, implementing them takes under two minutes per page. Do it once for every key page on your site and you'll see the results every time someone shares a link.",{"title":73,"searchDepth":361,"depth":361,"links":362},2,[363,364,365,375,376,377,380,381],{"id":21,"depth":361,"text":22},{"id":40,"depth":361,"text":41},{"id":53,"depth":361,"text":54,"children":366},[367,369,370,371,372,373,374],{"id":61,"depth":368,"text":62},3,{"id":78,"depth":368,"text":79},{"id":91,"depth":368,"text":92},{"id":153,"depth":368,"text":154},{"id":166,"depth":368,"text":167},{"id":187,"depth":368,"text":188},{"id":200,"depth":368,"text":201},{"id":213,"depth":361,"text":214},{"id":237,"depth":361,"text":238},{"id":263,"depth":361,"text":264,"children":378},[379],{"id":273,"depth":368,"text":274},{"id":286,"depth":361,"text":287},{"id":313,"depth":361,"text":314},"Design","2026-03-31","Open Graph tags control how your pages look when shared on Facebook, LinkedIn and more. Learn how to write perfect OG tags and generate them free.",false,"md","/blog/open-graph-tags-social-seo.webp",{},true,"/blog/open-graph-tags-social-seo",{"title":6,"description":384},"blog/open-graph-tags-social-seo",[382,394],"UX","J1Fl4rO4SJwos8dD34Ph2HLyhxojCbrH69iJsh5vFpA",{"id":397,"title":398,"author":7,"body":399,"category":382,"date":633,"description":634,"draft":385,"extension":386,"image":635,"meta":636,"navigation":389,"path":637,"seo":638,"stem":639,"tags":640,"__hash__":641},"blog/blog/lorem-ipsum-explained.md","Lorem Ipsum Explained: Why Placeholder Text Matters in Design?",{"type":9,"value":400,"toc":623},[401,408,411,414,418,421,428,431,438,442,445,477,481,484,516,520,523,526,530,533,539,543,546,572,574,579,582,587,590,595,602,607,610,615,618],[12,402,403,404],{},"Open almost any design mockup, website wireframe, or template preview, and you'll see the same strange Latin-looking text: ",[405,406,407],"em",{},"\"Lorem ipsum dolor sit amet, consectetur adipiscing elit…\"",[12,409,410],{},"It appears in Figma files, PowerPoint decks, WordPress themes, and Adobe templates across the entire industry. But what is it? Where did it come from? And why do designers insist on using garbled Latin rather than real content?",[12,412,413],{},"Here's everything you need to know.",[19,415,417],{"id":416},"what-is-lorem-ipsum","What Is Lorem Ipsum?",[12,419,420],{},"Lorem Ipsum is a form of placeholder text used in graphic design and web development since at least the 1960s. Its origins, however, stretch back over 2,000 years.",[12,422,423,424,427],{},"The standard Lorem Ipsum passage is derived from a work by the Roman philosopher and statesman Cicero, written in 45 BC: ",[405,425,426],{},"\"de Finibus Bonorum et Malorum\""," (\"On the Ends of Good and Evil\"). The text was scrambled and rearranged — deliberately made unreadable — to serve as neutral visual filler.",[12,429,430],{},"Lorem Ipsum rose to widespread modern use in the 1960s when Letraset, a company that produced dry-transfer letter sheets for graphic designers, included it in their product catalogues. When digital desktop publishing tools like Aldus PageMaker arrived in the 1980s, Lorem Ipsum was baked in as the default filler, and its reign as the industry standard placeholder text was cemented.",[12,432,433,434,437],{},"It is ",[103,435,436],{},"not"," real, readable Latin. It's a scrambled, grammatically nonsensical sequence of Latin words — which is, of course, the whole point.",[19,439,441],{"id":440},"why-do-designers-use-lorem-ipsum","Why Do Designers Use Lorem Ipsum?",[12,443,444],{},"There is a specific, logical reason designers reach for Lorem Ipsum rather than real content during the design phase:",[97,446,447,453,459,465,471],{},[100,448,449,452],{},[103,450,451],{},"It prevents distraction:"," When reviewers see real copy in a mockup, they focus on the words rather than the layout, typography, and visual hierarchy. Lorem Ipsum is meaningless, so nobody gets distracted debating word choices when the point is to evaluate the design.",[100,454,455,458],{},[103,456,457],{},"It simulates realistic text density:"," Lorem Ipsum mimics how real paragraphs look — varied sentence lengths, punctuation, mixed characters — far better than simply typing \"text here text here text here.\"",[100,460,461,464],{},[103,462,463],{},"It evaluates typography:"," By placing realistic-looking text in your layout, designers can evaluate font choices, line-height, letter spacing, and readability without the copy being ready.",[100,466,467,470],{},[103,468,469],{},"It's universal and language-neutral:"," Design teams around the world use the same filler, which means no accidental language bias or culturally confusing content appears in early-stage mockups shared globally.",[100,472,473,476],{},[103,474,475],{},"It signals \"work in progress\":"," Any team member who sees Lorem Ipsum immediately understands the content hasn't been written yet, so nobody mistakes a mockup for a final design.",[19,478,480],{"id":479},"when-should-you-use-real-text-instead","When Should You Use Real Text Instead?",[12,482,483],{},"Lorem Ipsum is a tool for specific stages of the design process, not all stages. Here's when to switch to real copy:",[97,485,486,492,498,504,510],{},[100,487,488,491],{},[103,489,490],{},"Final design reviews:"," Before a design is approved for development, replace Lorem Ipsum with actual content so stakeholders can evaluate the full picture.",[100,493,494,497],{},[103,495,496],{},"User testing:"," Users being tested on a product should see realistic content to give you meaningful feedback on comprehension and navigation.",[100,499,500,503],{},[103,501,502],{},"When copy length drives layout:"," If a headline varies wildly in length (3 words vs 12 words), you need real copy to see whether the design can accommodate real-world variation.",[100,505,506,509],{},[103,507,508],{},"Landing pages and hero sections:"," When the design and the message are inseparable — such as on a conversion-focused landing page — design with real copy from the start.",[100,511,512,515],{},[103,513,514],{},"Client presentations:"," If a client is seeing a mockup for the first time, Lorem Ipsum can confuse or unsettle them. Use real or realistic copy for client-facing deliverables.",[19,517,519],{"id":518},"how-to-generate-lorem-ipsum-for-free","How to Generate Lorem Ipsum for Free",[12,521,522],{},"You can generate Lorem Ipsum in any amount instantly — by paragraphs, words, or sentences — using the CampaignMorph Lorem Ipsum Generator.",[12,524,525],{},"Simply choose how much text you need, select whether you want whole paragraphs, individual sentences, or a specific word count, and copy the output directly into your design tool or document.",[59,527,529],{"id":528},"generate-lorem-ipsum-text-instantly","Generate Lorem Ipsum Text Instantly",[12,531,532],{},"Choose paragraphs, sentences, or words. Copy with one click. No sign-up.",[12,534,535],{},[135,536,538],{"href":537},"/tools/lorem-ipsum-generator","Open Lorem Ipsum Generator",[19,540,542],{"id":541},"lorem-ipsum-alternatives","Lorem Ipsum Alternatives",[12,544,545],{},"Sometimes standard Lorem Ipsum feels too formal for a casual project, or you simply want some fun in your mockups. Here are some popular alternatives:",[97,547,548,554,560,566],{},[100,549,550,553],{},[103,551,552],{},"Hipster Ipsum:"," Artisanal placeholder text using trendy words like \"mixtape,\" \"sustainable,\" and \"cold-brew.\" Perfect for lifestyle and fashion brands.",[100,555,556,559],{},[103,557,558],{},"Bacon Ipsum:"," Replaces Latin with meat-themed filler text. A favourite among developers with a sense of humour.",[100,561,562,565],{},[103,563,564],{},"Corporate Ipsum:"," Generates authentic-sounding business jargon. Useful when the client insists on business-style filler or when you're presenting to a corporate audience.",[100,567,568,571],{},[103,569,570],{},"Samuel L. Ipsum:"," Memorable quotes in the style of the famous actor. Best for entertainment and media projects.",[19,573,314],{"id":313},[12,575,576],{},[103,577,578],{},"Is Lorem Ipsum real Latin?",[12,580,581],{},"Not exactly. It is derived from real Latin text by the philosopher Cicero, but the standard Lorem Ipsum passage has been deliberately scrambled into a form that is grammatically incorrect and essentially unreadable. This is intentional — it prevents the text from being read or interpreted.",[12,583,584],{},[103,585,586],{},"Can I use Lorem Ipsum in final designs?",[12,588,589],{},"It is strongly not recommended. Final designs, especially those presented to clients or used for user testing, should use real content. Lorem Ipsum in a final design signals an incomplete deliverable and can confuse or frustrate end clients and stakeholders.",[12,591,592],{},[103,593,594],{},"What is the standard Lorem Ipsum paragraph?",[12,596,597,598,601],{},"The classic opening sentence is: ",[405,599,600],{},"\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\""," This is the most widely recognised form and has been in continuous use since the 1960s.",[12,603,604],{},[103,605,606],{},"Why is Lorem Ipsum used instead of real text?",[12,608,609],{},"Because it keeps reviewers focused on the visual design rather than the written content. Real text invites people to edit the copy, debate the wording, or focus on meaning rather than layout. Lorem Ipsum sidesteps all of that, directing attention purely to the design.",[12,611,612],{},[103,613,614],{},"Are there Lorem Ipsum generators in different languages?",[12,616,617],{},"Yes. While the classic Lorem Ipsum is a scrambled form of Latin, many generators now offer placeholders in other scripts, including Chinese, Arabic, Cyrillic, and Japanese — useful for designing internationalised products where character width and rendering matter.",[12,619,620],{},[103,621,622],{},"Lorem Ipsum is one of those design tools so ubiquitous that most people use it without knowing where it came from or why it exists. Now you know both. Use it liberally in your early design phases, switch to real content for final reviews, and let CampaignMorph generate exactly the right amount of placeholder text for any project.",{"title":73,"searchDepth":361,"depth":361,"links":624},[625,626,627,628,631,632],{"id":416,"depth":361,"text":417},{"id":440,"depth":361,"text":441},{"id":479,"depth":361,"text":480},{"id":518,"depth":361,"text":519,"children":629},[630],{"id":528,"depth":368,"text":529},{"id":541,"depth":361,"text":542},{"id":313,"depth":361,"text":314},"2026-03-29","What is Lorem Ipsum, where does it come from, and why do designers use it? Plus a free Lorem Ipsum generator for your next design project.","/blog/lorem-ipsum-explained.webp",{},"/blog/lorem-ipsum-explained",{"title":398,"description":634},"blog/lorem-ipsum-explained",[382,394],"Mm6ubx2yeosvxxIqjdXIF1paiaU76UxsP2gri2rYvgo",1775750160784]