Open Graph Title & Description — Improve Social Media Previews

Introduction

Open Graph Title & Description tags help you control how your content is displayed when shared on social platforms like Facebook, LinkedIn, and WhatsApp. These tags improve click-through rates and engagement.

Open Graph Example Code


<head>
  <meta property="og:title" content="Bootstrap 5 Examples — QuickDevTips" />
  <meta property="og:description" content="Discover quick and responsive Bootstrap 5 snippets for developers." />
</head>

How It Works

The og:title and og:description meta tags are part of the Open Graph protocol. Social platforms read these values to generate previews with consistent text when someone shares your link.

Why Use This?

Without Open Graph tags, platforms may randomly pull text from your page, leading to messy or irrelevant previews. With them, you ensure a clean, professional appearance.

Common Mistake

Using the same Open Graph description for every page can harm engagement. Customize tags per page to maximize social visibility.

Pro Tip

Combine Open Graph tags with proper images (og:image) to create rich social previews. Always test with Facebook’s Sharing Debugger.

Related Snippet

Meta Robots Noindex Tag

Leave a Comment