I Built a Tool to Understand SEO Tags While Learning Them
While deploying a simple project, I thought everything was done.
But when I searched for my site on Google, nothing showed up.
That’s when I realized something important.
I had not properly set up basic SEO.
Not advanced concepts. Just fundamentals like:
- title tags
- meta description
- social preview
- canonical URLs
There are many great resources available, but while learning, I wanted something more interactive.
Something where I could see what I’m doing instead of just reading.
So I built this 👇
👉 https://seosamjho.vercel.app/
🧠 The Real Challenge
Most beginners don’t struggle with what to do.
They struggle with understanding what each tag actually affects.
For example:
- Why does my link look different when shared?
- Why does Google show a different title sometimes?
- Why is my page not getting clicks?
All of this is controlled by a few lines inside the <head>.
🛠️ What This Tool Does
Instead of just generating code, the tool works like a guided workflow.
🧾 Step 1: Enter Website Details
You enter:
- domain
- title
- description
As you type, the SEO tags update instantly.
So you clearly see input and output together.
🗺️ Step 2: Generate Sitemap
The built-in sitemap builder lets you:
- define your pages
- set change frequency
- assign priority
This helps you understand how your site structure is communicated to search engines.
🤖 Step 3: Generate robots.txt
You can generate a clean robots.txt file that:
- allows proper access
- links your sitemap
- avoids common mistakes
And more importantly, you understand what each line means.
🧠 Step 4: Learn While Using It
Each section includes explanations and video links.
The videos are explained in Hindi to keep things simple and beginner-friendly.
English auto-dub is also available so you can follow along easily.
So instead of switching between multiple resources,
you can learn and implement in one place.
🌍 Open Graph (OG Tags)
One of the most useful things I learned was how Open Graph tags control your website preview.
Here’s a simple example:
<meta property="og:title" content="Cineverse | Movie Discovery Platform">
<meta property="og:description" content="It is a movie rating and discovery platform">
<meta property="og:image" content="https://cineversetv.vercel.app/image.png">
<meta property="og:url" content="https://cineversetv.vercel.app">
What these do:
og:title
Preview title when your link is sharedog:description
Short text shown below the titleog:image
Thumbnail image (recommended size: 1200 × 630 px)og:url
The main URL of your page
When you share your link on LinkedIn, WhatsApp, or other platforms,
this is what decides how your link looks.
⚡ What I Learned While Building This
- Small tags make a big difference
- Social preview matters more than expected
- Clarity is more useful than complexity
Once I understood these basics, everything stopped feeling like guesswork.
🎥 Video Walkthrough
I’ve explained SEO tags step by step in this video:
🛠️ What I’m Improving Next
This tool is still evolving, and I’m working on making it more useful.
🎥 Connected Learning
More videos like robots.txt, sitemap, and deployment will be added directly inside the tool.
👀 Real Output Preview
Planned improvements include:
- Google search preview
- Social share preview
🧪 Smart Suggestions
Adding checks like:
- title too long or too short
- weak descriptions
- missing tags
🧱 Templates
Simple presets like:
- portfolio
- blog
- product
🚀 What This Project Is
This is part of a series where I’m learning and documenting SEO step by step:
- Part 1: Deploying a project
- Part 2: Understanding SEO tags
- Part 3: Getting indexed on Google
🙌 Feedback Helps a Lot
If you try the tool:
- What felt confusing?
- What would make it more useful?
I’m building this while learning, so feedback genuinely helps improve it.
Top comments (0)