Skip to main content

Extended Meta Analysis

Our checker evaluates your website's implementation of extended meta tags that enhance functionality, appearance, and sharing capabilities across various platforms.

  • Social media optimization: We verify the presence of OpenGraph and Twitter Card meta tags that control how your content appears when shared.
  • Technical meta tags: We check for proper viewport settings, theme colors, and character encoding that affect rendering and display.
  • Icon implementation: We confirm the presence of favicons, Apple touch icons, and web manifest files for consistent branding across devices.

Based on these findings, you can enhance your site's appearance in search results and social media shares while improving cross-platform functionality.

Extended Meta Best Practices​

❌ Bad Practice​

<!-- Missing viewport meta tag -->
<!-- Causes mobile rendering issues -->

<!-- Missing or incomplete OpenGraph tags -->
<meta property="og:title" content="Page Title" />
<!-- Missing og:description, og:image, og:url, og:type -->

<!-- Missing Twitter Card tags -->
<!-- No control over how content appears when shared on Twitter -->

<!-- Missing favicons and icons -->
<!-- Default browser icon appears instead of brand icon -->

<!-- Inconsistent meta information -->
<title>Product Name | Company</title>
<meta property="og:title" content="Buy This Amazing Product Now!" />
<meta name="twitter:title" content="Special Offer on Products" />
<!-- Different titles across platforms create inconsistent branding -->

<!-- Non-responsive design indication -->
<!-- Missing viewport tag or using fixed-width declarations -->

✅ Good Practice

<!-- Proper viewport configuration -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!-- Complete OpenGraph implementation -->
<meta property="og:title" content="Product Name | Company" />
<meta property="og:description" content="Detailed description of the product under 200 characters" />
<meta property="og:image" content="https://example.com/images/product-image.jpg" />
<meta property="og:url" content="https://example.com/products/product-name" />
<meta property="og:type" content="product" />

<!-- Properly implemented Twitter Cards -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Product Name | Company" />
<meta name="twitter:description" content="Detailed description of the product under 200 characters" />
<meta name="twitter:image" content="https://example.com/images/product-image.jpg" />

<!-- Theme color for browser UI -->
<meta name="theme-color" content="#3367D6" />

<!-- Character encoding -->
<meta charset="utf-8" />

<!-- Comprehensive icon implementation -->
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/icon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/manifest.json" />

Why Extended Meta Tags Matter​

  • Social Sharing Appearance:
    OpenGraph and Twitter Card tags control how your content looks when shared on social platforms, increasing click-through rates.
  • Mobile Optimization:
    Proper viewport settings ensure your site displays correctly on all devices.
  • Brand Recognition:
    Favicon and icon implementation maintain consistent branding across browsers and when saved to home screens.
  • User Experience:
    Theme colors customize browser UI elements to match your brand.
  • Technical Accuracy:
    Proper charset declarations ensure text renders correctly across all languages and devices.

Extended meta tags represent the invisible but crucial layer of your website that controls how it interacts with external platforms, devices, and browsers.