DEV Community

Cover image for How to Optimize Your Personal Website for Keywords: A Simple Guide
Deividas Strole
Deividas Strole

Posted on • Edited on

How to Optimize Your Personal Website for Keywords: A Simple Guide

#seo #webdev #html #tutorial

How to Optimize Your Personal Website for Keywords: A Simple Guide

When you are building a website, you want it to be not only visually nice, but also discoverable by other people. To achieve that you need to adjust the code and text for keywords - words that people will look for. I created this guide using my name as an example. You can freely copy and use the code for your own keywords though.

Why Keyword Optimization Matters

When someone searches for your name, or professional identity your personal website should appear in the top results. This is especially important for:

  • Building your professional brand
  • Getting found by clients and recruiters
  • Establishing credibility in your field
  • Controlling your online narrative

The techniques in this guide not only work for classical Search Engine Optimization, but also are a must have for Artificial Intelligence Optimization in 2026. We will use SEO and AIO interchangeably in this guide.

The Foundation: Semantic HTML Structure

Search engines and AI love well-structured HTML. Start with proper semantic elements:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Deividas Strole - Web Developer</title>
</head>
<body>
    <header>
        <h1>Deividas Strole</h1>
        <nav><!-- Navigation --></nav>
    </header>
    <main>
        <section><!-- Content --></section>
    </main>
    <footer><!-- Footer --></footer>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Critical Meta Tags for SEO/AIO

Your <head> section is prime real estate for SEO and AIO. Here are the essential meta tags:

1. Title Tag

The title tag is the most important on-page SEO/AIO element. It appears in search results and browser tabs.

<title>Deividas Strole - Web Developer</title>
Enter fullscreen mode Exit fullscreen mode

Best practices:

  • Keep it under 60 characters
  • Include your primary keyword (your name or your product) at the beginning
  • Add a secondary keyword or descriptor
  • Make it compelling and click-worthy

2. Meta Description

While not a direct ranking factor, the meta description influences click-through rates:

<meta name="description" content="Deividas Strole is a web developer specializing in Java, JavaScript, and SQL. Explore my portfolio, projects, and get in touch for collaborations.">
Enter fullscreen mode Exit fullscreen mode

Best practices:

  • Keep it between 150-160 characters
  • Include your keyword naturally
  • Write for humans, not just search engines
  • Include a call-to-action

3. Open Graph Tags

These tags control how your site appears when shared on social media:

<meta property="og:title" content="Deividas Strole - Web Developer Portfolio">
<meta property="og:description" content="Explore the portfolio and projects of Deividas Strole, a web developer specializing in modern web technologies.">
<meta property="og:image" content="https://deividasstrole.com/images/deividas-strole-lawander-sc.png">
<meta property="og:url" content="https://deividasstrole.com">
<meta property="og:type" content="website">
Enter fullscreen mode Exit fullscreen mode

4. Twitter Card Tags

Similar to Open Graph, but for X (Twitter) - this is what is shown if your website is shared on X (Twitter):

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Deividas Strole - Web Developer">
<meta name="twitter:description" content="Web developer specializing in modern applications and user experiences.">
<meta name="twitter:image" content="https://yourwebsite.com/images/twitter-card.jpg">
Enter fullscreen mode Exit fullscreen mode

Strategic Keyword Placement

Now that the foundation is set, let's strategically place your keyword throughout the page:

1. H1 Heading

Your H1 should contain your primary keyword and appear only once per page:

<h1>Deividas Strole</h1>
Enter fullscreen mode Exit fullscreen mode

2. Subheadings (H2, H3)

Use related keywords and variations in subheadings:

<h2>About Deividas Strole</h2>
<h2>Projects by Deividas Strole</h2>
<h3>Contact Deividas Strole</h3>
Enter fullscreen mode Exit fullscreen mode

3. First Paragraph

Include your keyword in the opening paragraph naturally:

<section>
    <p>Hello! I'm <strong>Deividas Strole</strong>, a web developer passionate about creating elegant solutions to complex problems. With expertise in modern web technologies, I help businesses build exceptional digital experiences.</p>
</section>
Enter fullscreen mode Exit fullscreen mode

4. Image Alt Text

Search engines can't "see" images, but they read alt text:

<img src="profile.jpg" alt="Deividas Strole - Web Developer">
<img src="project1.jpg" alt="E-commerce website designed by Deividas Strole">
Enter fullscreen mode Exit fullscreen mode

5. Internal Links

Create descriptive anchor text with your keyword:

<a href="#about">Learn more about Deividas Strole</a>
<a href="#portfolio">View Deividas Strole's portfolio</a>
Enter fullscreen mode Exit fullscreen mode

Structured Data (Schema.org)

Help search engines understand your content better with JSON-LD structured data:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Person",
  "name": "Deividas Strole",
  "url": "https://deividasstrole.com",
  "jobTitle": "Web Developer",
  "description": "Web developer specializing in modern web applications",
  "sameAs": [
    "https://linkedin.com/in/deividas-strole",
    "https://github.com/deividas-strole",
    "https://youtube.com/@deividas-strole",
    "https://x.com/deividasstrole"
  ]
}
</script>
Enter fullscreen mode Exit fullscreen mode

This creates a "Knowledge Graph" that can appear in search results.

Technical SEO Considerations

1. URL Structure

Keep your URLs clean and keyword-rich:

✅ yourwebsite.com/deividas-strole
✅ deividasstrole.com
❌ yourwebsite.com/page?id=12345
Enter fullscreen mode Exit fullscreen mode

2. Canonical Tag

Prevent duplicate content issues:

<link rel="canonical" href="https://yourwebsite.com/">
Enter fullscreen mode Exit fullscreen mode

3. Favicon

While not directly impacting SEO, a favicon improves brand recognition:

<link rel="icon" type="image/png" href="/favicon.png">
Enter fullscreen mode Exit fullscreen mode

4. Mobile Optimization

Google uses mobile-first indexing, so ensure your viewport meta tag is set:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Enter fullscreen mode Exit fullscreen mode

Content Strategy for Personal Brands

Beyond technical optimization, create content that naturally incorporates your keyword:

About Section 

<section id="about">
    <h2>About Deividas Strole</h2>
    <p>Deividas Strole is a web developer with 5+ years of experience building scalable applications. Specializing in Java, JavaScript, Spring Boot, React, SQL, and AI, Deividas helps startups and enterprises transform their digital presence.</p>
</section>
Enter fullscreen mode Exit fullscreen mode

Portfolio/Projects 

<section id="portfolio">
    <h2>Projects by Deividas Strole</h2>
    <article>
        <h3>E-commerce Platform</h3>
        <p>Deividas Strole designed and developed a full-stack e-commerce solution processing 10,000+ daily transactions.</p>
    </article>
</section>
Enter fullscreen mode Exit fullscreen mode

Avoiding Keyword Stuffing

While you want to include your keyword, don't overdo it. Aim for a keyword density of 1-2%. For a 500-word page, that's 5-10 mentions. Focus on natural language and user experience first.

Bad example (keyword stuffing):

"Deividas Strole is the best developer. Deividas Strole builds websites. If you need Deividas Strole, contact Deividas Strole today."

Good example:

"As a web developer, I help clients to solve all their web related problems. My approach is hard work, no sleep, and hundred cups of coffee. All this combined deliver unseen and unheard incredible results... :D"

Performance Optimization

Page speed is a ranking factor. Optimize your index.html:

  1. Minimize HTML: Remove unnecessary whitespace and comments
  2. Optimize images: Use WebP format and appropriate dimensions
  3. Lazy load: Load images below the fold lazily
  4. Inline critical CSS: Include above-the-fold styles in <head>
  5. Defer JavaScript: Use defer or async attributes 
<script src="script.js" defer></script>
Enter fullscreen mode Exit fullscreen mode

Complete Example

Here's a simplified but optimized index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Deividas Strole - Web Developer & Designer</title>
    <meta name="description" content="Deividas Strole is a web developer specializing in modern web applications. Explore projects, skills, and get in touch for collaborations.">
    <link rel="canonical" href="https://deividasstrole.com/">

    <!-- Open Graph -->
    <meta property="og:title" content="Deividas Strole - Web Developer">
    <meta property="og:description" content="Portfolio and projects of web developer Deividas Strole.">
    <meta property="og:image" content="https://deividasstrole.com/images/deividas-strole-lawander-sc.png">
    <meta property="og:url" content="https://deividasstrole.com">

    <!-- Structured Data -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Person",
      "name": "Deividas Strole",
      "url": "https://deividasstrole.com",
      "jobTitle": "Web Developer"
    }
    </script>
</head>
<body>
    <header>
        <h1>Deividas Strole</h1>
        <nav>
            <a href="#about">About</a>
            <a href="#portfolio">Portfolio</a>
            <a href="#contact">Contact</a>
        </nav>
    </header>

    <main>
        <section id="hero">
            <h2>Web Developer & Designer</h2>
            <p>Hello! I'm <strong>Deividas Strole</strong>, a passionate developer creating modern web experiences.</p>
        </section>

        <section id="about">
            <h2>About Deividas Strole</h2>
            <img src="profile.jpg" alt="Deividas Strole profile photo">
            <p>With expertise in modern web technologies, I help businesses build exceptional digital products that users love.</p>
        </section>

        <section id="portfolio">
            <h2>Featured Projects</h2>
            <article>
                <h3>Project Name</h3>
                <img src="project.jpg" alt="Web application by Deividas Strole">
                <p>A responsive web application built with React and Node.js.</p>
            </article>
        </section>

        <section id="contact">
            <h2>Get in Touch</h2>
            <p>Interested in working together? <a href="mailto:hello@example.com">Contact Deividas Strole</a></p>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 Deividas Strole. All rights reserved.</p>
    </footer>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Monitoring and Iteration

After implementing these optimizations:

  1. Submit to Google Search Console: Monitor how your site appears in search
  2. Check Google Analytics: Track organic traffic and user behavior
  3. Test with PageSpeed Insights: Ensure fast loading times
  4. Monitor rankings: Use tools like Ahrefs or SEMrush to track keyword positions
  5. Update regularly: Fresh content signals to search engines and AI that your site is active and not forgotten.

Conclusion

Optimizing your personal website for keywords is interesting but tedious job. You need to start with the code and finish with the content of your website itself. This guide is a good start and will give you nice fundament on which you can build your brand and strong online presence.

Remember, SEO and AIO is a marathon, not sprint. To see results, you need weeks if not months. But it is doable and rewarding.

Now go and optimize your index.html - Internet is waiting for you!

About the Author

Deividas Strole is a Full-Stack Developer based in California, specializing in Java, Spring Boot, JavaScript, React, SQL, and AI-driven development. He writes about software engineering, modern full-stack development, and digital marketing strategies.

Connect with me:

Top comments (0)