3/6/2025 · 3 min read
No Metadata? Who even are you, my Boy? – Sincerely, Google.
I spent way too long wondering why my site wasn’t showing up properly on search engines, why my links looked ugly when shared, and why Google seemed to ignore me like an ex I owed money to. Turns out, the answer was something I had completely overlooked: metadata. Those tiny snippets of information that tell search engines and social platforms what your site is about? Yeah, they matter—a lot. Let me save you the frustration I went through and show you why metadata isn’t just important; it’s essential.
At first, I thought I had metadata covered. I had a basic setup—title, description, and keywords. That should be enough, right? Wrong.
I completely ignored Open Graph (OG) metadata, which is what controls how links to your site appear when shared on social media. Without it, my links looked plain, sometimes just showing a random URL with no preview or a generic title. Not exactly the eye-catching first impression I wanted.
What is Open Graph, and why is it important?
Open Graph was created by Facebook but is now used across platforms like Twitter, LinkedIn, and even messaging apps. It tells these platforms exactly how to display your content—what image to show, what title to use, and how the description should appear. Without OG tags, social platforms guess how to display your link, often leading to bad formatting, missing images, or irrelevant text.
Here’s what I was working with before:
export const metadata = {
title:
"Something | Something",
description:
"More somethings but in larger length...",
keywords:
"web development, frontend, Next.js, React",
};
It wasn’t wrong, but it wasn’t enough. My links lacked proper previews, and my site wasn’t optimized for social sharing.
Here’s how I tackled it:
export const defaultMetadata = {
title:
"Vladimir G | Web Developer",
description:
"Building exceptional web experiences",
keywords:
"web development, frontend, Next.js, React,",
author:
"Vladimir G",
openGraph: {
type:
"website",
url:
"https://www.vladimirgotay.com",
title:
"Vladimir G | Web Developer & Digital Innovator",
description:
"Building exceptional web experiences.",
images: [
{
url:
"https://www.vladimirgotay.com/vladimirg.jpg",
width: 1200,
height: 630,
alt:
"Vladimir Gotay - Web Developer",
},
],
},
twitter: {
card:
"summary_large_image",
title:
"Vladimir G | Web Developer & Digital Innovator",
description:
"Building exceptional web experiences",
images:
["https://www.vladimirgotay.com/vladimirg.jpg"],
},
};
Then you just have to import it at the top of your desired page, keep in mind I was working with jsx, in my case root page.jsx (home page) you can also do it on root layout.jsx but it all depends on how you have your application set up:
import { defaultMetadata } from "./metadata";
export function generateMetadata() {
return defaultMetadata;
}
// The rest of your imports bellow this
import {something} from "somewhere";
import that from "@/there";
After that, my links look polished, my brand is consistent across platforms, and Google (finally) acknowledges my existence.
The lesson? Basic metadata isn’t enough. If you want your site to stand out and look professional, don’t skip Open Graph. Trust me, I learned the hard way.
DONATE