# How To Get Social Media Previews Right on Astro blog with OpenGraph Meta Tags — Liran Tal

You have an Astro blog? Now it's time to unlock the social sharing magic! Learn to wield OpenGraph meta tags configuration, crafting eye-catching previews. Optimize your website's social share game with these tips.

Canonical: https://lirantal.com/blog/getting-social-media-previews-right-with-opengraph-meta-tags

So, you’ve got this fantastic website, and you’re ready to share it with the world. But wait, have you considered how it looks when someone shares it on Facebook, Twitter, LinkedIn, or even WhatsApp? This is where OpenGraph comes into play – the unsung hero of social media previews.

## What is OpenGraph?

OpenGraph is not some mysterious concept from a distant galaxy; it’s a set of metadata tags that you can embed in your website’s HTML. These tags provide information to social media platforms about how your content should be presented when shared. Think of them as the backstage passes for your website’s appearance on social media.

## Why OpenGraph important?

Imagine sharing a link, and instead of a beautiful preview with an eye-catching image, you get a bland, generic snippet. OpenGraph ensures that when your content is shared, it grabs attention with engaging visuals and relevant information. It’s your website’s chance to make a memorable first impression.

## Example of OpenGraph Meta Tags

Here’s a sneak peek at what OpenGraph meta tags look like for Facebook, Twitter, and LinkedIn:

```
<meta property="og:title" content="Your Title Here">
<meta property="og:description" content="Your engaging description here. Keep it concise and intriguing!">
<meta property="og:image" content="https://yourdomain.com/path/to/your/image.jpg">
<meta property="og:url" content="https://yourdomain.com">
```

## Using OpenGraph Meta Tags in Astro

Astro is a fantastic static site generator that I’ve been using for this blog. It’s a great way to build fast, modern websites with a minimal footprint. Astro also has a handy [SEO component](https://docs.astro.build/core-concepts/seo) that makes it easy to add OpenGraph meta tags to your website.

To get started, you’ll need to install the `astro-seo` package:

```
npm install astro-seo
```

Then, you can add the `SEO` component to your Astro project’s `src/components/seo.astro` file. Here’s an example of how I’ve set up the SEO component for my [Node.js Secure Coding](https://www.nodejs-security.com/) blog:

```
---
import { SEO } from 'astro-seo';
import { SITE } from '~/config.mjs';

import defaultImageFile from '~/assets/images/nodejs-secure-coding-website-og-lightmode-v3.png';

const {
	title = SITE.name,
	description = '',

	canonical,
	noindex = false,
	nofollow = false,

	ogTitle = title,
	ogType = 'website',
} = Astro.props;

const siteBaseURL = new URL(Astro.url);
const defaultImage = new URL(defaultImageFile.src, siteBaseURL);

let { image: _image } = Astro.props;
_image = _image || defaultImage;

let image = null;
if (typeof _image === 'string') {
    image = new URL(_image, siteBaseURL);
} else if (_image && typeof _image['href'] !== 'undefined') {
    image = new URL(_image['href'], siteBaseURL);
} else {
	image = defaultImage;
}

---

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<SEO
	title={title}
	description={description}
	canonical={canonical}
	noindex={noindex}
	nofollow={nofollow}
	openGraph={{
		basic: {
			url: canonical,
			title: ogTitle,
			type: ogType,
			image: _image?.src ? _image.src : defaultImage.toString(),
		},
		image: {
			url: image.toString(),
			secureUrl: image.toString(),
			alt: ogTitle,
			height: _image?.height,
			width: _image?.width,
			type: _image?.format && `image/${_image.format}`,
		},
	}}
	twitter={{
		creator: '@liran_tal',
		image: image ? image.toString() : undefined,
		imageAlt: ogTitle,
		title: ogTitle,
		site: '@liran_tal',
		description: description,
		card: image ? 'summary_large_image' : 'summary',
	}}
	extend={{
		meta: [
			{
				name: 'og:locale',
				content: 'en_US',
			},
			{
				name: 'og:description',
				content: description,
			},
			{
				name: 'og:site_name',
				content: SITE.name,
			}
		]
	}}
/>
```

## Key Properties for Ideal OpenGraph Configuration

When setting up your OpenGraph, keep these key properties in mind:

*   **`og:image` Dimensions:** Optimal size is 1200x630 pixels for Facebook and LinkedIn. Twitter prefers 1200x675 pixels.

*   **Absolute URLs:** Ensure that your URLs are absolute, not relative. It’s the difference between leading someone to your front door and leaving them in the middle of nowhere.


## Important WhatsApp OpenGraph Configuration

WhatsApp has its quirks, so make sure to include `og:site_name` as follows:

```
<meta property="og:site_name" content="Your Site Name">
```

Another thing to get right with WhatsApp previews when it comes to OpenGraph meta tags is the image size. WhatsApp prefers images under 300kb, so keep those visuals lightweight yet impactful.

## Resources for Developing and Testing OpenGraph Meta Directives

Feeling a bit overwhelmed? Don’t worry; I’ve got your back with some OpenGraph generator and testing resources. Here are some tools I’ve used myself for this blog to make the OpenGraph work smoother:

*   [Pika](https://pika.style/templates/open-graph-generator) - Design and generate visually stunning OpenGraph previews effortlessly.

*   [Uneed](https://www.og-image-generator.com) - Create captivating OpenGraph images with ease.

*   [opengraph.xyz](https://www.opengraph.xyz) - Test and preview your OpenGraph configuration before unveiling it to the social media world.

*   [placid](https://placid.app/tools/free-open-graph-image-generator/) - Provides a free open graph image generator and design.

*   [Vercel OG Playground](https://og-playground.vercel.app/) - Vercel hosted Open Graph playground.

*   [og.new](https://og.new/) - A simple Open Graph image generator.

*   [imgsrc](https://imgsrc.io) - A rich and elegant open graph image designer available online and at your browser.

*   [OG Image Maker](https://ogimagemaker.com/) - A free OpenGraph image generator tool with several templates to choose from.

*   [Shots](https://shots.so) - A website to help create screenshots, videos and OpenGraph images for your website.


Out of the above list, I highly recommend checking out the last tool, [OG Image Maker](https://ogimagemaker.com/), as it is the creation of a dear friend [Eddy Vinck](https://twitter.com/eddyvinckk) who also bootstrapped [BlogRecorder](https://blogrecorder.com/) (an awesome AI powered blogging tool for bloggers) and is a fantastic tool to create OpenGraph images with ease.

Lastly, not an opengraph image designer tool, but [Open Graph Examples](https://opengraphexamples.com/) is a great resource to get inspiration from other websites’ Open Graph visual designs.

In conclusion, OpenGraph is your website’s passport to the social media elite. With the right configuration and a touch of creativity, you can turn every share into a visual masterpiece. So, go ahead, spruce up your OpenGraph, and let your website shine in the social media spotlight!

## More writing

[All writing →](/blog)

*   Sep 5, 2026

    ### [Self-Hosting Hermes Agent with Matrix E2EE on Proxmox](/blog/self-host-hermes-agent-matrix-e2ee-proxmox)

*   Aug 2, 2026

    ### [The Practical Second Brain: Building an LLM-Operated Markdown Knowledge Graph](/blog/practical-second-brain-llm-markdown-knowledge-graph)

*   Aug 1, 2026

    ### [Building a Second Brain with LLMs and AI Agents](/blog/building-second-brain-llms-ai-agents)


* * *

Liran Tal is the author of the book [Node.js Secure Coding: Defending Against Command Injection Vulnerabilities](https://www.nodejs-security.com/)

[Start Building Secure Node.js Applications ↗](https://www.nodejs-security.com/)

 [![](/_astro/nodejs-secure-coding-book-3d-style.DiTWpzFs_Z3c7s1.png)](https://www.nodejs-security.com/)