How To Get Social Media Previews Right on Astro blog 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 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 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 - Design and generate visually stunning OpenGraph previews effortlessly.

• Uneed - Create captivating OpenGraph images with ease.

• opengraph.xyz - Test and preview your OpenGraph configuration before unveiling it to the social media world.

• placid - Provides a free open graph image generator and design.

• Vercel OG Playground - Vercel hosted Open Graph playground.

• imgsrc - A rich and elegant open graph image designer available online and at your browser.

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!