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

Shreyash Kalaskar — Tue, 03 Mar 2026 14:07:30 +0000

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">

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">

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">

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>

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

DEV Community: Shreyash Kalaskar

[Boost]