Social Meta Tags Generator
Social Meta Tags Generator
Generator
Social Previews
Meta Tags Code
example.com
Page Title
Page description that appears in the Facebook preview card.
Page Title
Page description that appears in the LinkedIn preview card.
example.com
<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';
}