elefcode

Meta Tag Generator

SEO, Open Graph, Twitter Card & JSON-LD structured data

Import from URL

Primary

31/60

Browser tab & Google results

118/160

Google snippet

Comma-separated

#6366f1

Open Graph

31/60
65/200

1200×630px recommended

Twitter

e.g. @yoursite

Google Preview

https://elefcode.com

elefcode — Free Developer Tools

Fast, browser-based developer utilities. JSON formatter, JWT decoder, regex tester, and more. Everything runs locally.

Facebook · 1200×630

elefcode.com

elefcode — Free Developer Tools

Fast, browser-based developer utilities. Everything runs locally.

Twitter · Large

elefcode — Free Developer Tools

Fast, browser-based developer utilities. Everything runs locally.

elefcode.com

26 lines
<!-- Primary Meta Tags -->
<title>elefcode — Free Developer Tools</title>
<meta name="title" content="elefcode — Free Developer Tools">
<meta name="description" content="Fast, browser-based developer utilities. JSON formatter, JWT decoder, regex tester, and more. Everything runs locally.">
<meta name="keywords" content="developer tools, JSON formatter, JWT decoder, regex tester">
<meta name="author" content="elefcode">
<meta name="robots" content="index, follow">
<meta name="theme-color" content="#6366f1">
<link rel="canonical" href="https://elefcode.com">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://elefcode.com">
<meta property="og:title" content="elefcode — Free Developer Tools">
<meta property="og:description" content="Fast, browser-based developer utilities. Everything runs locally.">
<meta property="og:image" content="https://elefcode.com/logo.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://elefcode.com">
<meta name="twitter:title" content="elefcode — Free Developer Tools">
<meta name="twitter:description" content="Fast, browser-based developer utilities. Everything runs locally.">
<meta name="twitter:image" content="https://elefcode.com/logo.png">
<meta name="twitter:site" content="@elefcode">

Advertisement

Guide

About the Meta Tag Generator

Meta tags tell search engines and social platforms how to present your page. The title and description shape your Google search result; Open Graph tags control how a link looks when shared on Facebook, LinkedIn, Slack, and most apps; and Twitter Card tags do the same for X. Getting them right means better click-through and polished share previews. This generator produces all of them from a simple form.

Live previews show how your page will appear in Google results and as a social card, so you can tune the wording and image before you ship. Copy the finished tags into your page's <head>.

The tags that matter most

  • Title — the clickable headline in search and the browser tab. Aim for ~50–60 characters.
  • Description — the summary under the title. Around 150–160 characters reads best.
  • og:image — the preview image for shares; 1200×630 is the safe size.
  • og:title / og:description — how the link is titled and summarized on social platforms.

Why Open Graph is worth the effort

Without Open Graph tags, platforms guess at your link's title and image — often picking the wrong text or no image at all, which looks unprofessional and lowers clicks. A defined og:image, title, and description give you a deliberate, eye-catching card everywhere your link is shared. It's a small addition with an outsized effect on how your content spreads.

How to use it

  1. 1Fill in your page title, description, URL, and image.
  2. 2Check the live Google and social card previews.
  3. 3Adjust the wording and image to fit the recommended lengths and sizes.
  4. 4Copy the generated meta tags into your page's <head>.

Frequently asked questions

What length should my title and description be?

Aim for about 50–60 characters for the title and 150–160 for the description so they display fully in search results without being truncated.

What is Open Graph?

A set of meta tags (og:title, og:description, og:image, and more) that control how your link appears when shared on social platforms and messaging apps.

What size should the og:image be?

1200×630 pixels is the widely supported size that displays cleanly across Facebook, LinkedIn, Slack, and most platforms.

Do I need separate Twitter Card tags?

Many platforms fall back to Open Graph, but adding Twitter Card tags gives you precise control over how links appear on X, including the card type.

Are the tags generated locally?

Yes. The tags and previews are produced entirely in your browser.

Related tools