|

A SEO Guide for Frontend Developers

As a frontend developer, you are jointly responsible for the SEO performance of your projects. To make your frontends even more interesting for search engines, let's take a look today at what's important and what you should pay attention to when building reusable elements for the editors of a content management system.

Weight and performance ⚖️

With the rise of the mobile web and the introduction of the Mobile First Index, Google has introduced many new ranking factors in recent years that are especially relevant to front-end developers.

Over 50% of search queries are now made via mobile devices, which are not always necessarily on stable WLAN networks.

Search engine algorithms are becoming increasingly sensitive to usability, with page speed and mobile-friendliness being two of the most prominent examples. It is obvious that Google only wants to recommend pages that can be used well and happily by users.

HD6N7-data-mobile-site-abandonment-three-second-load-download


Are your images outputting optimally for all viewports? 🖼️

The bulk of the "page weight" of the average website is made up of images. Use picture tags and think mobile first to improve the page experience for your mobile users and bots.

A great reference for this, is the e-book "Essential Image Optimisation" by Addy Osmani.

<picture>
 <!-- 100kb -->
 <source srcset="dogs-800.png" media="(min-width: 601px)">
 <!-- 60kb -->
 <source srcset="dogs-600.png" media="(min-width: 401px)">
 <!-- 20kb -->
 <img src="dogs-400.png" alt="Two playing dogs.">
</picture>

For example (MDN)


Are you aware of how long your JavaScript takes to parse? 🎡

JavaScript can take a heck of a lot of time, but it's not the file size that affects performance.

Parsing and execution times can vary greatly by a device's hardware. On an average phone (Moto G), the time to syntactically parse 1 MB of (uncompressed) JavaScript is about 1.3 - 1.4 seconds!

So mobile users spend about 15 - 20% of the time waiting for our JavaScript code to be parsed. Therefore, keep your JavaScript as small as possible.

DC8D2XbXUAItNNQ

Go to source


Do you have a handle on your render tree? 🌳

Unused CSS slows down the browser's construction of the render tree. The render tree is like the DOM tree except that it contains the styles for every possible node.

To construct the render tree, a browser must traverse the entire DOM structure and check which CSS rules apply to each node. The more unused CSS there is, the more time a browser may need to calculate the styles for each node.

The CSS that is required to load a page is called critical CSS. In general, page loading should only be blocked if critical CSS is present. For a great place to start on Critical CSS, see Google Web Platform Docs.

"Critical" by Addy Osmani automates the process of critical CSS extraction.

Optimize markup 🧐

In content management systems, editors can assemble their pages themselves. As frontend developers, we must therefore pay particular attention to providing editors with tools that deliver a clean SEO framework despite the greatest possible individualization.


Does this component really need headline tags? 🔖

The headline tags <h1>,<h2>,<h3>,<h4>,<h5> and <h6> should be used only to structure text, not to "style" different components. So before you start selecting the markup for a component, pay attention to what kind of information should be conveyed.

A classic mistake is to use headline tags for recurring teaser elements. On a visual level, the headline is an important visual leader. It often helps to build simple helper classes along the lines of .headline-big or .headline-small, which are simply applied to <p> or <span> elements.


Being accessible - for users and bots 🤖

In our series of articles on web application accessibility, we showed you what to look for to optimize your site for impaired people. These people often resort to aids such as screen readers or voice assistants.

Basically, an SEO bot processes the front end very similarly to these assistants! For Google, our optimized markup is essential for displaying rating stars, event data or prices in the snippets of the SERP.


Markup of links and images 📝

Also a topic in our series on accessibility: alt and title attributes on links and images. However, the editors of the website are responsible for the content of these tags - so make sure that this content can be maintained!

<!-- For links -->
<a href="example.com" title="External link to example.com" target="_blank">
    Click here!
</a>
<!-- For images -->
<img src="bitspeicher-logo.png" alt="bitspeicher">
<!-- Both -->
<a href="https://bitspeicher.blog/" title="To the home page of bitspeicher.blog">
    <img src="bitspeicher-logo.png" alt="bitspeicher">
</a>

markup extension by Schema.org 🗃️

Schema.org (often called Schema) is a semantic vocabulary of tags (or microdata) that you can add to your HTML to control how search engines read and display your page in SERPs.

Schema.org is the result of collaboration between Google, Bing, Yandex and Yahoo to help you provide the information your search engines need to understand your content and provide the best search results possible at the time. Adding schema markup to your HTML will improve the display of your page in SERPs by improving the rich snippets that appear under the page title.

You can read more on this topic here.


Rich Snippets 🃏

As humans, we can often see very well in what context certain data. As an example, here is the invitation to one of our frontend meetups:

<h3>Frontend Rhine-Neckar</h3>
<p>
    September 20, 2018 - 7:00pm<br>
    UEBERBIT GmbH<br>
    Rheinvorlandstraße 7<br>
    Mannheim<br>
    Registration via Meetup
</p> 

With the tags suggested via Schema.org, I can make my event more attractive to search engines!

<!-- declare as event itemType -->
<div itemscope itemtype="http://schema.org/Event">
    
    <span itemprop="name">Frontend Rhine-Neckar</span>.
    
    <meta itemprop="startDate" content="2022-09-20T19:00″>
    September 20, 2022 - 19:00
   
    <!-- declare as place itemType -->
    <div itemprop="location" 
         itemscope 
         itemtype="http://schema.org/Place">
        UEBERBIT Ltd.
        
        <!-- declare as PostalAddress ItemType -->
        <div itemprop="address" 
             itemscope 
             itemtype="http://schema.org/PostalAddress">
            
            <span itemprop="streetAddress">Rheinvorlandstraße 7</span>
            <span itemprop="addressLocality">Mannheim</span>
            
        </div>
    </div>
    
    <!-- declare as JoinAction ItemType -->
    <div itemprop="join" 
         itemscope 
         itemtype="http://schema.org/JoinAction">
        
        Signup via Meetup
    </div>
    
</div>

This results in snippets like these:

Bildschirmfoto-2018-10-30-um-15.42.17

With the introduction of Featured Snippets and Position 0, Google also generates smart extra snippets like this one:

Bildschirmfoto-2018-10-30-um-15.42.26


As always, we try to keep this article as up-to-date as possible. So if anything ever changes in the SEO world for frontend developers, we'll let you know via Twitter or Facebook!

Alternatively, you can subscribe to our RSS Feed to stay up to date.