A Free Tool for Perfect SEO & Social Tags

Hey devs! 👋

I'm excited to share a new free tool I built to solve a common pain point we all face: creating proper meta tags for our websites.

The Problem

As developers, we know meta tags are crucial for SEO and social sharing. But let's be honest - writing them is:

• Tedious and repetitive

• Error-prone (missing quotes, wrong properties)

• Time-consuming to test across platforms

• Hard to keep up with best practices

I found myself copy-pasting old meta tags and manually adjusting them for each new project. There had to be a better way.

Introducing Meta Tag Generator

That's why I built Meta Tag Generator - a free tool that makes creating meta tags as simple as filling out a form.

Key Features

1. All Essential Tags

   • Basic SEO meta tags

   • Open Graph tags for social sharing

   • Twitter Cards

   • Canonical URLs

   • robots directives

2. Real-time Preview

   • See how your page appears in:

     • Google Search results

     • Facebook shares

     • Twitter posts

   • Instant feedback on changes

3. Developer-Friendly

   • Copy-paste ready code

   • Proper HTML escaping

   • Valid markup

   • Best practices built-in

4. Smart Defaults

   • Auto-populate related fields

   • Intelligent fallbacks

   • Format validation

How It Works

1. Fill in your basic info:

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

2. Customize social sharing:

<meta property="og:title" content="Social Title">
<meta property="og:description" content="Social description">
<meta property="og:image" content="image-url">

3. Preview across platforms:

• See exactly how your content will appear

• Adjust until perfect

• Copy the generated code

Technical Implementation

Built with modern tech stack:

• Next.js 14 App Router

• TypeScript for type safety

• shadcn/ui components

• Server-side validation

Key technical features:

• Real-time preview rendering

• HTML escaping & sanitization

• Platform-specific validation

• Responsive design

Best Practices Built-In

The tool enforces several SEO best practices:

1. Title Tags

   • Optimal length (50-60 characters)

   • Primary keyword placement

   • Brand name handling

2. Meta Descriptions

   • Recommended length (150-160 characters)

   • Call-to-action inclusion

   • Keyword natural usage

3. Open Graph

   • Required vs optional properties

   • Image size recommendations

   • Content type selection

4. Twitter Cards

   • Proper card type selection

   • Image aspect ratios

   • Character limits

Use Cases

Perfect for:

• New website launches

• Blog posts & articles

• Product pages

• Portfolio projects

• Landing pages

Future Plans

I'm planning to add more features based on community feedback:

1. JSON-LD Schema Generator

2. Meta Tags Validator

3. Bulk Generation

4. Custom Templates

5. API Access

Try It Out

The tool is completely free - give it a try at gleam.so/tools/meta-generator

I'd love to hear your feedback:

• What features would you like to see?

• How could it be more useful for your workflow?

• Any bugs or issues you find?

Building in Public

This is the first free tool I've released as part of gleam.so - a tool for creating beautiful Open Graph, Social Sharing images. I'm building in public and sharing the journey.

Follow me on Twitter for:

• Development updates

• New feature announcements

• Tips & tricks

• Behind the scenes

Resources

Want to learn more about meta tags? Check out these resources:

1. Open Graph Protocol

2. Twitter Cards Documentation

3. Google's SEO Starter Guide

---

Would love to hear your thoughts and feedback in the comments! Let me know if you have any questions about the implementation or suggestions for improvement.

#webdev #seo #typescript #nextjs #opensource