How JAMstack Impacts Your SEO

Nowadays, if you want to do search engine optimization (SEO) properly you have to think beyond the desired keyword, title, and other tags. You also have to take branding, audience behavior, search intent, user experience, analytics, website performance and competition into consideration as well. There are at least hundreds of ranking factors, if not more, that Google uses to rank pages. 

It’s not a one-time thing anymore.

Even the traffic gains from SEO have changed. For example, for keywords with featured snippets showing in results, earning #1 spot in organic search will bring you less traffic and lower click-through rate than a few years back for the same spot. Whatmore earning a featured snippet doesn’t guarantee decent traffic either, as shown in Ahrefs study.

Even though Google is referring less outgoing traffic to websites than before, it is still the number #1 source of traffic for most websites. With that being the case, digging deeper into SEO might be more important for developers and marketers than ever before. And, believe it or not, having a JAMstack website helps a lot.

Let me cover some basics before we continue.

What is JAMstack?

JAMstack: Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup. — Mathias Biilmann, Netlify co-founder.

It is a modern web development architecture that gives devs an opportunity to rely on the advantages of a static website, which include better web performance and security benefits, while still retaining the dynamic attributes of a database-oriented CMS without the database.

According to Wikipedia, search engine optimization (SEO) is the process of increasing the quality and quantity of website traffic, increasing visibility of a website or a web page to users of a web search engine.

Speaking in layman’s terms, the whole purpose of SEO is to help your content rank better in search engines for desired/targeted keywords and get under the spotlight of your potential audience. In practice, you are trying to get your content in the top 5 spots of the first page as they get 68% of all the clicks coming from that search result page.

SEO today goes beyond simple page optimization and it can be broadly divided into two parts technical SEO and content SEO. In this post, I’ll be focusing on the technical part through the JAMstack lense. Technical SEO is what helps your content play a central role in SEO. It focuses on helping your website get better visibility and creates a better web experience for your users and search engines.

Now that we’ve got the basics covered, let’s dive into the best practices and see where the JAMstack fits in your search engine optimization efforts.

1. Performance

Web performance refers to the speed in which web pages are downloaded and displayed on the user’s web browser — Wikipedia’s definition.

Even if you are not into SEO or web development you are probably aware that people and Google are obsessed with speed and web performance.

Ever since the worldwide mobile internet use surpassed desktop in 2016, speed has become an increasingly important ranking factor. With Google now moving to mobile-first indexing, the speed of your site on mobile will not only affect your SEO and organic ranking but it will affect your ad quality score as well. Basically, you might end up paying more for your Google Ads.

For example, page loading time is a more important factor in a user’s mobile experience than what the website looks like. According to a case study done by Akamai, a one-second improvement in page speed correlates to 27 percent of the increase in conversion rate.

More recent research from Google shows how the probability of bounce increases with every second along with a global perspective on mobile speed, webpage size, and the number of content pieces per page across industry sectors.

All of this goes to show how much page speed is valued by users. And Google values users' behavior.

Here we come to one of the biggest advantages that JAMstack websites have over others — better web performance. In case you didn’t know, with JAMstack, the HTML files are prebuilt and served over the CDN instead of being rendered on the server. This, in turn, provides faster DOM ready and full-page load times. For example, check Bejamas website (JAMstack website built with Gatsby, Forestry and ZEIT Now) Lighthouse performance score:

Not bad, right?

What else can you do for your website to influence performance?

There are a couple of additional things you should keep an eye on and making sure they’re done right to help your website perform better.

Performance budgets. In case you are starting from scratch with a new website or you are planning a redesign be mindful of performance budgets. The purpose and the overall idea behind it is to set goals of your web build early on so that you can better balance performance issues without harming functionality or your user experience. It helped us immensely during our website re-build (you can check out Bejamas case study for more info). If you decide to take this road start your planning with Performance Budget Calculator.

Mobile-friendly design: Having a responsive design, adjustable to the screen, is not a fancy option you can have on your website. It is a necessity from both search engines and users' perspectives. With Google introducing mobile-first crawling for all new websites, you need to make sure that your website shows perfectly on multiple screens from mobile over tablets to laptops and desktops.

HTTPS: Users' privacy and security come first. HTTPS helps prevent anyone from tampering with the communication between your website and your user’s browser. As a part of their promotion of a more safe and secure web, in 2014 Google announced that it will use HTTPS as a ranking signal in search results. What that means is that if you have two websites that are the same in every possible way except one is on HTTP while the other is on HTTPS, Google will give a positive bump in search results to the one with HTTPS.

URL Structure, Site Structure, and Navigation: Having a clear URL and site structure, navigation, clean site design, and code influences how your website is perceived from users and crawlers point of view. There are a couple of general rules you should stick by:

Google suggests that the fewer clicks it takes to get to a page from your homepage, the better it is for your website.Planning your structure together with the keyword research can help you not only increase the authority of your website but also spread it efficiently and evenly over your pages, raising your chances to appear in search results for all of the desired keywords.Clear website menu with links to your categories, keywords and main pages is a must. Avoid having so-called orphaned pages, that aren’t linked from any other page of your website.Use shorter, keyword-oriented URLs with hyphens to break up words for readability. Keep in mind that the URL should describe the content of the page as clearly as possible.

JavaScript: Reduce the amount of JS on your website. Always keep JavaScript code below your main content as this won’t degrade the user experience. You can use Google Tag Manager to simplify things with custom JS for example.

Images: One of the most significant savings in overall page size and page load speed comes from optimizing images. First, you can utilize lazy loading or be one of the first to use native image lazy-loading tag introduced to Chrome this summer.

Second, make use of WebP image format (like we did) that is designed and supported by Google, to create images that are better optimized and reduced in file size than JPGs (or PNGs).

That, in turn, makes for a faster website. Keep in mind there are web design and UX elements behind image optimization as well. It is not just a question of simple image resizing.

| For JAMstackers 👨‍💻, if you use Gatsby as your static site generator, you can circumvent most of the problems that come with the practice of lazy loading with gatsby-image which is a React component that combines Gatsby’s native image processing capabilities with advanced image loading techniques to easily and completely optimize image loading for your sites.

Next.js users can use this solution to tackle it. Hugo users can apply this shortcode for resizing images, lazy loading, and progressive loading. Finally, Jekyll users can do something like this here.

2. Indexing and crawlability

All the performance efforts and awesomeness of your content will mean nothing if search engines can’t properly index and crawl your website. You see, allowing search bots to crawl your website is one thing. Making sure bots can crawl and discover all of the important pages while staying away from those you don’t want them to see is something else.

Robots.txt and XML sitemap

In essence robots.txt file provides search bots with information about the files and/or directories you want or don’t want them to crawl. It can help you keep entire sections of a website private (for example, every Wordpress website has robots.txt file that prevents bots from crawling admin directory). It can also be used to prevent your images and PDFs from being indexed, or your internal search results pages from showing up in search engine results.

A sitemap, on the other hand, is a file in XML format which provides crawlers with valuable information about the website structure and website pages. It tells the crawler which files are important to your website when the page was last updated, how often it was changed, are there any alternate language versions of the page, etc.

Once you make a sitemap use Google Search Console to let the big G know about it.

| For JAMstackers 👨‍💻, you can simply make them and add them to your repository. Gatsby users can make use of plugins to create robots.txt and sitemap.xml automatically. Jekyll users can easily generate a sitemap by adding the jekyll-sitemap gem to their _config.xml (follow these instructions). As for robots.txt, just add a file to the root of your project.

Hugo ships with a built-in sitemap template file while for robots.txt Hugo can generate a customized file in the same way as any other template. Finally, Next.js users can use one of these communities' shared modules/solutions.

3. Duplicated content, redirects, and canonization

The practice of having the same or slightly different content on a couple of pages or websites can be considered as duplicated content. There is no one-size-fits-all to the question of how similar content needs to be in order to be marked as a duplicate. The answer varies and depends on Google and other search engines interpret it.

In e-commerce websites, for example, you are bound to have the same content on multiple item pages. However, if you plan on the deliberate use of the same content over multiple pages and/or domains, you are most likely damaging those pages/websites rather than helping them.

Why? Well, you are making it hard for search engines to decide which page is more relevant for a search query and you might end up getting a boost for the least expected page.

If duplicated content appears on one or a couple of internal pages, the best way to deal with it is to set up a 301 redirect from the duplicate page to the original page. URL redirection is a tool that helps you inform search engines of the changes you make to your website structure as well. For example, if you decide to change the URL structure of your page but would like to keep all the goodies backlinks distribute, with 301 redirect you are proclaiming a new URL as the successor of the previous one.

| For JAMstackers 👨‍💻 who run their site on Netlify (as most of us do), you can easily configure redirects and rewrite rules in a _redirects file that you add to the root of the public folder.

Amazon S3 users, for example, can set redirect like this. In case you are running your website with ZEIT you can set routes in now.json configuration file as described here.

Another way to deal with duplicated content is by using the rel=canonical attribute in your link tag. There are two ways you can use it:

<link href=”URL OF ORIGINAL PAGE” rel=”canonical” /> with this one you are pointing search engines to the original “canonical” version of the page. The one crawler is visiting at the moment should be treated as a copy of a specified URL.

or <link href=”PAGE URL” rel=”canonical” /> is a self-referential rel=canonical link to the existing page.

In both cases, the use of the canonical attribute ensures that the right page or the preferred version of the page is indexed.

| For JAMstackers 👨‍💻 Gatsby, for example, has a simple plugin named gatsby-plugin-canonical-urls which sets the base URL used for canonical URLs for your website. If you are using Next JS make the following changes to your post.js ie you need to add next/head and add a canonical tag like this: <link rel=”canonical” href={`${YOUR_DOMAIN}/blog/${TITLE}`} >

Hugo supports permalinks, aliases, link canonicalization, and multiple options for handling relative vs absolute URLs as explained here. One of the possible Jekyll canonical URLs solutions can be found here.

4. Structured data

Google and other search engines use Schema.org structured data to understand the content of your page better and to allow your content to appear in rich results.

Correct implementation of structured data might not influence your ranking directly, but it’ll give you a fighting chance for appearance in around 30 different types of rich results that are powered by schema markup.

Making appropriate structure data is pretty straightforward. Check out schema.org for schemas suitable for your content. Use Google’s Structured Data Markup Helper that will guide you through the coding process and add the code in JSON-LD format to the page.

| For JAMstackers 👨‍💻, you’ll be happy to know that most headless CMSs provide you with the tools to manage structured data, page by page, in a form of defining custom components. Or you can add schema as a part of a template you are using.

Instead of conclusion

Search engine optimization is still hugely important for any business. In this day and age technical aspect of it plays an equally important role as does the content. And in a culture that values speed first having a reliable architecture backing your website performance has become a necessity.

However, don’t obsess over performance metrics. For example, if search results for your niche/topic/keyword is packed with pages with videos and/or fancy animations, you can bet speed would be an issue for most (I’m talking about mid-range numbers) but that does not mean your ‘all text and images’ page with high-speed scores would rank well. And chances are it would not convert the targeted audience well either. Why? The ranking is a multifactor game and performance is just a piece in this puzzle.

This post has originally writings published as JAMstack SEO Guide here used to explain the benefits of JAMstack web dev architecture for business SEO efforts.