DEV Community

Cover image for How to Generate SEO Meta Tags, Open Graph & JSON-LD (Free Tool Inside)
Shreyash Kalaskar
Shreyash Kalaskar

Posted on

How to Generate SEO Meta Tags, Open Graph & JSON-LD (Free Tool Inside)

#webdev #productivity #frontend #seo

If you’ve ever deployed a website and wondered:

  • Why does Google ignore my page?
  • Why does LinkedIn show the wrong preview?
  • Why does Twitter think my logo is 200 pixels wide?

Congratulations — you’ve met the world of missing SEO meta tags.
In this guide, I’ll show you:

  • What meta tags actually matter

  • How Open Graph and Twitter cards control previews

  • How JSON-LD helps Google understand your content

  • And how to generate all of it in seconds (without manually copy-pasting tags like it’s 2010)

And a free tool that generates everything instantly

1. Basic SEO Meta Tags (Must Have)

Every page should include:

<title>Your Page Title</title>
<meta name="description" content="Short description of your page">
<link rel="canonical" href="https://example.com/page">
Enter fullscreen mode Exit fullscreen mode

What is this? Why They Matter?

title → What Google shows (and judges you by)

description → What users read before deciding whether you’re worth clicking

canonical → Prevents Google from thinking you have commitment issues

Without these, search engines are basically guessing what your page is about. And they’re not great guessers.

2. Open Graph (For Social Sharing)

When someone shares your site on:

  • LinkedIn
  • Facebook
  • Slack

These tags decide whether your link looks polished… or like a broken side project.

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

If your preview image is missing or weirdly cropped, Open Graph is usually the culprit.

3. Twitter Cards

Twitter has its own format — because of course it does.

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="Page description">
<meta name="twitter:image" content="https://example.com/image.jpg">
Enter fullscreen mode Exit fullscreen mode

Without these, your link preview might look like it was generated by a confused robot.

4. JSON-LD Schema (Structured Data)

Structured data (JSON-LD) helps Google understand your page beyond just text.

Example:

<script type="application/ld+json">
{
 "@context": "https://schema.org",
 "@type": "WebPage",
 "name": "Your Page Title",
 "description": "Page description",
 "url": "https://example.com/page"
}
</script>
Enter fullscreen mode Exit fullscreen mode

Think of JSON-LD as giving Google a cheat sheet about your page.

Google appreciates cheat sheets.

The Problem

Manually writing all these tags:

  • Is repetitive
  • Easy to mess up
  • Time consuming
  • And somehow still easy to get wrong

Especially when you’re juggling real features, deadlines, and “quick fixes” that somehow last six months.

💡 The Easy Way (Free Tool)

To make life easier, I built a simple tool that generates:

  • SEO meta tags
  • Open Graph tags
  • Twitter cards
  • JSON-LD schema

You just enter:

  • Page title
  • Description
  • URL
  • Image

And it gives you production-ready code instantly.

No signup. No drama. No mysterious configuration screens.

👉 Try it here:
https://freeseogenerator.site

Why This Matters for Developers

Most developers focus on functionality (which is fair).

But SEO affects:

  • Discoverability
  • Social previews
  • Click-through rate
  • Marketing performance

If you’re building:

  • SaaS
  • Portfolio site
  • Startup landing page
  • Or even a side project

You probably want people to actually find it.

Bonus Tip

Always use:

  • Absolute URLs for og:image
  • Canonical tag on every page
  • A sitemap.xml
  • Proper robots.txt
  • For best link previews, use an Open Graph image size of 1200 × 630 pixels (minimum 600 × 315). Smaller images may look blurry or get awkwardly cropped.

These small things make a big difference.

Final Thoughts

SEO isn’t complicated.

It’s just structured metadata that helps search engines and social platforms understand your content.

Once you get the structure right, you can automate the rest.

In the next post, we’ll implement dynamic SEO in Angular — so your metadata actually knows which page it’s on instead of pretending every route is the homepage.

If you want to generate everything quickly, try the free SEO generator tool:

👉 https://freeseogenerator.site

Top comments (0)