techseo

SEO technical good practices

Boris Stoyanov-Brignoli

4 min read

As a front-end developer, I am systematically faced with SEO issues during the development of webapps. A good technical implementation, early in the process of building a product, is key as it only bears fruit in the medium term. It is also transparent to the end user... although essential for the business.

July 14, 2023

1. Semantic HTML structure:

Utilizing a semantic HTML structure is crucial as it helps search engines understand the content and structure of your page, which can enhance your site's ranking.

<header>
    <h1>Page Title</h1>
</header>
<nav>
    <!-- Navigation menu -->
</nav>
<article>
    <!-- Main content -->
</article>
<footer>
    <!-- Footer -->
</footer>

2. Meta tags:

Meta tags provide information to search engines about the content of the page, which can help improve the page's relevance for specific search terms.

<meta
    name="description"
    content="This page talks about..."
/>
<meta
    name="keywords"
    content="keyword1, keyword2, keyword3"
/>

3. Image optimization:

Optimizing images, notably using the alt attribute, enhances accessibility and can also contribute to optimization for image search.
```
<img
    src="image.jpg"
    alt="Image description"
/>
```

4. Performance optimization:

Better performance, like quick loading time, improves user experience and can reduce bounce rate, which in turn can enhance your site's ranking.

5. Utilization of SSL (HTTPS):

SSL ensures a secure connection, which is not only beneficial for user security, but is also favored by search engines.

6. Responsive design:

A responsive design ensures that your site is accessible and usable across a variety of devices and screen sizes, which is crucial for user experience and SEO.
```
@media (max-width: 600px) {
    body {
        font-size: 14px;
    }
}
```

7. Header tags:

Header tags structure the content, make the page more readable, and help search engines identify the main topics of the page.

8. Schema markup:

Schema Markup helps search engines understand the content of your page, which can lead to better rich search results.

<script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "Person",
      ...
    }
</script>

9. URL optimization:

Descriptive and concise URLs with relevant keywords can improve the page's understanding by search engines and users.
```
https://www.example.com/example-product
```

10. Optimization of internal link anchors:

Descriptive anchors help users and search engines understand the content you are linking to, which can improve navigation and SEO ranking.
```
<a href="#section2">Learn more about our product</a>
```

11. Prerendering and Server Side Rendering (SSR):

These techniques can improve loading time and indexability of heavy JavaScript applications.

12. Handling 404 errors:

A custom 404 error page can help keep users on your site even when they encounter a missing page.

13. Optimization of robots.txt file and XML sitemap:

These files help search engines crawl and index your site more efficiently.

# robots.txt
User-agent: *
Disallow: /admin/
Sitemap: https://www.example.com/sitemap.xml

<!-- sitemap.xml -->
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://www.example.com/page1</loc>
    <lastmod>2023-10-01</lastmod>
  </url>
  <url>
    <loc>https://www.example.com/page2</loc>
    <lastmod>2023-10-02</lastmod>
  </url>
</urlset>

14. Management of canonical tags:

Canonical tags help manage duplicate content, which can prevent SEO penalties.

<link
    rel="canonical"
    href="https://www.example.com/original-page"
/>

15. Backlink monitoring:

A healthy backlink profile is crucial for domain reputation and authority, which can enhance your site's ranking.

Optimization for social media can increase your site's visibility and improve traffic.

<meta
    property="og:title"
    content="Page Title"
/>
<meta
    property="og:description"
    content="Page description"
/>
<meta
    property="og:image"
    content="https://www.example.com/image.jpg"
/>

17. Multilingualism:

Proper management of multilingualism can improve user experience and SEO ranking in different regions and languages.

<link
    rel="alternate"
    hreflang="en"
    href="https://www.example.com/en/page"
/>
<link
    rel="alternate"
    hreflang="fr"
    href="https://www.example.com/fr/page"
/>

18. Accessibility:

Accessibility is crucial for an inclusive user experience and can also have a positive impact on SEO.
```
<button
    aria-label="Close"
    onclick="closeWindow()"
>
    X
</button>
`
```

This guide aims to cover the crucial technical aspects of SEO for front-end developers, providing a solid foundation for successful SEO implementation.

These topics should be spearheaded by either Product Owners (POs) and/or developers within a product team. It's a collective responsibility to ensure successful execution.