Starting up with SEO
I was asked to analyze the SEO rank of a project I was working on in Wolox, and, after an analysis made by the QA department, the outcome resulted in a very low figure. So, we started doing some research about search engine optimizations which led me to this post.
What is SEO?
SEO is a technical process through which different changes in your website structure and content are implemented in order to improve its visibility in organic results from search engines.
How to help Google understand your website
What we commonly want when we design and develop a website or an app is that users find them intuitive and easily comprehensible. But, what about Google? Why do we want a website to be Google-crawler friendly?
Well, the answer is easy. A clean code generates a better layout and also, if we want to appear among the first results of a search in Google, for instance, we will need to help the crawlers’ indexation.
Users usually stay at the 2 o 3 first results, ignoring the rest. Here is a graph that shows how people perceive information doing a search:
This is known as F pattern.
What does indexation mean?
When you deploy a website, you can request Google to do a full or partial analysis of the website. That means, getting all the anchors of your website and also getting all the h1 and h2 of it. The latter will also be some of the main keywords of your page, which means the words you will be able to type in the search input and get some results.
Header information importance
We discovered some minimum requirements that are vital to have before deploying a seo-friendly-website:
- Title: the value of this tag is the one that appears in your explorer’s tab. That will be like the title of the chapter of the book you are reading. It’s good practice to have a different one for each route you have on your website. The recommended length is between 50 to 60 characters.
<head>
<title>This is the title of a website</title>
</head>- Description: this tag is like a summary of the website that will display in the search just below the title. The recommended length is between 160 and 300 characters.
<meta name="description" content="Cool description of the website">- Favicon: this icon is the one that appears next to the title in the tab of your browser. The values of this image can be, for example, .ico and png. SVGs files won’t work.
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>- Meta content type: This tag is necessary to declare your character set for the page and should be present on every page.
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">Keep your assets clean and light
Most of today’s websites are composed of fonts, images, videos, etc. We need to be careful about it because assets weight affect directly to the loading speed of your website. Light assets provide a better SEO rank because the 40% of users will leave our site if it after 2 seconds
Before attaching an image to the website you must choose the best asset extension for that. Usually, the 2 best choices that came up are SVG and PNG. So, when should I use them? SVGs are commonly used for icons (things that are not photograph) and PNG are used for everything else. The assets size depends also on the resolution you are using, you should not export an image with a greater size than you plan on using unless you have a retina configuration.
- Image compression: You may probably need to reduce the images weight to have a better SEO. After doing some research I came across these two tools: TinyPNG and SVGOMG. But you can also use a webpack loader to minify your assets as well in your build.
- Alts: this attributes the crawler uses for understanding the context of the text surrounding the image. Apart from that helps to validate, if there’s a missing image there.
<img src="./a_cute_cat_image.jpg" alt="cute cat">
Last but not least, fonts are usually the blocking asset of your website. If you are using Google fonts API, to prevent this, Google recommends using a Webfont Loader that helps you to remove that blocking request most websites have.
Main configuration files
- Sitemap.xml: is a file that specifies all the routes of your site and helps the crawler to index them. For example, if that route is inaccessible by clicking links, or the links are visible in a specific condition. It is advisable to have this file next to the root HTML of the project.
- Robots.txt: helps to make an indexing firewall to prevent some things from being indexed like images and also specifies the rules of some crawlers when generating a map of your website assets and rules. Same as before, this file must be added to the root folder where the index.html takes place.
There are many automatic generators of this two files on the internet.
Semantic is important
Another thing that Google mind is the HTML semantic, this means, you are using the appropriate tags for every use and you are not breaking any HTML semantic rule like:
<a>
<button></button>
</a>Among others. So, this tool helps us when validating that our site accomplishes all these standards.
The six heading elements, H1 through H6, are really important too since they denote section headings. Your website should have only one H1 tag per page or one h1 per section. Your h1 tag should help your reader understand what the page is about and should contain your most important keywords for that page. Which will also match the page title keywords and META keywords. Under no circumstance, should there be pages without an h1.
This tool helps us when validating that our site accomplishes all these standards.
Conclusion
SEO is something we need to pay attention to if we want users to find our website on the internet. Our keywords are crucial and we must define our site content around them. It is important to think carefully about our pages’ keywords because they are directly related to what our users want to find.
Some helful tools
- This list of tools is what Google provides to check which fixes are implemented and which ones we can do.
- Google insight is a tool that helps us to measure the average loading speed of the website. Remember, that loading velocity is one of the core aspects of SEO.
For further reading, google provides this post talking about SEO.
