How Do You Manage SEO for Custom-Built Websites?

I created a shared utility file called seo.ts that I copy across projects. It includes a generateMeta function that takes parameters like title, description, and image URL to generate the full meta object, including Open Graph and Twitter tags. In Next.js, using the generateMetadata function makes it pretty seamless. One thing I've learned is to be careful with og:image sizes; each platform has different requirements, so I made a default template in Figma for ease.

I keep a simple SEO utility where I define default values like title, description, and tags. This setup allows me to override values on each page individually. For bigger projects, I centralize everything in a config file or a JSON object so updates are straightforward and don’t require editing multiple files. It's definitely not worth it to redo everything manually; setting it up once and reusing it is the way to go.

I work with a small reusable SEO module that I incorporate into every project. It saves so much time, especially since I can easily update things later without needing to go into every page. It’s a game changer for managing those SEO details efficiently!

Most developers don't start from scratch every time; they usually standardize. A common solution is to create a reusable SEO component that handles props like title and description to automatically inject all the necessary meta tags. When using Next.js, it’s even more efficient with its built-in metadata API. The goal is to define things once and override them as needed—no more copy-pasting.

I had similar frustrations and ended up creating a config object for default meta values. Each page just needs to override what’s specific to it. It still involves code changes, but at least it's in one spot instead of combing through multiple files. The repetition is still there, but centralizing has helped!