When a webpage link is shared on social media, platforms automatically generate a preview.
Open Graph and social media meta tags control how this preview appears.
What Are Open Graph Meta Tags
Open Graph meta tags were introduced to control link previews on social platforms.
They define the title, description, image, and URL shown when a page is shared.
Why Social Media Meta Tags Matter
Proper previews increase click-through rates.
They make shared links look professional and trustworthy.
In this example:
- og:title defines the preview title
- og:description defines the preview text
- og:image defines the preview image
- og:url defines the page URL
Common Open Graph Properties
- og:title
- og:description
- og:image
- og:url
- og:type
Twitter Card Meta Tags
Twitter uses its own meta tags to control link previews.
These tags are similar to Open Graph tags.
Social Media Platforms That Use These Tags
Best Practices for Social Media Meta Tags
- Use high-quality images
- Keep descriptions short and clear
- Ensure URLs are correct
- Use unique tags per page
Common Mistakes
- Missing Open Graph tags
- Broken image URLs
- Using the same preview for all pages
Why Social Meta Tags Matter for Jobs
Marketing and content-heavy websites rely heavily on social sharing.
Employers expect developers to configure social media previews correctly.
Practice Task
Add Open Graph and Twitter meta tags to a webpage and test the preview using social media debug tools.
What You Will Learn Next
In the next lesson, you will learn SEO-focused HTML best practices.