If you've already integrated Google Analytics into your website — congrats, you're one step closer to understanding your users. If you haven't, check out my previous post on how to do it in just 5 minutes.
But tracking visitors is just one part of the puzzle.
What if people can't even find your site in the first place?
That's where SEO (Search Engine Optimization) comes in.
🔍 What Is SEO?
SEO is the process of optimizing your website so that search engines (like Google) can find, understand, and rank it.
A well-optimized website:
- Gets organic traffic (no ads!)
- Builds trust and visibility
- Reaches more people without spending extra money
Imagine you wrote a great blog post on “how to cook nasi goreng.” With good SEO, your post can appear on the first page of Google when someone searches for it. That's the power of SEO.
Look when i search my blog that show in google:
Why SEO Matters for Your Website
A beautiful website is great. But if no one finds it? It's like printing flyers and never handing them out.
Here's why SEO is essential:
- 📈 Rank higher on Google = more clicks
- 💰 Cost-effective compared to paid ads
- 🧠 Helps improve user experience (loading speed, mobile-friendly, structure)
It’s not just about keywords — SEO covers performance, accessibility, metadata, and more.
🛠️ Adding SEO in a Next.js App
Here's a basic example of how you can add SEO meta tags the simple way in a Next.js app
using the Metadata type from next/metadata.
// app/about/page.tsx
export const metadata: Metadata = {
title: "About Us",
description: "Learn more about our mission and values.",
keywords: ["about", "mission", "values"],
openGraph: {
title: "About Us",
description: "Learn more about our mission and values.",
url: "https://yourwebsite.com/about",
siteName: "Your Website",
images: [
{
url: "/images/about-thumbnail.jpg",
width: 800,
height: 600,
alt: "About Us Thumbnail",
},
],
locale: "en_US",
type: "website",
},
};
export default function AboutPage() {
return (
<>
<h1>About Us</h1>
<p>Learn more about our mission and values.</p>
</>
);
}That's it — simple, reusable, and works with OpenGraph and Twitter Cards too.
If you dont know about OpenGraph, it's a protocol that allows you to control how your content appears when shared on social media. It's like giving your website a business card. here the picture of how it looks like:
So that's it — just add the metadata object to your page, and you're good to go!
📊 Tips to Check Your SEO Score
Want to know how well your website performs? Use these free tools to analyze your SEO:
Tools to Use:
- Google Lighthouse - Built into Chrome DevTools
- PageSpeed Insights - Google's web performance tool
What These Tools Measure:
- Performance - How fast your site loads
- Accessibility - How user-friendly your site is for everyone
- Best Practices - Following web standards
- SEO - Search engine optimization score
My Website's Score:
Pro tip: Aim for scores above 90 in all categories. Even small improvements can boost your search rankings!
Note: My accessibility score needs some work — always room for improvement! 😅
Free Template: SEO + DaisyUI + Analytics
To save you time, I've created a free starter template using:
- Next.js for the framework
- DaisyUI for the UI components
- SEO Optimization built-in
- Google Analytics for tracking
- OpenGraph and Twitter Cards for social media
You can find the template on GitHub.
Happy coding!