Blog

You have finished building your website. The design looks good, the pages are responsive, the domain is connected, and everything appears ready to go live.

But before publishing and sharing that website with customers, clients, colleagues, or the public, there is one small thing worth checking:

How does your website look when someone shares the link?

Copy your website URL and send it through WhatsApp, Facebook, LinkedIn, X, or another platform.

Does it show the correct image?

Does it display the correct title?

Is there a useful description?

Or does the link appear with a missing image, an unexpected title, or information that doesn't properly represent your website?

This is where Open Graph tags become important.

What Are Open Graph Tags?

Open Graph tags are metadata placed inside the <head> section of a webpage. They provide information that platforms can use when creating a preview of your URL.

A basic implementation might look like this:

<meta property="og:title" content="MC Solutions">
<meta property="og:description" content="Technology solutions designed to help businesses grow.">
<meta property="og:image" content="https://example.com/images/social-preview.jpg">
<meta property="og:url" content="https://example.com">
<meta property="og:type" content="website">

The important tags normally include:

og:title the title you want associated with the shared page.

og:description a short description explaining what the page is about.

og:image the image representing the page.

og:url the preferred URL for that page.

og:type the type of content, such as a website or article.

Open Graph metadata is widely used to help platforms generate richer link previews.

Why Should You Care?

Imagine spending weeks designing a professional business website.

You finally publish it and send the URL to a potential client on WhatsApp.

Instead of seeing your carefully designed brand image, company name, and description, the client sees an unattractive or incomplete link preview.

Your actual website might be excellent.

But before the person even opens it, their first interaction with your website may be the link preview.

That is why Open Graph tags deserve a place on your pre-launch checklist.

Better First Impressions

A well-configured link preview can immediately communicate what your website or page is about.

Instead of sharing only:

https://example.com

someone could see a preview containing:

The second presentation gives the visitor considerably more context before they click.

Consistent Branding

Your website probably has a logo, brand colours, typography, photography, and other visual elements.

Your shared links should feel like they belong to the same brand.

By specifying an og:image, you have greater control over which image represents the page instead of simply hoping a platform chooses an appropriate image.

Give People Context Before They Click

A URL alone doesn't always explain much.

A title, description, and image can tell someone what they are about to open.

This becomes particularly important when sharing:

• Blog articles

• News stories

• Products

• Services

• Company websites

• Landing pages

• Portfolio projects

• Event pages

For example, every article on a blog can have its own Open Graph title, description, and image.

If this article were being shared, its metadata might contain:

<meta property="og:title" content="Before You Go Live #1: Check Your Open Graph Tags">

<meta property="og:description" content="Before publishing your website, check how your links appear when shared online.">

<meta property="og:image" content="https://example.com/images/open-graph-tags.jpg">

<meta property="og:type" content="article">

Now the shared preview can represent the specific article rather than showing generic information about the entire website.

Don't Assume Your Open Graph Tags Are Working

Adding the tags to your code is only the first step.

You should actually test them.

There could be problems with your implementation that aren't obvious while viewing the website normally.

For example, your og:image URL might be incorrect, the image might not be publicly accessible, your production website might still contain development URLs, or a page might be missing its description.

That's why I recommend testing your website before announcing that it is ready.

Tools You Can Use to Check Open Graph Tags

There are different tools available for inspecting and debugging social-sharing metadata.

Some platforms provide their own debugging or preview tools, and there are also independent Open Graph validators.

The important thing isn't necessarily which validator you choose.

The important thing is:

Don't just add Open Graph tags. Validate them.

For this website, I decided to use the Open Graph Validator by Orca Scan.

The tool lets you enter a webpage URL and inspect how its Open Graph information is being detected. Orca Scan describes the validator as a way to check whether a webpage appears correctly when shared on social media.

Open Graph Validator:

https://orcascan.com/tools/open-graph-validator

How I Check a Website Before Publishing

My process is simple.

First, I finish preparing the website and make sure the production URL is accessible.

Then I open the Open Graph Validator and enter the website URL.

For example:

https://mcsolutionszim.co.zw

The validator can then inspect the page's Open Graph metadata.

I check that the expected title, description, image, URL, and content type are being detected.

If something is missing or incorrect, I return to the website and fix the metadata before considering that part of the launch complete.

Don't Only Test the Homepage

This is particularly important for dynamic websites.

Testing your homepage doesn't automatically mean every other page is configured correctly.

For example, if your website contains:

/articles/open-graph-tags

/services/web-development

/products/product-name

/projects/project-name

those pages may need their own Open Graph metadata.

A blog article shouldn't necessarily show the homepage title and homepage image when someone shares it.

Ideally, the metadata should be generated from the content of the page.

For example:

<meta property="og:title" content="{{ $article->title }}">
<meta property="og:description" content="{{ $article->description }}">
<meta property="og:image" content="{{ $article->featured_image }}">
<meta property="og:url" content="{{ url()->current() }}">
<meta property="og:type" content="article">

The exact implementation will depend on your framework, CMS, or application architecture.

Open Graph Is Not a Replacement for SEO

Another important distinction is that Open Graph tags and traditional SEO metadata are not the same thing.

You may still need things such as:

<title>Your Page Title</title>

<meta name="description" content="Description of your page.">

along with canonical URLs, robots directives, structured data, XML sitemaps, and other SEO-related configuration depending on the website.

Open Graph should therefore be treated as one part of your website launch process, not the entire SEO strategy.

And that leads nicely into the next topic in this series.

Before You Go Live

Before publishing your next website, take a few minutes to check:

Open Graph title ✓

Open Graph description ✓

Open Graph image ✓

Open Graph URL ✓

Open Graph type ✓

Important individual pages tested ✓

Production URLs being used ✓

Link preview validated ✓

Your website may look perfect when someone visits it.

But remember:

People may see your link before they see your website.

Make sure that first impression represents the work you actually built.