Back to Schema Implementation

Meta Tags & Open Graph

Complete technical guide for AI search optimization

What Are Meta Tags?

Meta tags are snippets of code in your HTML that describe your page content. They're invisible to visitors but visible to search engines and AI platforms. Think of them as labels that explain what your page is about.

For GEO optimization, meta tags help AI engines understand your content context, purpose, and how to display it when shared. Proper meta tags improve your content's discoverability and presentation.

Essential Meta Tags

Meta Description

A brief summary of your page content. Appears in search results and AI engine responses. 150-160 characters is ideal.

<meta name="description" content="Learn how to optimize your website for AI search engines with Bloffee's complete GEO optimization platform. Improve your content for ChatGPT, Claude, and other AI tools." />

Best Practices: Write unique descriptions for every page. Include primary keywords naturally. Make it compelling and accurate.

Title Tag

Your page title appears in browser tabs, search results, and when shared. 50-60 characters recommended. Include your brand and main keyword.

<title>Complete Guide to Meta Tags & Open Graph | Bloffee</title>

Canonical URL

Tells search engines the preferred version of your page. Prevents duplicate content issues. Essential for GEO.

<link rel="canonical" href="https://bloffee.com/learn/technical/meta-tags-complete" />

Robots Meta Tag

Controls how search engines and AI bots interact with your page. Use "index, follow" to allow full access.

<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />

Open Graph Tags

Open Graph tags control how your content appears when shared on social media. Originally created by Facebook, now used by many platforms including AI tools.

Complete Open Graph Example

<meta property="og:title" content="Complete Guide to Meta Tags" /> <meta property="og:description" content="Master meta tags and Open Graph for GEO optimization." /> <meta property="og:type" content="article" /> <meta property="og:url" content="https://bloffee.com/learn/technical/meta-tags-complete" /> <meta property="og:image" content="https://bloffee.com/images/meta-tags-guide.jpg" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta property="og:site_name" content="Bloffee" /> <meta property="og:locale" content="en_US" /> <meta property="article:published_time" content="2025-01-10T00:00:00.000Z" /> <meta property="article:modified_time" content="2025-01-10T12:00:00.000Z" /> <meta property="article:author" content="Bloffee" />

Open Graph Image Requirements

Your og:image is crucial. It appears when content is shared. Follow these specifications:

  • Recommended size: 1200 x 630 pixels
  • Minimum size: 600 x 314 pixels
  • Maximum file size: 8 MB
  • Format: JPG or PNG
  • Aspect ratio: 1.91:1

Twitter Card Tags

Twitter Cards work similarly to Open Graph but are specific to Twitter/X. They enhance how your links appear on the platform.

Twitter Card Example

<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@bloffee" /> <meta name="twitter:creator" content="@bloffee" /> <meta name="twitter:title" content="Complete Guide to Meta Tags" /> <meta name="twitter:description" content="Master meta tags and Open Graph for GEO." /> <meta name="twitter:image" content="https://bloffee.com/images/meta-tags-guide.jpg" />

Twitter Card Types

  • summary: Small square image thumbnail
  • summary_large_image: Large banner image (recommended)
  • app: For mobile app promotions
  • player: For video/audio content

Advanced Meta Tags for GEO

Author Information

Help AI engines understand content authorship and authority.

<meta name="author" content="Bloffee Team" /> <link rel="author" href="https://bloffee.com/about" />

Language and Locale

Specify content language for international sites.

<html lang="en"> <meta property="og:locale" content="en_US" /> <meta property="og:locale:alternate" content="nl_NL" /> <meta property="og:locale:alternate" content="fr_FR" />

Charset and Viewport

Essential technical tags for proper rendering.

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

Complete Meta Tags Template

Use this template as a starting point for all your pages:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Primary Meta Tags --> <title>Your Page Title | Brand Name</title> <meta name="title" content="Your Page Title | Brand Name"> <meta name="description" content="Clear description of your page content in 150-160 characters."> <meta name="author" content="Your Name or Company"> <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1"> <link rel="canonical" href="https://yoursite.com/page-url"> <!-- Open Graph / Facebook --> <meta property="og:type" content="article"> <meta property="og:url" content="https://yoursite.com/page-url"> <meta property="og:title" content="Your Page Title"> <meta property="og:description" content="Clear description for social sharing."> <meta property="og:image" content="https://yoursite.com/image.jpg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:site_name" content="Your Brand"> <meta property="og:locale" content="en_US"> <!-- Twitter --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:url" content="https://yoursite.com/page-url"> <meta name="twitter:title" content="Your Page Title"> <meta name="twitter:description" content="Clear description for Twitter."> <meta name="twitter:image" content="https://yoursite.com/image.jpg"> </head> <body> <!-- Your content --> </body> </html>

Testing Your Meta Tags

Always test meta tags before publishing:

Facebook Sharing Debugger

Test Open Graph tags: developers.facebook.com/tools/debug/

Twitter Card Validator

Test Twitter Cards: cards-dev.twitter.com/validator

LinkedIn Post Inspector

Test LinkedIn sharing: linkedin.com/post-inspector/

Meta Tags Quick Tips

  • •Write unique meta descriptions for every page
  • •Keep titles under 60 characters
  • •Use high-quality images for og:image (1200x630px)
  • •Always include canonical URLs
  • •Test with debugging tools before publishing
  • •Update og:image when you redesign or rebrand

Related Resources