SEO, which stands for Search Engine Optimisation), doesn't seem to get old — it's just different every year. Google changes its Search Algorithm and Ranking System every once in a while, adding new ranking factors or modifying existing ones. And since 2018, the page speed is one of them.
However, there are more: content relevancy, mobile-friendliness, user experience, on-page optimisation... There are more than 200 of them in total. It's mind-blowing, isn't it?
However, you don't have to take them all into account — focus on the most important ones.
And if you are wondering how to do that and create a website with the highest chances to rank high, consider Gatsby.
Keep reading to check why!
What is SEO?
Search Engine Optimisation (SEO) is a set of practices aimed to make a particular website look better and better in the eyes of Google. In other words, SEO is about improving the quality and quantity of website's traffic coming through search engine results pages (SERPs).
Search engine result page, on the other hand, is a page that displays mainly (but not only) results returned by a search engine like Google as a response to query search such as "online shopping" or "front-end development agency".
Why does SEO matter?
SEO helps companies bring valuable, organic traffic to their websites which is the first step towards getting new clients and increasing revenue. The better SEO-optimised the site is, the higher it's ranked in SERPs. And the higher the ranking is, the bigger the traffic.
The main difference between organic traffic (brought by SEO) and paid traffic (brought by money) is that the first one is free, forever. However, great SEO has more benefits than just saving money:
It drives the quality traffic to your website — instead of reaching out to people whether they want to or not (interruption marketing), SEO focuses on making it easy for them to find you when they want to (permission marketing).
Organic results get more clicks than paid ads — it's hard to tell why that is, but it doesn't alter the statistics: over 70% of searches end in clicking an organic result on the first page.
SEO supports Public Relations efforts — one of the main elements of SEO is link building, which is about earning links from industry-respected publications and other relevant websites. On the other hand, featuring in such publications and being mentioned by influencers is a primary point of PR strategy. This presents an excellent opportunity to get in front of new customers through, for example, guest posting.
It helps you to overtake the competition — SEO is an essential part of most marketing strategies which means there is a huge chance that your competition is already fighting for better rankings. However, with well-prepared and well-executed SEO efforts, you can catch up with them or even surpass them.
Main SEO ranking factors
There is a legend circulating in the marketing world that there is a man who knows all SEO ranking factors used by Google. However, no one ever saw him.
Luckily, you don't have to know them all – only the main ones. But since giving specific SEO advice is not our goal here, we will just scratch the surface to provide you with an overview.
Accessibility
All your efforts to rank high will be for nothing if your website is not visible to search engine crawlers. These are robots that are crawling through the Internet to index websites. If the specific site is not indexed correctly, it won't be displayed in search results.
What you have to do is create robots.txt file and website's sitemap. It's a confirmation of your site's accessibility. However, you can go one step further by submitting your website to Google through Google Search Console.
Backlinks
This is one of the most crucial SEO ranking factors, if not the most crucial one. As a reminder, backlinks are links to one website inserted on another website. The more backlinks you earn, the better it is for your website's SEO.
However, it's more complicated than it looks like. Every single backlink and its effect on SEO is influenced by other factors like relevancy or domain authority.
Mobile-friendliness
Mobile-friendliness (or responsiveness) is a ranking factor for both mobile and desktop searches. If your website fully adapts to a visitor's device — whether it's a small-screen mobile phone or big-screen TV — it means that it's mobile-friendly (or responsive). And this is very much welcomed by Google.
You can check if your website is mobile-friendly with Google's official tool.
On-page optimisation
All efforts within the website that are intended to improve the website's position in search engine results are called on-page optimisation. Among them are: creating proper title and meta tags, using the right keywords, optimising images, writing original and valuable content.
Page speed (desktop and mobile)
Page speed has been a ranking factor for a decade now. And two years ago it started to affect not only desktop searches but also mobile searches. However, don't treat it like a challenge to beat competitors by trying to make your website load a few milliseconds faster. Instead, make it fast enough, so it won't affect the user experience negatively.
One more thing: according to Google's research, one-third of visitors will leave your website if page load time goes from one to three seconds. If it takes longer, it's even worse.
User experience
Would you come back to a place where you have had a terrible experience? Doubtful. The same thing goes for websites — the first impression makes all the difference. If the user experience is awful, it's likely you won't revisit it.
While it's not clear how exactly Google measures user's satisfaction from visiting a particular website, they gave some suggestions about what's essential from the UX perspective:
- Content that's useful and easy to read
- Design that's responsive and responds to users' needs
- Well-organised site architecture
Dynamic site vs static site: which one is better for SEO?
There is one more thing to consider: what kind of website should you choose to raise your chances of ranking high in search engine results pages. First of all, there are two main website types — dynamic site and static site.
What is a dynamic site?
Dynamic sites allow users to interact with the content posted on a website. That content is being generated in real-time, which means it can be different for different users, depending on their location, device, time zone, or even network.
A dynamic website can use client-side scripting (the browser executes code), server-side scripting (the server runs code) or a combination of both.
A good example of such websites are those built using a Content Management System (CMS) like WordPress or Drupal.
What is a static site?
Static websites, on the contrary, offer the same content for every visitor, regardless of their browser's language or other preferences. For every page, there is a specific HTML file on the server that contains the content of this page. Such a website is pre-rendered and is not meant to be regularly updated because it requires some HTML knowledge to edit source files.
A good example of such websites is simple business websites created using static site generators (SSG) like Gatsby.
Which one does Google prefer?
While both types serve different purposes and require different skills, let's take a look at dynamic sites and static sites from Google perspective.
Static sites are faster.
Page load speed is one of the leading SEO ranking factors, which also affects user experience in either a good or bad way. Static sites are faster than dynamic sites because they are pre-rendered. Pre-rendering means that your website is generated as a set of static files in advance, not in real-time.
Static sites are easier to index.
Static websites consist of HTML and CSS files which are extremely easy to read and index by Google crawlers. Another thing that helps with indexation is a simple sitemap which is recommended by all search engines, including Google.
Static sites are easier to optimise.
When you decide to choose a static site, you gain total control over SEO. You can customise any page of your website in any way you want. In a case of dynamic websites, you need to install a plugin or two to help you with SEO efforts.
Static sites are less expensive to host and maintain.
Since static sites consist of simple HTML files, they need much less space on the hosting server than dynamic sites. Also, such a website won't use much of the monthly transfer limit.
What is Gatsby?
If you are considering creating a static site, Gatsby may be your choice of tool to do so. It is a free and open-source framework created with React, helping developers to build blazingly fast sites and apps. Gatsby is also called static site generator (SSG).
Why is Gatsby good for SEO?
It's time for the most important part of this article. I haven't jumped straight to that from the beginning because I wanted to explain the context. So far, you found out:
- what is SEO
- what does it matter
- main SEO ranking factors
- which one is better for SEO: dynamic site or static site
It helped you to understand the whole picture better, right?
Now it's time to find out why Gatsby is good for SEO.
Accessibility
Web accessibility means that websites, tools and technologies should be designed to be accessible for everyone, especially for those with permanent or temporary disabilities. When it comes to Gatsby and its accessibility, WebAIM (Web Accessibility in Mind, non-profit organisation) recognised Gatsby as the most accessible web framework.
Gatsby uses different practices to make its websites as much accessible as possible:
- Accessible routing — the main feature of every website is navigation, and accessible routing takes care of that. Thanks to it, you can, for example, use a keyboard to navigate through the website. Also, Gatsby manages page announcements on page change.
- Building HTML pages by default — since it's using Node.js environment to compile pages, you don't have to worry about progressive page enhancement. Progressive enhancement means that the core page content is loaded before anything else from the server.
- Linting using a plugin — Gatsby uses an eslint-plugin-jsx-a11y package that reduces the time needed to find accessibility errors. This plugin, among other things, encourages you to add alternative text to all images.
Page metadata
Gatsby gives you full control over the website's content and structure, and consequently, over the SEO of this website. You can add metadata like page titles, meta descriptions and alt text, which helps search engines to understand the content on your website and when to display your site in search results.
To add metadata to your website, you can use react-helmet components. Remember to add Gatsby React Helmet plugin to support SSR (server-side rendering).
Performance and speed
Gatsby is all about performance and speed. It comes with built-in features like rendering to static files or progressive image loading which are responsible for making Gatsby website fast. According to 2018 Google's update, site speed became the new ranking factor, and faster websites will likely rank higher than the slower ones.
However, you should still create content that's valuable and relevant to visitors, because the slower but more relevant site may rank higher than the faster ones.
Structured data
Structured data is what Google looks for on the web to understand the website's content. This is also its source of general information about the web and the world.
The better Google understands the content, the more relevant search results are. In other words, if you use structured data on your website, it helps you to rank higher.
In Gatsby, you can add structured data snippets with react-helmet in the JSON-LD (JavaScript Object Notation for Linked Data) format, which is embedded either in the page head or page body.
User experience
All the points made above ensure great user experience to visitors. And it's not just about the site speed — with Gatsby you can create fully customised websites that are accessible to everyone, easy to find and navigate, and visually attractive.
Examples of Websites built with Gatsby
Many well-known companies decided to build their websites using Gatsby — Airbnb, Bitcoin.com, Braun, Spotify, to name a few. However, there is no limitation on who can use Gatsby because startups and small companies also choose it.
Check below examples to see how such websites look and perform:
- Airbnb Engineering & Data Science
- Bitcoin.com
- Braun
- Frame.io
- Hopper
- Spotify.design
- Frontend Day conference created by Pagepro
- JS Minds created by Pagepro
Many well-known companies decided to build their websites with Gatsby — like Braun, Spotify and AirBnb, just to name a few.
Alternatives to Gatsby
We highly recommend Gatsby to build static sites, but we also would like to help you make a fully informed decision. Because of that, we wrote about Gatsby alternatives — you can read about them here.
Latest comments (0)