Whether you are running a JAMstack website or not this is a comprehensive overview of everything you need to know to be successful at SEO.

Bombastic title, right? With a purpose.

Full transparency here, one of my goals with this post is to rank high for a keyword JAMstack SEO (which has a low average monthly search volume) and SEO guide (which has a sufficient search volume but it’s an incredibly difficult keyword to rank for with this domain). I’ll explain that a bit later.

But more importantly, I’m hoping to shed some light on SEO so JAMstackers 👨‍💻 can understand the often-overlooked importance of it and the best practices they can utilize for them and their clients.

See what I did there? I’ve added my main keywords to the first paragraph, within the first 100 words. Furthermore, if you look at the page source code you’ll see TITLE length is between 55-70 characters (including spaces) and meta DESCRIPTION length between 120 and 160 characters with nice descriptive CTA.

These tips above and throughout this post are not the only things that make SEO what it is nowadays.

Though still important, SEO has grown out of simple keyword placement, and TITLE and META description tag optimization. There are at least hundreds of ranking factors, if not more, that Google uses to rank pages. However, we do not know the exact importance/value they have in the ranking algorithm.

And that’s not all.

Fierce competition, educated searchers, frequent algorithm updates, and a crazy amount of new features in search results have made SEO more complex than ever before. Not to mention high expectations from the clients.

Nowadays, if you want to do 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, and competition into consideration too.

It’s not a one-time thing anymore. To be honest, I love it even more for it.

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. Earning a featured snippet doesn’t guarantee decent traffic either, as shown in this Ahrefs study.

Even though Google is referring to 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.

See what I did here? I’ve made a DOWNLOADABLE pdf with complete guide + EXAMPLE of content SEO follow I used for this guide and links to TOOLS and RESOURCES for further reading. You can either read the rest then check the example or jump to the .pdf file right now. DOWNLOAD JAMSTACK SEO GUIDE .PDF 📄 HERE

What is SEO (search engine optimization)?

See what I did there? H2 tags for subtitles with a slightly different keyword in it (you’ll see this often throughout the post) because who knows, maybe the big G picks it up and show it in People Also Ask (Related Questions) box.

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.

Google Search is the undeniable leader of the global search engine market. Most guides refer to tips/tricks/tactics that can help you rank better in Google. It is the same with this one.

As I said earlier, SEO today goes beyond simple page optimization but it can be broadly divided into two parts: ⚙️ technical SEO and 📄 content SEO.

Let’s dive into the best practices and see where the JAMstack fits.

Sign up for our JAMstack newsletter! Get exclusive web development case studies in your mailbox! Submit

Technical SEO

See what I did there? Don’t be lazy and check out the source code for this page. You’ll see our HTML code for the above image similar to: < img src = " technical-seo.jpg " alt = " Technical SEO is what helps your content play a central role in SEO. " /> Keywords in the image name and alt tag. The goal here is to provide useful, information‐rich content with appropriately used keywords and in the context of the content of the page/section. And have your image appear in Google image search for your targeted keyword.

A huge subject on its own, 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.

Basically, with technical SEO you are tackling:

performance

indexing and crawlability.

Performance

See what I did there? H3 for this subtitle. Google and other search engines use H tags to understand the on-page structure of the text. With this topic being a part of a bigger one, I needed a different H tag to explain that to the crawlers.

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 pre-built 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 Lighthouse performance score:

97 Performance 88 Accessibility 92 Best Practices 92 SEO First Contentful Paint 1.7 s

First Meaningful Paint 1.7 s

Speed Index 2.0 s

First CPU Idle 2.9 s

Time to Interactive 2.9 s

Max Potential First Input Delay 360 ms

Or take a look at one of our case studies showcasing improvements we’ve made for our clients with JAMstack.

Not bad, right?

What else can you do for your JAMstack 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 (we’ll talk more about it in Bejamas case study so stay put). If you decide to go 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 is shown perfectly on multiple screens from mobile over tablets to laptops and desktops.

HTTPS: Users’ privacy and security comes 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.

Don’t obsess over performance metrics but be mindful of them. 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 multi-factor game and performance is just one piece in this puzzle.

Indexing and crawlability

All the performance efforts and awesomeness of your content would 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 Google 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 were the pages last updated, how often they changed, are there any alternate language versions of the pages, 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 community shared modules/solutions.

Duplicated content, redirects, and canonical attributes

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 how 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 do), you can easily configure redirects and rewrite rules in a _redirects file which 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 Vercel 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:

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.

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 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.

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.

Crawl budget

If you are running a large website with tons of pages prioritizing what to crawl, when to crawl it, and how many resources you can allocate to crawling, it becomes hugely important and it is managed with crawl budget. Not managing it properly can lead to important pages not being crawled and indexed.

Unless you are running a website with a huge number of pages, I’d suggest you leave your crawl budget on auto-pilot.

Technical SEO in a nutshell

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.

See what I did here? I’ve made a DOWNLOADABLE pdf with complete guide + EXAMPLE of content SEO follow I used for this guide and links to TOOLS and RESOURCES for further reading. You can either read the rest then check the example or jump to the .pdf file right now. DOWNLOAD JAMSTACK SEO GUIDE .PDF 📄 HERE

JAMstack may be a new way of building websites but it offers an amazing list of advantages over traditional stacks on top of performance and SEO benefits. Security and scalability being among the top ones.

Is this the end of our JAMstack SEO guide? Not by a long shot. This is just the first part. In part two I’ll be talking about content and on-page and off-page optimization + I’ll share a .pdf of this complete guide with BONUS MATERIAL ie content SEO flow case-studies and links to amazing tools and resources to complement the whole guide.