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 of ranking factors, if not more, that Google uses to rank pages. at least hundreds It’s not a one-time anymore. thing 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 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 website helps a lot. the number #1 source of traffic JAMstack Let me cover some basics before we continue. What is JAMstack? Mathias Biilmann, Netlify co-founder. JAMstack: Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup. — 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 of the first page as they get 68% of all the clicks coming from that search result page. top 5 spots SEO today goes beyond simple page optimization and it can be broadly divided into two parts and . In this post, I’ll be focusing on the technical part through the . 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. technical SEO content SEO JAMstack lense 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 — ’s definition. Web performance refers to the speed in which web pages are downloaded and displayed on the user’s web browser Wikipedia 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 , a one-second improvement in page speed correlates to 27 percent of the increase in conversion rate. case study done by Akamai More 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. recent research from Google 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 — . 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 . For example, check website (JAMstack website built with Gatsby, Forestry and ZEIT Now) Lighthouse performance score: better web performance DOM ready and full-page load times Bejamas 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. In case you are starting from scratch with a new website or you are planning a redesign be mindful of . 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 for more info). If you decide to take this road start your planning with . Performance budgets. performance budgets Bejamas case study Performance Budget Calculator 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 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. Mobile-friendly design: mobile-first crawling 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 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. HTTPS: Google Having a clear URL and site structure, navigation, clean site design, and code influences how your website is perceived from users and point of view. There are a couple of general rules you should stick by: URL Structure, Site Structure, and Navigation: crawlers 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 , 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. orphaned pages 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 to simplify things with custom JS for example. JavaScript: Google Tag Manager One of the most significant savings in overall page size and page load speed comes from optimizing images. First, you can utilize or be one of the first to use native image introduced to Chrome this summer. Images: lazy loading lazy-loading tag Second, make use of 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). WebP 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. 👨💻, if you use as your , you can circumvent most of the problems that come with the practice of lazy loading with 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. | For JAMstackers Gatsby static site generator gatsby-image users can use solution to tackle it. users can apply for resizing images, lazy loading, and progressive loading. Finally, users can do something like this . Next.js this Hugo this shortcode Jekyll here 2. Indexing and crawlability All the performance efforts and awesomeness of your content will mean nothing if search engines can’t 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. properly index and crawl Robots.txt and XML sitemap In essence 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. robots.txt A 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. sitemap , Once you make a sitemap use to let the big G know about it. Google Search Console 👨💻, you can simply make them and add them to your repository. users can make use of plugins to create and automatically. users can easily generate a sitemap by adding the jekyll-sitemap gem to their _config.xml (follow instructions). As for robots.txt, just add a file to the root of your project. | For JAMstackers Gatsby robots.txt sitemap.xml Jekyll these ships with a file while for Hugo can generate a customized file in the same way as any other template. Finally, users can use one of these communities' shared . Hugo built-in sitemap template robots.txt Next.js 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 . 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. duplicated content 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 from the duplicate page to the original page. 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. 301 redirect URL redirection 👨💻 who run their site on (as most of us do), you can easily and rewrite rules in a file that you add to the root of the public folder. | For JAMstackers Netlify configure redirects _redirects users, for example, can set redirect like . In case you are running your website with you can set routes in now.json configuration file as described . Amazon S3 this ZEIT here Another way to deal with duplicated content is by using the attribute in your link tag. There are two ways you can use it: 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. <link href=”URL OF ORIGINAL PAGE” rel=”canonical” /> or is a self-referential rel=canonical link to the existing page. <link href=”PAGE URL” rel=”canonical” /> In both cases, the use of the canonical attribute ensures that the right page or the preferred version of the page is indexed. 👨💻 , for example, has a simple plugin named which sets the base URL used for canonical URLs for your website. If you are using 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}`} > | For JAMstackers Gatsby gatsby-plugin-canonical-urls Next JS supports permalinks, aliases, link canonicalization, and multiple options for handling relative vs absolute URLs as explained . One of the possible canonical URLs solutions can be found . Hugo here Jekyll here 4. Structured data Google and other search engines use structured data to understand the content of your page better and to allow your content to appear in . Schema.org 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 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 format to the page. schema.org JSON-LD 👨💻, you’ll be happy to know that most provide you with the tools to manage structured data, page by page, in a form of defining . Or you can add schema as a part of a template you are using. | For JAMstackers headless CMSs custom components 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. 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 page with high-speed scores would rank well. And chances are it would not convert the targeted audience well either. The ranking is a multifactor game and performance is just a piece in this puzzle. However, don’t obsess over performance metrics. ‘all text and images’ Why? 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.
