[{"data":1,"prerenderedAt":1072},["ShallowReactive",2],{"/blog/colour-theory-101-marketers-make-visuals-that-convert":3,"recommended-/blog/colour-theory-101-marketers-make-visuals-that-convert":453},{"id":4,"title":5,"author":6,"body":7,"category":439,"date":440,"description":441,"draft":442,"extension":443,"image":444,"meta":445,"navigation":446,"path":447,"seo":448,"stem":449,"tags":450,"__hash__":452},"blog/blog/colour-theory-101-marketers-make-visuals-that-convert.md","Colour Theory 101 for Marketers: Make Visuals That Convert",null,{"type":8,"value":9,"toc":417},"minimark",[10,19,26,29,34,37,59,69,73,76,81,88,94,98,105,110,114,121,126,130,133,138,142,145,150,154,161,166,170,173,187,191,194,220,224,227,234,249,260,264,267,274,281,285,288,314,317,321,324,331,335,340,343,348,351,356,359,364,367,372,375,380,394,399],[11,12,13,14,18],"p",{},"Colour is the silent salesperson. Before a customer reads a single word of your copy, before they register your headline or your offer, their brain has already processed the colour of your visual and formed an emotion. That process takes approximately ",[15,16,17],"strong",{},"90 milliseconds",".",[11,20,21,22,25],{},"Research consistently shows that up to ",[15,23,24],{},"90% of snap judgements about products"," are based on colour alone, and that colour can increase brand recognition by up to 80%. Yet most marketers choose colours based on personal preference, or worse, \"what looks nice.\" Colour theory provides a rational, evidence-based framework for making visual decisions that actually move people to act.",[11,27,28],{},"You don't need an art degree to use it. This guide will equip you with the fundamentals—everything a marketer needs, nothing they don't.",[30,31,33],"h2",{"id":32},"the-colour-wheel-understanding-the-basics","The Colour Wheel: Understanding the Basics",[11,35,36],{},"The colour wheel is the foundational map of colour relationships. All of colour theory flows from it.",[38,39,40,47,53],"ul",{},[41,42,43,46],"li",{},[15,44,45],{},"Primary Colours:"," Red, Yellow, Blue (in traditional pigment theory). In screen/light theory (relevant for digital marketing), the primaries are Red, Green, Blue (RGB).",[41,48,49,52],{},[15,50,51],{},"Secondary Colours:"," Colours formed by mixing two primaries - Orange (Red + Yellow), Green (Blue + Yellow), Purple (Red + Blue).",[41,54,55,58],{},[15,56,57],{},"Tertiary Colours:"," The in-between shades - Yellow-Orange, Red-Orange, Red-Purple, Blue-Purple, Blue-Green, Yellow-Green.",[11,60,61,64,65,68],{},[15,62,63],{},"Warm Colours"," (Reds, Oranges, Yellows) sit on one half of the wheel. They create feelings of energy, warmth, urgency, and appetite. ",[15,66,67],{},"Cool Colours"," (Blues, Greens, Purples) sit on the other half. They create feelings of calm, trust, logic, and cool detachment.",[30,70,72],{"id":71},"the-6-colour-harmony-rules","The 6 Colour Harmony Rules",[11,74,75],{},"Colour harmony is the practice of choosing colours that work well together. There are six core rules:",[77,78,80],"h3",{"id":79},"_1-complementary-colours","1. Complementary Colours",[11,82,83,84,87],{},"Complementary colours sit ",[15,85,86],{},"directly opposite each other"," on the colour wheel (e.g., Blue and Orange, Red and Green, Purple and Yellow). They create maximum contrast and visual tension.",[11,89,90,93],{},[15,91,92],{},"In Marketing:"," Ideal for high-energy, attention-grabbing designs. Sports brands, fast food, and sale promotions often use complementary schemes. Think of the New York Knicks' blue and orange, or Fanta's orange on blue.",[77,95,97],{"id":96},"_2-analogous-colours","2. Analogous Colours",[11,99,100,101,104],{},"Analogous colours are ",[15,102,103],{},"three colours sitting side by side"," on the wheel (e.g., Blue, Blue-Green, Green). They are harmonious, calming, and pleasing to the eye; there's no visual conflict.",[11,106,107,109],{},[15,108,92],{}," Perfect for wellness, nature, or lifestyle brands that want to feel cohesive and serene. Think Starbucks' use of greens. The risk is that they can feel low-energy if there's no contrast element.",[77,111,113],{"id":112},"_3-triadic-colours","3. Triadic Colours",[11,115,116,117,120],{},"A triadic scheme uses ",[15,118,119],{},"three colours evenly spaced around the wheel"," (e.g., Red, Yellow, Blue, or Orange, Green, Purple). It creates a vibrant, playful balance.",[11,122,123,125],{},[15,124,92],{}," Children's brands, creative agencies, and entertainment companies use triadic palettes. They feel fun and energetic without the harsh tension of complementary pairs.",[77,127,129],{"id":128},"_4-split-complementary-colours","4. Split-Complementary Colours",[11,131,132],{},"Instead of using the exact complement of a colour, you take the two colours adjacent to the complement. For example, instead of Blue + Orange, you use Blue + Yellow-Orange + Red-Orange.",[11,134,135,137],{},[15,136,92],{}," A safer version of the complementary scheme. It provides a strong visual contrast without the aggressive tension. Good for businesses that want to stand out without shouting.",[77,139,141],{"id":140},"_5-tetradic-square-colours","5. Tetradic (Square) Colours",[11,143,144],{},"Four colours forming a square or rectangle on the colour wheel - two complementary pairs. This scheme is rich and complex.",[11,146,147,149],{},[15,148,92],{}," Can work beautifully but requires care. One colour must dominate, or the design feels chaotic. Best left for experienced designers or very controlled brand applications.",[77,151,153],{"id":152},"_6-monochromatic-colours","6. Monochromatic Colours",[11,155,156,157,160],{},"A monochromatic scheme uses ",[15,158,159],{},"one hue at varying levels of saturation and lightness",". For example, a deep navy, a mid-blue, a sky blue, and a near-white, all derived from the same blue hue.",[11,162,163,165],{},[15,164,92],{}," Extremely clean, sophisticated, and easy to execute. It creates a strong visual identity and high brand recognition. Many premium SaaS and fintech brands use monochromatic schemes precisely because they feel polished and professional.",[30,167,169],{"id":168},"colour-temperature-and-emotion","Colour Temperature and Emotion",[11,171,172],{},"Beyond harmony rules, the overall \"temperature\" of your palette sends a message before any individual colour is identified.",[38,174,175,181],{},[41,176,177,180],{},[15,178,179],{},"Warm Palettes (Red, Orange, Yellow):"," Trigger a sense of urgency, appetite, energy, and excitement. Excellent for food and beverage, retail sales, fitness, and entertainment. The human eye is drawn to warm colours first - which is why \"Buy Now\" buttons are often red or orange.",[41,182,183,186],{},[15,184,185],{},"Cool Palettes (Blue, Green, Purple):"," Trigger calm, trust, intelligence, and health. Essential for finance, tech, healthcare, insurance, and professional services. These colours make people feel safe leaving their data with you.",[30,188,190],{"id":189},"saturation-and-brightness-in-marketing","Saturation and Brightness in Marketing",[11,192,193],{},"The \"mood\" of a colour is as much about its purity and brightness as its hue.",[38,195,196,202,208,214],{},[41,197,198,201],{},[15,199,200],{},"High Saturation (Vivid colours):"," Feel bold, youthful, urgent, and playful. Used by children's brands, discount retailers, and social platforms targeting younger demographics.",[41,203,204,207],{},[15,205,206],{},"Low Saturation (Muted, desaturated colours):"," Feel sophisticated, premium, calm, and mature. Used by luxury brands, wellness products, and editorial media.",[41,209,210,213],{},[15,211,212],{},"High Brightness (Light tones):"," Approachable, friendly, fresh. Used by new startups and consumer apps.",[41,215,216,219],{},[15,217,218],{},"Low Brightness (Dark tones):"," Premium, serious, exclusive. Used by luxury watches, prestige cars, and high-end food and drink.",[30,221,223],{"id":222},"contrast-and-accessibility-in-marketing","Contrast and Accessibility in Marketing",[11,225,226],{},"No matter how beautiful your palette is, if people can't read your content, it fails. Contrast is not just a design nicety — in many markets, it is a legal accessibility requirement.",[11,228,229,230,233],{},"The ",[15,231,232],{},"WCAG 2.1 AA standard"," (Web Content Accessibility Guidelines) requires:",[38,235,236,243],{},[41,237,238,239,242],{},"A minimum contrast ratio of ",[15,240,241],{},"4.5:1"," for normal body text.",[41,244,238,245,248],{},[15,246,247],{},"3:1"," for large text (18pt+ or 14pt bold).",[11,250,251,252,255,256,259],{},"Two quick practical tests: The ",[15,253,254],{},"Squint Test"," — squint your eyes until your design blurs. If the text and background melt into each other, contrast is too low. The ",[15,257,258],{},"Greyscale Test"," — convert your design to greyscale. Can you still read it clearly? If yes, your contrast works. If not, adjust.",[30,261,263],{"id":262},"colour-in-calls-to-action-and-conversion","Colour in Calls-to-Action and Conversion",[11,265,266],{},"Few topics in marketing generate more debate than \"what colour should my CTA button be?\" Dozens of case studies claim that red outperforms green or that orange outperforms blue. The truth is more nuanced.",[11,268,269,270,273],{},"The most important principle is ",[15,271,272],{},"contrast, not hue",". Your CTA button simply needs to stand out visually from its surrounding background. On a predominantly blue page, an orange button stands out. On a white page, a deep green button stands out. The specific colour is secondary — what matters is that it commands attention.",[11,275,276,277,280],{},"The secondary principle is ",[15,278,279],{},"temperature and urgency",". For time-limited offers and checkout buttons, warm colours (red, orange) can create subtle urgency. For trust-based actions (e.g., \"Book a Consultation,\" \"Sign Up Free\"), cool or neutral colours feel less pressuring.",[30,282,284],{"id":283},"cultural-colour-considerations","Cultural Colour Considerations",[11,286,287],{},"Colour meaning is not universal. If you operate globally, be aware of cultural differences:",[38,289,290,296,302,308],{},[41,291,292,295],{},[15,293,294],{},"White:"," Purity in Western cultures, but associated with mourning in China, Japan, and parts of South Asia.",[41,297,298,301],{},[15,299,300],{},"Red:"," Danger and urgency in the West; luck, prosperity, and celebration in China and India.",[41,303,304,307],{},[15,305,306],{},"Green:"," Has significant religious meaning in Islamic contexts (used prominently in flags). Exercise care when using green in Middle Eastern marketing.",[41,309,310,313],{},[15,311,312],{},"Purple:"," Royalty in Western contexts; mourning in parts of Brazil and Thailand.",[11,315,316],{},"Major global brands often adapt their colour usage by market. What resonates in one culture can actively offend in another.",[77,318,320],{"id":319},"ready-to-apply-colour-theory-to-your-brand","Ready to apply colour theory to your brand?",[11,322,323],{},"Convert, extract, and refine your colours with free browser tools.",[11,325,326],{},[327,328,330],"a",{"href":329},"/tools/color-converter","Open Colour Converter",[30,332,334],{"id":333},"frequently-asked-questions","Frequently Asked Questions",[11,336,337],{},[15,338,339],{},"What is the most effective colour for a call-to-action button?",[11,341,342],{},"There is no single \"best\" CTA colour. The most effective colour is the one that provides the highest contrast against the page background while fitting the brand's temperature. Orange and red are common choices because they contrast well against blue and white page designs.",[11,344,345],{},[15,346,347],{},"Does colour really affect purchasing decisions?",[11,349,350],{},"Yes, substantially. Research consistently shows that colour is the first sensory input processed when viewing a product or website, and that it influences perceived value, trust, and urgency. Up to 85% of purchasing decisions are influenced by colour.",[11,352,353],{},[15,354,355],{},"What colour combinations should I avoid?",[11,357,358],{},"Avoid: Red text on a blue background (vibrates and causes eye strain). Pure Yellow text on white (near-invisible). Very similar hues with low contrast (looks accidental). Neon colours for body text (impossible to read for extended periods). These combinations actively harm readability and user experience.",[11,360,361],{},[15,362,363],{},"What is a monochromatic colour scheme?",[11,365,366],{},"A monochromatic scheme uses a single hue (colour) but varies its saturation (purity) and lightness (how light or dark it is). For example, a palette of navy, mid-blue, light blue, and near-white is monochromatic. It feels clean, cohesive, and professional.",[11,368,369],{},[15,370,371],{},"How do I check if my colour contrast is accessible?",[11,373,374],{},"Use a free online contrast checker (search \"WCAG contrast checker\"). Enter your text colour and background colour, and the tool tells you whether you meet the AA or AAA standard. Many browser developer tools also have this built into the accessibility inspector.",[11,376,377],{},[15,378,379],{},"What is the difference between hue, saturation, and brightness?",[11,381,382,385,386,389,390,393],{},[15,383,384],{},"Hue"," is the \"name\" of the colour — Red, Blue, Green. ",[15,387,388],{},"Saturation"," is how vivid or grey it is — 100% is pure colour, 0% is completely grey. ",[15,391,392],{},"Brightness/Lightness"," is how light or dark it is — 100% is white, 0% is black. Together, these three properties completely describe any colour.",[11,395,396],{},[15,397,398],{},"Colour theory is not a creative luxury; it is a strategic toolkit. Whether you are designing a landing page, choosing packaging, or picking a button colour, applying these principles will result in more effective, more compelling, and more accessible marketing.",[11,400,401,402,406,407,411,412,416],{},"Explore related guides: ",[327,403,405],{"href":404},"/blog/brand-visual-identity-guide","Brand Visual Identity Guide"," and ",[327,408,410],{"href":409},"/blog/how-to-choose-brand-colors","How to Choose Brand Colours",". Ready to put theory into practice? Use the ",[327,413,415],{"href":414},"/tools/color-palette-extractor","Colour Palette Extractor"," to build your first harmonious palette.",{"title":418,"searchDepth":419,"depth":419,"links":420},"",2,[421,422,431,432,433,434,435,438],{"id":32,"depth":419,"text":33},{"id":71,"depth":419,"text":72,"children":423},[424,426,427,428,429,430],{"id":79,"depth":425,"text":80},3,{"id":96,"depth":425,"text":97},{"id":112,"depth":425,"text":113},{"id":128,"depth":425,"text":129},{"id":140,"depth":425,"text":141},{"id":152,"depth":425,"text":153},{"id":168,"depth":419,"text":169},{"id":189,"depth":419,"text":190},{"id":222,"depth":419,"text":223},{"id":262,"depth":419,"text":263},{"id":283,"depth":419,"text":284,"children":436},[437],{"id":319,"depth":425,"text":320},{"id":333,"depth":419,"text":334},"Design","2026-04-12","Learn colour theory fundamentals for marketing — the colour wheel, harmony rules, contrast, accessibility and psychology — all explained for non-designers.",false,"md","/blog/colour-theory-101-marketers-make-visuals-that-convert.webp",{},true,"/blog/colour-theory-101-marketers-make-visuals-that-convert",{"title":5,"description":441},"blog/colour-theory-101-marketers-make-visuals-that-convert",[439,451],"Product Mockup","mbk8t0vp6PyqZWm03NPzRfoPJkO5TFuaPVbhF46w-o8",[454,701],{"id":455,"title":456,"author":6,"body":457,"category":439,"date":691,"description":692,"draft":442,"extension":443,"image":693,"meta":694,"navigation":446,"path":695,"seo":696,"stem":697,"tags":698,"__hash__":700},"blog/blog/lorem-ipsum-explained.md","Lorem Ipsum Explained: Why Placeholder Text Matters in Design?",{"type":8,"value":458,"toc":681},[459,466,469,472,476,479,486,489,496,500,503,535,539,542,574,578,581,584,588,591,597,601,604,630,632,637,640,645,648,653,660,665,668,673,676],[11,460,461,462],{},"Open almost any design mockup, website wireframe, or template preview, and you'll see the same strange Latin-looking text: ",[463,464,465],"em",{},"\"Lorem ipsum dolor sit amet, consectetur adipiscing elit…\"",[11,467,468],{},"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?",[11,470,471],{},"Here's everything you need to know.",[30,473,475],{"id":474},"what-is-lorem-ipsum","What Is Lorem Ipsum?",[11,477,478],{},"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.",[11,480,481,482,485],{},"The standard Lorem Ipsum passage is derived from a work by the Roman philosopher and statesman Cicero, written in 45 BC: ",[463,483,484],{},"\"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.",[11,487,488],{},"Lorem Ipsum rose to widespread use in the 1960s, when Letraset, a company that produced dry-transfer letter sheets for graphic designers, included it in its product catalogues. When digital desktop publishing tools like Aldus PageMaker arrived in the 1980s, Lorem Ipsum was baked in as the default filler, cementing its reign as the industry-standard placeholder text.",[11,490,491,492,495],{},"It is ",[15,493,494],{},"not"," real, readable Latin. It's a scrambled, grammatically nonsensical sequence of Latin words — which is, of course, the whole point.",[30,497,499],{"id":498},"why-do-designers-use-lorem-ipsum","Why Do Designers Use Lorem Ipsum?",[11,501,502],{},"There is a specific, logical reason designers reach for Lorem Ipsum rather than real content during the design phase:",[38,504,505,511,517,523,529],{},[41,506,507,510],{},[15,508,509],{},"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.",[41,512,513,516],{},[15,514,515],{},"It simulates realistic text density:"," Lorem Ipsum mimics how real paragraphs look, with varied sentence lengths, punctuation, and mixed characters, far better than simply typing \"text here text here text here.\"",[41,518,519,522],{},[15,520,521],{},"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.",[41,524,525,528],{},[15,526,527],{},"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.",[41,530,531,534],{},[15,532,533],{},"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.",[30,536,538],{"id":537},"when-should-you-use-real-text-instead","When Should You Use Real Text Instead?",[11,540,541],{},"Lorem Ipsum is a tool for specific stages of the design process, not all stages. Here's when to switch to real copy:",[38,543,544,550,556,562,568],{},[41,545,546,549],{},[15,547,548],{},"Final design reviews:"," Before a design is approved for development, replace Lorem Ipsum with actual content so stakeholders can evaluate the full picture.",[41,551,552,555],{},[15,553,554],{},"User testing:"," Users being tested on a product should see realistic content to give you meaningful feedback on comprehension and navigation.",[41,557,558,561],{},[15,559,560],{},"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.",[41,563,564,567],{},[15,565,566],{},"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.",[41,569,570,573],{},[15,571,572],{},"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.",[30,575,577],{"id":576},"how-to-generate-lorem-ipsum-for-free","How to Generate Lorem Ipsum for Free",[11,579,580],{},"You can generate Lorem Ipsum in any amount instantly, by paragraphs, words, or sentences, using the CampaignMorph Lorem Ipsum Generator.",[11,582,583],{},"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.",[77,585,587],{"id":586},"generate-lorem-ipsum-text-instantly","Generate Lorem Ipsum Text Instantly",[11,589,590],{},"Choose paragraphs, sentences, or words. Copy with one click. No sign-up.",[11,592,593],{},[327,594,596],{"href":595},"/tools/lorem-ipsum-generator","Open Lorem Ipsum Generator",[30,598,600],{"id":599},"lorem-ipsum-alternatives","Lorem Ipsum Alternatives",[11,602,603],{},"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:",[38,605,606,612,618,624],{},[41,607,608,611],{},[15,609,610],{},"Hipster Ipsum:"," Artisanal placeholder text using trendy words like \"mixtape,\" \"sustainable,\" and \"cold-brew.\" Perfect for lifestyle and fashion brands.",[41,613,614,617],{},[15,615,616],{},"Bacon Ipsum:"," Replaces Latin with meat-themed filler text. A favourite among developers with a sense of humour.",[41,619,620,623],{},[15,621,622],{},"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.",[41,625,626,629],{},[15,627,628],{},"Samuel L. Ipsum:"," Memorable quotes in the style of the famous actor. Best for entertainment and media projects.",[30,631,334],{"id":333},[11,633,634],{},[15,635,636],{},"Is Lorem Ipsum real Latin?",[11,638,639],{},"Not exactly. It is derived from a 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.",[11,641,642],{},[15,643,644],{},"Can I use Lorem Ipsum in final designs?",[11,646,647],{},"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.",[11,649,650],{},[15,651,652],{},"What is the standard Lorem Ipsum paragraph?",[11,654,655,656,659],{},"The classic opening sentence is: ",[463,657,658],{},"\"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.",[11,661,662],{},[15,663,664],{},"Why is Lorem Ipsum used instead of real text?",[11,666,667],{},"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.",[11,669,670],{},[15,671,672],{},"Are there Lorem Ipsum generators in different languages?",[11,674,675],{},"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.",[11,677,678],{},[15,679,680],{},"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":418,"searchDepth":419,"depth":419,"links":682},[683,684,685,686,689,690],{"id":474,"depth":419,"text":475},{"id":498,"depth":419,"text":499},{"id":537,"depth":419,"text":538},{"id":576,"depth":419,"text":577,"children":687},[688],{"id":586,"depth":425,"text":587},{"id":599,"depth":419,"text":600},{"id":333,"depth":419,"text":334},"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":456,"description":692},"blog/lorem-ipsum-explained",[439,699],"UX","N9DcAznEICtbzyjwHLtGHDsUtG7Cj1xaPAGmTOK-h1Y",{"id":702,"title":703,"author":6,"body":704,"category":439,"date":1063,"description":1064,"draft":442,"extension":443,"image":1065,"meta":1066,"navigation":446,"path":1067,"seo":1068,"stem":1069,"tags":1070,"__hash__":1071},"blog/blog/open-graph-tags-social-seo.md","Open Graph Tags: The Hidden SEO Trick for Social Media CTR",{"type":8,"value":705,"toc":1043},[706,709,712,716,719,731,735,738,741,744,748,751,755,758,767,771,774,780,784,787,819,831,837,841,844,850,854,865,871,875,878,884,888,891,897,901,904,910,921,925,928,946,950,956,960,963,969,973,976,996,998,1003,1006,1011,1014,1019,1022,1027,1030,1035,1038],[11,707,708],{},"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.",[11,710,711],{},"The difference between these two outcomes? Four lines of HTML in the page header. And most websites are still getting it wrong.",[30,713,715],{"id":714},"what-are-open-graph-tags","What Are Open Graph Tags?",[11,717,718],{},"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.",[11,720,721,722,726,727,730],{},"Open Graph tags are HTML ",[723,724,725],"code",{},"\u003Cmeta>"," tags placed in the ",[723,728,729],{},"\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.",[30,732,734],{"id":733},"why-open-graph-tags-are-technically-seo","Why Open Graph Tags Are Technically SEO",[11,736,737],{},"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.",[11,739,740],{},"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.",[11,742,743],{},"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.",[30,745,747],{"id":746},"the-essential-open-graph-tags","The Essential Open Graph Tags",[11,749,750],{},"Here are the core OG tags every page should have, along with their syntax and the exact values to use:",[77,752,754],{"id":753},"ogtitle","og:title",[11,756,757],{},"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.",[759,760,765],"pre",{"className":761,"code":763,"language":764,"meta":418},[762],"language-text","\u003Cmeta property=\"og:title\" content=\"Free Image Compressor — Reduce File Size Without Losing Quality\" />\n","text",[723,766,763],{"__ignoreMap":418},[77,768,770],{"id":769},"ogdescription","og:description",[11,772,773],{},"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.",[759,775,778],{"className":776,"code":777,"language":764,"meta":418},[762],"\u003Cmeta property=\"og:description\" content=\"Compress JPEG, PNG & WebP images for free. No upload. Files stay in your browser.\" />\n",[723,779,777],{"__ignoreMap":418},[77,781,783],{"id":782},"ogimage","og:image",[11,785,786],{},"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.",[38,788,789,795,801,807,813],{},[41,790,791,794],{},[15,792,793],{},"Recommended size:"," 1200 × 630 pixels",[41,796,797,800],{},[15,798,799],{},"Minimum size:"," 600 × 315 pixels",[41,802,803,806],{},[15,804,805],{},"File format:"," JPEG or PNG preferred (smaller file sizes)",[41,808,809,812],{},[15,810,811],{},"File size:"," Under 8MB (Facebook limit)",[41,814,815,818],{},[15,816,817],{},"URL:"," Must be an absolute URL (not a relative path)",[11,820,821,822,826,827,18],{},"Use the ",[327,823,825],{"href":824},"/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 ",[327,828,830],{"href":829},"/blog/social-media-image-sizes-guide","Social Media Image Sizes Guide",[759,832,835],{"className":833,"code":834,"language":764,"meta":418},[762],"\u003Cmeta property=\"og:image\" content=\"https://campaignmorph.com/assets/og-image-compressor.jpg\" />\n",[723,836,834],{"__ignoreMap":418},[77,838,840],{"id":839},"ogurl","og:url",[11,842,843],{},"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.",[759,845,848],{"className":846,"code":847,"language":764,"meta":418},[762],"\u003Cmeta property=\"og:url\" content=\"https://campaignmorph.com/tools/image-compressor\" />\n",[723,849,847],{"__ignoreMap":418},[77,851,853],{"id":852},"ogtype","og:type",[11,855,856,857,860,861,864],{},"Tells the platform what kind of content this is. The most common values are ",[723,858,859],{},"website"," (for homepages and tool pages) and ",[723,862,863],{},"article"," (for blog posts). Setting this correctly enables richer integrations on some platforms.",[759,866,869],{"className":867,"code":868,"language":764,"meta":418},[762],"\u003Cmeta property=\"og:type\" content=\"article\" />\n",[723,870,868],{"__ignoreMap":418},[77,872,874],{"id":873},"ogsite_name","og:site_name",[11,876,877],{},"The name of your website, displayed as a brand label in the preview. Always include this for brand recognition.",[759,879,882],{"className":880,"code":881,"language":764,"meta":418},[762],"\u003Cmeta property=\"og:site_name\" content=\"CampaignMorph\" />\n",[723,883,881],{"__ignoreMap":418},[77,885,887],{"id":886},"oglocale","og:locale",[11,889,890],{},"Specifies the language and region of the page. This helps social platforms serve the right version to the right audience.",[759,892,895],{"className":893,"code":894,"language":764,"meta":418},[762],"\u003Cmeta property=\"og:locale\" content=\"en_US\" />\n",[723,896,894],{"__ignoreMap":418},[30,898,900],{"id":899},"twitterx-card-tags","Twitter/X Card Tags",[11,902,903],{},"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.",[759,905,908],{"className":906,"code":907,"language":764,"meta":418},[762],"\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",[723,909,907],{"__ignoreMap":418},[11,911,912,913,916,917,920],{},"The most impactful setting is ",[723,914,915],{},"twitter:card"," set to ",[15,918,919],{},"summary_large_image",". This displays a large, full-width image preview in the feed, which dramatically outperforms the small thumbnail format in engagement.",[30,922,924],{"id":923},"linkedin-specific-considerations","LinkedIn-Specific Considerations",[11,926,927],{},"LinkedIn uses Open Graph tags as its primary metadata source. However, it has some quirks:",[38,929,930,933,943],{},[41,931,932],{},"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.",[41,934,935,936,406,939,942],{},"LinkedIn also reads ",[723,937,938],{},"article:published_time",[723,940,941],{},"article:author"," tags if you're marking the page as an article type, which can add author attribution to the preview.",[41,944,945],{},"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.",[30,947,949],{"id":948},"how-to-generate-all-og-tags-for-free","How to Generate All OG Tags for Free",[11,951,952,953,955],{},"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 ",[723,954,729],{}," section.",[77,957,959],{"id":958},"generate-your-open-graph-tags-for-free","Generate Your Open Graph Tags for Free",[11,961,962],{},"Enter your details and get complete OG + Twitter Card HTML. Copy and paste into your site.",[11,964,965],{},[327,966,968],{"href":967},"/tools/meta-tag-generator","Open Meta Tag Generator",[30,970,972],{"id":971},"how-to-test-your-open-graph-tags","How to Test Your Open Graph Tags",[11,974,975],{},"After implementing your OG tags, always test before sharing. Use these official tools:",[38,977,978,984,990],{},[41,979,980,983],{},[15,981,982],{},"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.",[41,985,986,989],{},[15,987,988],{},"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.",[41,991,992,995],{},[15,993,994],{},"Twitter Card Validator:"," Visit cards-dev.twitter.com/validator and paste your URL to preview how your Twitter Card will appear in the feed.",[30,997,334],{"id":333},[11,999,1000],{},[15,1001,1002],{},"Do Open Graph tags help SEO?",[11,1004,1005],{},"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.",[11,1007,1008],{},[15,1009,1010],{},"What is the ideal Open Graph image size?",[11,1012,1013],{},"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://).",[11,1015,1016],{},[15,1017,1018],{},"Why isn't my Open Graph image showing on Facebook?",[11,1020,1021],{},"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.",[11,1023,1024],{},[15,1025,1026],{},"Do I need separate OG tags for every page?",[11,1028,1029],{},"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.",[11,1031,1032],{},[15,1033,1034],{},"What happens if I don't add Open Graph tags?",[11,1036,1037],{},"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.",[11,1039,1040],{},[15,1041,1042],{},"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":418,"searchDepth":419,"depth":419,"links":1044},[1045,1046,1047,1056,1057,1058,1061,1062],{"id":714,"depth":419,"text":715},{"id":733,"depth":419,"text":734},{"id":746,"depth":419,"text":747,"children":1048},[1049,1050,1051,1052,1053,1054,1055],{"id":753,"depth":425,"text":754},{"id":769,"depth":425,"text":770},{"id":782,"depth":425,"text":783},{"id":839,"depth":425,"text":840},{"id":852,"depth":425,"text":853},{"id":873,"depth":425,"text":874},{"id":886,"depth":425,"text":887},{"id":899,"depth":419,"text":900},{"id":923,"depth":419,"text":924},{"id":948,"depth":419,"text":949,"children":1059},[1060],{"id":958,"depth":425,"text":959},{"id":971,"depth":419,"text":972},{"id":333,"depth":419,"text":334},"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.","/blog/open-graph-tags-social-seo.webp",{},"/blog/open-graph-tags-social-seo",{"title":703,"description":1064},"blog/open-graph-tags-social-seo",[439,699],"J1Fl4rO4SJwos8dD34Ph2HLyhxojCbrH69iJsh5vFpA",1775986992787]