Social Meta - Web Tools Pro

Social Meta Tags Generator

Generator

Social Previews

Meta Tags Code

Page Title (og:title) Recommended: 50-60 characters

Page Description (og:description) Recommended: 150-160 characters

Page URL (og:url)

Image URL (og:image) Recommended size: 1200×630 pixels (Facebook), 800×418 (Twitter)

Twitter Handle (twitter:site)

Twitter Card Type

Meta Tags Code

HTML

React

Vue

WordPress


<title>Page Title</title>
<meta name="description" content="Page description">


<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page">
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Page description">
<meta property="og:image" content="https://example.com/image.jpg">


<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://example.com/page">
<meta property="twitter:title" content="Page Title">
<meta property="twitter:description" content="Page description">
<meta property="twitter:image" content="https://example.com/image.jpg">

import React from 'react';
import { Helmet } from 'react-helmet';

const MetaTags = () => {
  return (
    <Helmet>
      <!-- Primary Meta Tags -->
      <title>Page Title</title>
      <meta name="description" content="Page description" />

      <!-- Open Graph / Facebook -->
      <meta property="og:type" content="website" />
      <meta property="og:url" content="https://example.com/page" />
      <meta property="og:title" content="Page Title" />
      <meta property="og:description" content="Page description" />
      <meta property="og:image" content="https://example.com/image.jpg" />

      <!-- Twitter -->
      <meta property="twitter:card" content="summary_large_image" />
      <meta property="twitter:url" content="https://example.com/page" />
      <meta property="twitter:title" content="Page Title" />
      <meta property="twitter:description" content="Page description" />
      <meta property="twitter:image" content="https://example.com/image.jpg" />
    </Helmet>
  );
};

export default MetaTags;

<template>
  <div>
    <!-- Your component content -->
  </div>
</template>

<script>
export default {
  head: {
    title: 'Page Title',
    meta: [
      // Primary Meta Tags
      { name: 'description', content: 'Page description' },
      
      // Open Graph / Facebook
      { property: 'og:type', content: 'website' },
      { property: 'og:url', content: 'https://example.com/page' },
      { property: 'og:title', content: 'Page Title' },
      { property: 'og:description', content: 'Page description' },
      { property: 'og:image', content: 'https://example.com/image.jpg' },
      
      // Twitter
      { property: 'twitter:card', content: 'summary_large_image' },
      { property: 'twitter:url', content: 'https://example.com/page' },
      { property: 'twitter:title', content: 'Page Title' },
      { property: 'twitter:description', content: 'Page description' },
      { property: 'twitter:image', content: 'https://example.com/image.jpg' }
    ]
  }
}
</script>

/**
 * Add this code to your theme's functions.php file
 * or in a custom plugin
 */
function add_social_meta_tags() {
    if (is_single() || is_page()) {
        // Get post/page data
        $title = get_the_title();
        $description = get_the_excerpt();
        $url = get_permalink();
        $image = get_the_post_thumbnail_url();
        
        // Fallback image
        if (!$image) {
            $image = 'https://example.com/default-image.jpg';
        }
        ?>



    `;

            document.getElementById('vue-code').querySelector('code').textContent = vueCode;

            // WordPress code
            let wordpressCode = `/**
 * Add this code to your theme's functions.php file
 * or in a custom plugin
 */
function add_social_meta_tags() {
    if (is_single() || is_page()) {
        // Get post/page data
        $title = get_the_title();
        $description = get_the_excerpt();
        $url = get_permalink();
        $image = get_the_post_thumbnail_url();
        
        // Fallback image
        if (!$image) {
            $image = '${escapedImage}';
        }
        ?>
        
        

        
        
        
        
        
        `;

            if (twitterHandle) {
                wordpressCode += `
        `;
            }

            wordpressCode += `
        
        
        
        
        
        
         {
                alert('Code copied to clipboard!');
            }).catch(err => {
                console.error('Failed to copy:', err);
                showError('Failed to copy to clipboard');
            });
        }

        function showError(message) {
            const errorElement = document.getElementById('error-message');
            errorElement.textContent = message;
            errorElement.style.display = 'block';
        }

        function hideError() {
            document.getElementById('error-message').style.display = 'none';
        }