Every time someone shares your page on Facebook, LinkedIn, or WhatsApp, the platform decides in milliseconds what to show. If you’ve set up your open graph meta tags correctly, that preview becomes a miniature landing page, complete with a compelling image, a sharp title, and a description that earns the click. If you haven’t, the platform guesses. And platforms guess badly.
I’ve audited over 200 Singapore business websites in the past three years. Roughly 60% of them had either missing or broken OG tags. The result? Their content looked terrible when shared on social media, their click-through rates from social channels sat below 0.8%, and they were leaving real traffic on the table.
This guide goes deep. We’ll cover the protocol itself, the full tag taxonomy, platform-specific quirks, image specifications down to the pixel, caching problems and how to fix them, and the indirect but measurable SEO impact of getting this right. If you’ve ever pasted your URL into Facebook’s debugger and winced at the result, this post is for you.
What Open Graph Meta Tags Actually Are (And Why They Exist)
Open Graph is a protocol that Facebook introduced in 2010. The idea was simple: give website owners a standardised way to describe their content so that social platforms could render rich previews instead of plain text links.
The protocol uses meta tags placed in the <head> section of your HTML. Each tag uses the property attribute (not name, which is a common mistake) and a content attribute that holds the value. When a social platform’s crawler hits your page, it reads these tags and builds the preview card accordingly.
Think of it like this. You know those hawker stalls in Singapore with the big photo menus outside? The ones with crisp, well-lit photos of every dish? Those stalls consistently get more customers than the ones with no photos or blurry printouts. Open graph meta tags are your photo menu for social media. They tell platforms exactly what to display so you’re not leaving it to chance.
How the Protocol Works Under the Hood
When someone pastes a URL into a Facebook post, LinkedIn message, or Telegram chat, the platform sends a crawler (a server-side HTTP request) to fetch that URL. The crawler parses the HTML response, specifically looking for <meta property="og:..."> tags in the <head>.
If it finds them, it uses those values to build the preview card. If it doesn’t find them, the crawler falls back to heuristics: it might grab the <title> tag, the meta description, and whatever image it deems largest or most relevant on the page. This fallback behaviour is unpredictable and varies by platform.
One critical detail: most social crawlers do not execute JavaScript. If your OG tags are injected client-side by a JavaScript framework (React, Vue, Angular without SSR), the crawler will see an empty <head>. This is one of the most common reasons OG tags “don’t work” for single-page applications. You need server-side rendering or a pre-rendering solution.
Open Graph vs. Twitter Cards vs. Schema Markup
These three systems often get confused. Here’s the distinction:
Open Graph meta tags control how your page appears when shared on Facebook, LinkedIn, WhatsApp, Telegram, Pinterest, and most other social platforms. Twitter also reads OG tags as a fallback.
Twitter Cards are Twitter’s own meta tag system (using name="twitter:..." instead of property="og:..."). If Twitter Card tags are present, Twitter uses them. If not, it falls back to OG tags. So you can often get away with just OG tags, but for full control on Twitter, you should implement both.
Schema markup (structured data) is a completely different system. It’s for search engines, not social platforms. Schema tells Google what your content is about and can trigger rich results in search. It doesn’t affect social previews at all.
For maximum coverage, you want all three. But if you’re prioritising, OG tags give you the widest platform coverage with the least effort.
The Complete Open Graph Tag Reference
Let’s go through every OG tag you should know about, organised by category. I’ll include the exact syntax, recommended values, and notes on platform-specific behaviour.
The Four Required Tags
The Open Graph protocol specifies four tags as mandatory. If you implement nothing else, implement these:
og:title — The title of your content. This is what appears as the headline in the share preview. Keep it under 60 characters to avoid truncation on most platforms.
<meta property="og:title" content="How to Register a Business in Singapore: Step-by-Step" />og:type — The type of content. For most pages, use “website” for your homepage and “article” for blog posts. Other valid types include “product”, “video.movie”, “music.song”, and “profile”.
<meta property="og:type" content="article" />og:image — The URL of the image for the preview. This is the single most impactful tag. We’ll cover image specifications in detail below.
<meta property="og:image" content="https://www.yoursite.com/images/register-business-sg.jpg" />og:url — The canonical URL of the page. This should match your canonical tag. It tells platforms that all shares of this content should be consolidated under this single URL, preventing share count fragmentation.
<meta property="og:url" content="https://www.yoursite.com/blog/register-business-singapore" />Highly Recommended Optional Tags
These aren’t technically required by the protocol, but omitting them means you’re leaving control on the table.
og:description — A summary of your content, displayed below the title in most preview cards. Keep it between 100 and 200 characters. Write it like ad copy, not like a meta description. You want to provoke curiosity or state a clear benefit.
<meta property="og:description" content="The exact steps, costs, and timelines for registering a company with ACRA. Updated for 2026 requirements." />og:site_name — The name of your website or brand. Facebook displays this above or below the title, depending on the card format.
<meta property="og:site_name" content="Best SEO Singapore" />og:locale — The language and territory of your content. For Singapore English content, use en_SG. If you have multilingual pages (say, a Chinese version for your Singapore audience), you can also use og:locale:alternate to declare the other versions.
<meta property="og:locale" content="en_SG" />
<meta property="og:locale:alternate" content="zh_SG" />Image-Specific Tags
The image is what makes or breaks your social preview. These sub-tags give platforms precise information about your image so they can render it without delay or distortion.
og:image:width and og:image:height — The dimensions of your image in pixels. Providing these allows platforms to allocate the correct space for the image before it loads, preventing layout shifts in the preview.
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />og:image:type — The MIME type of the image. Common values: image/jpeg, image/png, image/webp. Note that some platforms still don’t handle WebP well for OG images. JPEG is the safest bet.
<meta property="og:image:type" content="image/jpeg" />og:image:alt — Alt text for the image. This is important for accessibility and also gives platforms additional context about the image content.
<meta property="og:image:alt" content="Screenshot of ACRA BizFile+ registration portal" />Video and Audio Tags
If your page features video or audio content, these tags let you embed rich media directly in the social preview.
og:video — The URL of the video file or embed. Platforms like Facebook can play the video inline within the feed if this tag is properly configured.
<meta property="og:video" content="https://www.yoursite.com/videos/seo-tutorial.mp4" />
<meta property="og:video:type" content="video/mp4" />
<meta property="og:video:width" content="1280" />
<meta property="og:video:height" content="720" />og:audio — The URL of an audio file. Less commonly used, but relevant for podcast pages.
Article-Specific Tags
When og:type is set to “article”, you unlock additional tags that provide publication context:
article:published_time — ISO 8601 datetime format. Helps platforms display when the article was published.
article:modified_time — When the article was last updated. Useful for evergreen content you refresh regularly.
article:author — A URL pointing to the author’s profile (typically a Facebook profile URL or your site’s author page).
article:section — The section or category the article belongs to.
article:tag — Tags or keywords associated with the article. You can use multiple instances of this tag.
<meta property="article:published_time" content="2026-01-15T08:00:00+08:00" />
<meta property="article:modified_time" content="2026-06-20T14:30:00+08:00" />
<meta property="article:author" content="https://www.yoursite.com/team/jim-ng" />
<meta property="article:section" content="Technical SEO" />
<meta property="article:tag" content="meta tags" />
<meta property="article:tag" content="social media optimisation" />Twitter Card Tags You Should Add Alongside OG Tags
For complete coverage on Twitter (now X), add these tags in addition to your OG tags:
twitter:card — The card type. Use summary_large_image for posts with a prominent image (most common), summary for a smaller thumbnail, player for video/audio, or app for mobile app installs.
twitter:site — Your brand’s Twitter handle.
twitter:creator — The author’s Twitter handle.
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@bestseossg" />
<meta name="twitter:creator" content="@jimng_seo" />Notice that Twitter Card tags use name instead of property. This is a common source of errors. Mix them up and Twitter won’t read your tags.
Image Specifications: The Details That Actually Matter
I’ve seen more OG implementations fail because of image issues than any other reason. The tags can be perfectly written, but if your image is the wrong size, format, or served from a slow CDN, the preview will look broken.
Recommended Image Dimensions by Platform
Facebook and LinkedIn: 1200 × 630 pixels (1.91:1 ratio). This is the gold standard. Both platforms display this size as a large preview card with the image spanning the full width of the post.
Twitter (summary_large_image): Minimum 300 × 157 pixels, maximum 4096 × 4096 pixels. The ideal is 1200 × 628 pixels, which is close enough to the Facebook spec that you can use one image for both.
WhatsApp: Uses OG tags and displays a 300 × 200 pixel thumbnail. Your 1200 × 630 image will be scaled down, so make sure the key visual elements (text, logo, product) are centred and not in the corners.
Telegram: Also reads OG tags. Displays a larger preview than WhatsApp. The 1200 × 630 standard works well here.
Technical Image Requirements
File size should be under 1MB. Facebook’s crawler has a timeout, and if your image takes too long to fetch, it will display the preview without it. I’ve seen this happen frequently with uncompressed PNG files served from shared hosting in Singapore.
Use JPEG for photographs and PNG for graphics with text or transparency. Avoid WebP for OG images for now. While Facebook supports it, LinkedIn and several messaging apps still have inconsistent WebP support.
The image URL must be absolute, not relative. /images/photo.jpg will not work. It must be https://www.yoursite.com/images/photo.jpg.
Serve the image over HTTPS. Some platforms will refuse to display images served over HTTP, or will show a security warning.
A Practical Tip for Singapore Businesses
If you’re running an e-commerce site selling products with GST-inclusive pricing, consider including the price in your OG image. A product photo with “S$49.90 (incl. GST)” overlaid as text creates a more compelling preview than a plain product shot. We tested this with a client in the home furnishing space and saw their Facebook share CTR increase from 1.2% to 3.1% over a 60-day period.
Implementation for Common CMS Platforms
Let’s get practical. Here’s how to implement open graph meta tags on the platforms most Singapore businesses actually use.
WordPress with Yoast SEO or Rank Math
Both Yoast and Rank Math generate OG tags automatically based on your post title, featured image, and excerpt. But the defaults aren’t always ideal.
In Yoast, go to the “Social” tab when editing a post. You can override the OG title, description, and image for Facebook and Twitter independently. Do this for every important page. The auto-generated description often pulls the first paragraph of your post, which may not be your most compelling copy.
In Rank Math, the equivalent is under the “Social” tab in the post editor. Rank Math also lets you set default OG images at the site level (under Rank Math > Titles & Meta > Global Meta), which is useful as a fallback for pages where you forget to set a specific image.
Pro tip: Both plugins let you set a separate image for social sharing. Use this. Your featured image might be a tall portrait orientation that looks great on your blog but gets cropped awkwardly in a Facebook preview. Upload a separate 1200 × 630 image specifically for social.
Shopify
Shopify generates basic OG tags automatically from your product title, description, and first product image. However, it doesn’t give you granular control without editing the theme’s theme.liquid file or using an app.
If you’re comfortable editing Liquid templates, you can add custom OG tags in the <head> section of theme.liquid. For most store owners, an app like “SEO Manager” or “JSON-LD for SEO” provides a GUI for managing OG tags without touching code.
Custom-Built Sites (Next.js, Nuxt, etc.)
If your site is built with a JavaScript framework, you must ensure OG tags are rendered server-side. In Next.js, use the Head component from next/head within your page components. In Nuxt 3, use the useHead() composable.
Test with curl to verify. Run curl -A "facebookexternalhit" https://yoursite.com/page and check that the OG tags appear in the raw HTML response. If they don’t, your tags are being rendered client-side and social crawlers won’t see them.
Testing, Debugging, and Fixing Cache Issues
Implementing the tags is only half the job. You need to verify they work, and you need to know how to fix them when platforms cache outdated versions.
Essential Testing Tools
Facebook Sharing Debugger (developers.facebook.com/tools/debug/) — Enter your URL, and Facebook shows you exactly what it sees. It displays the scraped title, description, image, and any errors or warnings. You can also click “Scrape Again” to force Facebook to re-fetch your page, which is essential after making changes.
Twitter Card Validator (cards-dev.twitter.com/validator) — Does the same for Twitter. Note that Twitter’s validator has been intermittent in recent months. If it’s down, you can test by simply tweeting the URL to a private account.
LinkedIn Post Inspector (linkedin.com/post-inspector/) — LinkedIn’s equivalent. This is the one most people forget about, and LinkedIn is arguably the most important social platform for B2B businesses in Singapore.
OpenGraph.xyz — A third-party tool that shows you how your URL will look across multiple platforms simultaneously. Useful for a quick overview.
The Caching Problem (And How to Solve It)
This is the issue that causes the most frustration. You update your OG tags, test the page locally, everything looks correct, but when you share the URL on Facebook, it still shows the old image and title.
The reason: social platforms cache your OG data aggressively. Facebook, for example, caches your page’s OG data for roughly 24 to 48 hours. LinkedIn caches for about 7 days. WhatsApp caches on the device level and is notoriously stubborn.
Here’s how to force a refresh on each platform:
Facebook: Use the Sharing Debugger and click “Scrape Again”. Do it twice. The first scrape fetches the page, the second confirms the new data is stored.
LinkedIn: Use the Post Inspector and click “Inspect”. This forces a re-scrape.
Twitter: Twitter’s cache typically refreshes within a few hours. If you need it faster, the Card Validator’s preview function triggers a re-scrape.
WhatsApp: This is the tricky one. WhatsApp caches on the user’s device. There’s no official way to force a refresh. The workaround is to append a query parameter to your URL (e.g., ?v=2) when sharing. This makes WhatsApp treat it as a new URL and fetch fresh data. Just make sure your server handles the query parameter gracefully and still serves the correct page.
Common Errors I See in Singapore Site Audits
Relative image URLs. I mentioned this earlier, but it’s the number one error. og:image must be an absolute URL starting with https://.
Image too small. Facebook requires a minimum of 200 × 200 pixels, but anything under 600 × 315 will be displayed as a tiny thumbnail instead of a large card. Aim for 1200 × 630.
Mismatched og:url and canonical. If your og:url says https://www.yoursite.com/page but your canonical tag says https://yoursite.com/page (without www), platforms may get confused. Keep them identical.
Duplicate og:image tags. Some WordPress themes and plugins both inject OG tags, resulting in duplicate entries. Facebook will use the first one it encounters, which might not be the one you intended. Check your page source for duplicates.
Missing og:type. If you omit this tag, Facebook defaults to “website”. That’s fine for your homepage, but for blog posts, you should explicitly set it to “article” to unlock the article-specific tags and get a more contextually appropriate preview.
The SEO Impact of Open Graph Meta Tags
Let me be direct: open graph meta tags are not a ranking factor. Google has confirmed this multiple times. Google’s crawler does not read OG tags for ranking purposes.
But that doesn’t mean they’re irrelevant to SEO. The relationship is indirect, and it’s measurable.
Social Shares Drive Referral Traffic
When your content looks professional and compelling in social previews, more people click. More clicks mean more referral traffic. More referral traffic means more people on your site who might link to your content, share it further, or convert into customers.
We tracked this for a Singapore-based fintech client. After optimising their OG tags across 45 blog posts (better images, rewritten OG descriptions, correct dimensions), their Facebook referral traffic increased by 34% over 90 days. Their LinkedIn referral traffic increased by 52%. The content itself didn’t change. Only the social previews did.
Brand Search Volume
When your content consistently appears with professional, branded previews on social media, people start recognising your brand. This can lead to increases in branded search queries, which is a positive signal for SEO. If more people search for “Best SEO Singapore” because they keep seeing well-presented content from us on LinkedIn, that’s a win that compounds over time.
Click-Through Rate from Social to Site
A well-optimised OG preview functions like a search result snippet. You have a title, a description, and a visual. The same principles that apply to writing compelling title tags and meta descriptions for Google apply here. Write your OG title and description as conversion copy, not as afterthoughts.
For Singapore audiences specifically, consider localising your OG descriptions. Mentioning “Singapore”, “SGD pricing”, or local context in the description can increase relevance and click-through. A preview that says “Best brunch spots in Tiong Bahru” will outperform “Best brunch spots” every time when shared in Singapore-focused groups.
Advanced Techniques for Practitioners
Dynamic OG Tags for E-Commerce
If you run an online store with hundreds or thousands of products, you can’t manually write OG tags for each one. Instead, template your OG tags dynamically.
For a product page, your template might look like:
<meta property="og:title" content="{{ product.name }} | {{ site.name }}" />
<meta property="og:description" content="{{ product.short_description }} — From S${{ product.price }}. Free delivery in Singapore." />
<meta property="og:image" content="{{ product.primary_image_url }}" />
<meta property="og:type" content="product" />The key is ensuring your product data is clean. If your product names are truncated or your descriptions contain HTML entities, those will show up in the social preview. Sanitise your data before it hits the OG tags.
Multiple og:image Tags
The OG protocol allows you to specify multiple images. The first image is the default, but some platforms (particularly Facebook) may allow users to cycle through images when sharing.
<meta property="og:image" content="https://yoursite.com/images/product-front.jpg" />
<meta property="og:image" content="https://yoursite.com/images/product-side.jpg" />
<meta property="og:image" content="https://yoursite.com/images/product-lifestyle.jpg" />In practice, this feature is inconsistently supported. But it costs nothing to include, and it gives platforms more options to work with.
Handling Multilingual Sites
Many Singapore businesses serve content in English, Chinese, Malay, and Tamil. If you have separate URLs for each language version (e.g., /en/page and /zh/page), each version should have its own OG tags with the appropriate og:locale and og:locale:alternate values.
If you use a single URL with a language switcher (client-side translation), you have a problem. Social crawlers will only see one language version, typically the default. In this case, set your OG tags to your primary language and accept that the social preview will only be in that language.
OG Tags for PDF and Non-HTML Content
PDFs, images, and other non-HTML files can’t have OG tags. If you’re sharing a PDF link on social media (common for Singapore government-related content, MAS circulars, or property fact sheets), the preview will be generic.
The workaround: create an HTML landing page for the PDF. The landing page has your OG tags and a prominent download link or embedded PDF viewer. Share the landing page URL instead of the direct PDF URL. This gives you full control over the social preview and also lets you track downloads via analytics.
A Complete Implementation Checklist
Here’s the checklist I use when auditing OG tag implementation for clients. Go through this for every important page on your site.
1. Required tags present: Confirm og:title, og:type, og:image, and og:url exist in the page source.
2. Recommended tags present: Confirm og:description, og:site_name, and og:locale are set.
3. Image specifications: Image is 1200 × 630 pixels, under 1MB, served over HTTPS, and uses an absolute URL. Format is JPEG or PNG.
4. Image dimensions declared: og:image:width and og:image:height are set.
5. No duplicate tags: Check page source for duplicate OG tags from competing plugins or theme code.
6. og:url matches canonical: The og:url value is identical to the rel="canonical" value, including protocol and www/non-www.
7. Twitter Card tags added: At minimum, twitter:card is set to summary_large_image.
8. Article tags for blog posts: If og:type is “article”, confirm article:published_time and article:modified_time are set.
9. Tested on all three debuggers: Page has been validated on Facebook Sharing Debugger, Twitter Card Validator, and LinkedIn Post Inspector.
10. Server-side rendering confirmed: If using a JS framework, OG tags are visible in the raw HTML response (verified via curl).
What Happens When You Get This Right
Let me share a real example. A Singapore-based co-working space client had been sharing their blog content on LinkedIn for months with minimal engagement. Their posts were getting 5 to 10 clicks each. When we audited their site, we found their OG images were being pulled from their site header (a generic logo banner), their OG descriptions were empty, and their og:type was missing entirely.
We fixed all of this in one afternoon. Created custom 1200 × 630 images for their top 20 posts, wrote OG descriptions that read like ad headlines, and implemented the full tag set. Within the first month, their average LinkedIn post clicks went from 8 to 31. By month three, they were averaging 47 clicks per post. Same content, same posting schedule, same audience. The only change was how the content looked when shared.
That’s a 487% increase in click-through from social, driven entirely by proper open graph meta tags implementation. No ad spend. No content rewrite. Just the right tags, the right images, and the right descriptions.
Frequently Overlooked Details
Character Limits
Platforms truncate OG titles and descriptions at different points. Here are the practical limits:
og:title: Facebook truncates at approximately 60 to 88 characters depending on the device. LinkedIn truncates at around 70 characters. Keep your titles under 60 characters to be safe across all platforms.
og:description: Facebook shows approximately 200 characters on desktop and fewer on mobile. LinkedIn shows about 100 characters. Write your most important information in the first 100 characters.
Special Characters and Encoding
If your OG title or description contains special characters (ampersands, quotes, angle brackets), they must be properly HTML-encoded. & becomes &, " becomes ", and so on. Most CMS platforms handle this automatically, but if you’re writing tags manually, double-check.
The og:url Trap with Tracking Parameters
Never put UTM parameters in your og:url. The og:url should be the clean canonical URL. If you want to track social traffic with UTM parameters, add them to the actual URL you share in your social post, not in the OG tag. The OG tag tells the platform which URL to consolidate shares under. The shared URL is what your analytics will track.
Let’s Get Your Social Previews Working Properly
If you’ve read this far, you now know more about open graph meta tags than most web developers. The next step is implementation. Audit your top 20 pages using the checklist above, fix what’s broken, and test with the platform debuggers.
If you’d rather have someone handle this systemat