← All Articles

The Developer's Guide to SEO

A step by step pass over a portfolio site: metadata, structured data, sitemaps and internal linking.

By Aman Kumar2024-07-153 min read
The Developer's Guide to SEO

Hey there, fellow code enthusiasts! I’m Aman, an AI Engineer and Full-Stack Developer, and today we’re diving into the world of SEO for your portfolio website. I’ll walk you through how I’m optimizing my site, amankumar.ai, and give you step-by-step instructions to boost your own site’s visibility. Let’s get your awesome work the attention it deserves!

  1. Quick Wins: The Low-Hanging Fruit

a) Meta Descriptions

Impact: 4/5 | Effort: 1/5

Steps:

  • Open your HTML file or component for each page

  • Add or update the meta description tag in the section:

<meta name=”description” content=”Your compelling description here”>

  • Keep it under 160 characters and include relevant keywords

Example: <meta name=”description” content=”Aman Kumar: AI Engineer & Full-Stack Developer. Explore my projects in machine learning, web development, and more. Let’s build something amazing together!”>

b) Title Tags and H1 Headings

Impact: 5/5 | Effort: 2/5

Steps:

  • Update your tag in the <head> section

  • Ensure your main keyword is near the beginning

  • Match your H1 heading closely to your title tag

Example:

Aman Kumar | AI Engineer & Full-Stack Developer

Aman Kumar: AI Engineer & Full-Stack Developer

c) Image Optimization

Impact: 3/5 | Effort: 2/5

Steps:

  • Add descriptive alt text to all images

  • Use tools like ImageOptim or TinyPNG to compress images

  • In Next.js, use the Image component for automatic optimization

Example:

<Image src=”/profile-pic.jpg” alt=”Aman Kumar, AI Engineer” width={200} height={200} />

d) Internal Linking

Impact: 3/5 | Effort: 2/5

Steps:

  • Review your site structure

  • Add relevant links between pages where it makes sense

  • Use descriptive anchor text

Example:

Check out my <Link href=”/projects”>latest AI projects for more details.

  1. Technical SEO: Leveraging Your Dev Skills

a) Next.js SEO Benefits

Impact: 4/5 | Effort: 3/5

Steps:

  • Use getServerSideProps or getStaticProps for server-side rendering or static generation

  • Implement dynamic imports for faster initial page loads

  • Utilize Next.js’s built-in code splitting

b) Canonical Tags

Impact: 3/5 | Effort: 2/5

Steps:

  • Add a canonical link in the of each page

Example:

c) Sitemap.xml

Impact: 4/5 | Effort: 2/5

Steps:

  • Install next-sitemap: npm install next-sitemap

  • Create next-sitemap.config.js in your project root

  • Add a postbuild script in package.json: “postbuild”: “next-sitemap”

d) Robots.txt

Impact: 3/5 | Effort: 1/5

Steps:

  • Create a robots.txt file in your public folder

Example content:

User-agent: *

Allow: /

Sitemap: https://amankumar.ai/sitemap.xml

  1. Content Optimization: Speak to Humans and Bots

a) Keyword Research

Impact: 5/5 | Effort: 4/5

Steps:

  • Use tools like Google Keyword Planner or Ubersuggest

  • Identify 5-10 key phrases relevant to your skills

  • Incorporate these naturally into your content

b) Content Structure

Impact: 4/5 | Effort: 3/5

Steps:

  • Use H2 for main sections, H3 for subsections

  • Keep paragraphs short and scannable

  • Use bullet points or numbered lists for easy reading

c) Balancing SEO and UX

Impact: 4/5 | Effort: 3/5

Steps:

  • Ensure your site is easily navigable

  • Use clear, descriptive menu items

  • Implement a search function if you have lots of content

  1. Speed and Performance: The Technical Edge

a) Page Speed Optimization

Impact: 5/5 | Effort: 4/5

Steps:

  • Use Google PageSpeed Insights to identify issues

  • Implement lazy loading for images

  • Minify CSS and JavaScript

  • Use a CDN for faster content delivery

b) Mobile Responsiveness

Impact: 5/5 | Effort: 3/5

Steps:

  • Use responsive design principles

  • Test on various devices and screen sizes

  • Implement media queries in your CSS

  • Use tools like Chrome DevTools’ device mode for testing

  1. Off-Page SEO: Networking in the Dev World

a) Backlink Building

Impact: 5/5 | Effort: 5/5

Steps:

  • Contribute to open-source projects on GitHub

  • Write guest posts for developer blogs

  • Participate in online dev communities and forums

  • Speak at tech meetups or conferences

b) Social Media Presence

Impact: 3/5 | Effort: 3/5

Steps:

  • Regularly update your GitHub profile

  • Share your projects and thoughts on Twitter and LinkedIn

  • Engage with other developers’ content

  • Link to your social profiles from your portfolio

  1. Measure and Iterate

a) Google Analytics Setup

Impact: 4/5 | Effort: 2/5

Steps:

  • Create a Google Analytics account

  • Add the Google Analytics tag to your site (Next.js has packages to help with this)

  • Set up goals to track important actions (e.g., contact form submissions)

b) SEO Checking Tools

Impact: 3/5 | Effort: 2/5

Steps:

  • Sign up for tools like SEMrush, Moz, or Ahrefs

  • Regularly run site audits (start with monthly)

  • Address issues found, prioritizing high-impact, low-effort fixes

  1. Advanced Techniques for the Overachievers

a) Schema.org Structured Data

Impact: 4/5 | Effort: 4/5

Steps:

  • Identify relevant schema types (e.g., Person, WebSite)

  • Implement JSON-LD in your site’s

  • Use Google’s Structured Data Testing Tool to validate

b) Blog Content Strategy

Impact: 5/5 | Effort: 5/5

Steps:

  • Plan a content calendar (aim for consistency, e.g., bi-weekly posts)

  • Write in-depth articles about your projects or tech insights

  • Include relevant keywords naturally

  • Promote your content on social media and dev communities

Remember, SEO is an ongoing process. Start with the quick wins and gradually implement more advanced techniques. Keep testing, learning, and iterating, just like you do with your code!

Have you tried any of these techniques? What results did you see? Drop a comment below and let’s chat! And hey, if this guide helped you out, give it a share. Let’s help more developers get their awesome work discovered!

P.S. Don’t forget to check out my portfolio at amankumar.ai to see these principles in action. Happy optimizing, and may the search rankings be ever in your favor!

Feel free to say hi or connect via Twitter and LinkedIn.

Related reading