SEO (Search Engine Optimization)

You must have heard about SEO, but what is it? What are your main concepts? Keep reading that I'll share what I learned in the last days.

Firstly, why is SEO important? Well... Your digital business needs to be found and accessed by your potential customers. SEO is an interesting topic, an essential part of web designing, fundamental strategy to reach top positions in search engines and should be given its due importance because:

increase the volume of organic traffic and ensure more visibility for your web pages since The top 3 organic results (#1, #2, #3) capture 61% of clicks;
gain more visits;
increase credibility;
social promotion;
lead to better user experience;
important role in improving the business.

SERP (Search Engine Results Page)

It's the page that brings the information and links related to a search. Google improves its algorithm in order to bring a better user experience, that's why robots change so much. Knowing what google robots are looking for on your site helps you to leave exactly what they need to index your content as relevant.

Be careful, giving only what the bots want can be a shot in the foot, so always focus on having quality content. Another factor is that your page needs to have the right semantics and keywords. Ranking your website will be a consequence.

Title

The search engines understand that what is in the title of a page are words that are very relevant to the subject that is being treated there and give greater weight to links where the used words are between tags <title>. Its function is to take to the reader to the content. So, put the main words of your website’s content in the title, but don’t be wordy.

<title>Api reference experimental - Relay</title>

<title>Suspense for data-fetching - React</title>

Meta tags

It helps the search engine to know better about your content. The <meta> tags always go inside the <head> element.
Google does not use the keywords meta tag in web ranking. They do, however, impact the click-through rate from the search engine, which can impact positively on a particular’s page relevancy as judged by the end-user.

Meta description

It is a basic summary of the HTML document. So, it is necessary to describe the content clearly and objectively inserting the keywords.
Define keywords for search engines:

<meta name="keywords" content="React, Relay, GraphQL, JavaScript">

Define a description of your web page:

<meta name="description" content="Tutorials about React, Relay and GraphQL">

Meta Viewport

The viewport is the user's visible area of a web page. It varies with the device and will be smaller on a mobile phone than on a computer screen. Then, it gives the browser instructions on how to control the page's dimensions and scaling.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

The width=device-width part sets the width of the page which will vary depending on the device.

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

Meta Robots

It tells the search engine how to crawl and index your site.

<meta name="robots" content="index, follow" />

Params meaning

index - no problems index the page.
follow - follow any links on the page as part of crawling.
noindex - it stops the page from being indexed.
nofollow - don't follow any links from this page as part of crawling.

URLs

Incomprehensible or very long URLs are bad. Remember that google highly values the user experience. URLs with words relevant to the content and structure of the site help visitors navigate your site. So, always prefer short URLs, related to the title, including keywords and avoid numbers or repeated words. Separate the words with - because the google robots ignore spaces.

Avoid:

https://reactnavigation.org/blog/2020/02/06/react navigation 5.0.html

Nice:

https://relay.dev/docs/en/experimental/api-reference

Responsiveness

Only optimized for a desktop it's not enough. The adaptability of content and websites for different devices is a positive point considering that the reading experience must be practical and pleasant. That consequently leads to more interactive traffic.

Page Speed

Besides The pages need to be fast. The longer your page takes to load the more impatient the user will get and will leave your website soon. Length of stay on the site is another ranking factor. If the user stays on your site for a long time it can be interpreted that its content is interesting.

Images friendly

Images enrich your content, however, robots google cannot process them. The only way for search engines to discern your content is through textual descriptions. So, it is important to pay attention to the src and alt attributes. Use short, descriptive alternative file names and text.

Src

Specifies the URL of an image. Try to use keywords but don't overdo it. Less is sometimes more.

Alt

Specifies an alternate text for an image. Very useful:

accessibility: screen readers read and recite alt text to the user;
description for broken images;
image description for google searches.

Avoid:

<img src="image1.jpg">
<img src="image2.jpg">
<img src="picture3.jpg">
<img src="generic-name.jpg">
<img 
  src="some-very-very-long-sentence.jpg" 
  alt="very long alternative text that would be considered spam"
>

Nice:

<img src="descritive-name.jpg" alt="short and objective description">
<img src="lemons.jpg" alt="two whole lemons and one halved">
<img 
  src="alt-importance.jpg" 
  alt="the illustration above shows the use of a good alternative text"
>

HTTPS

Make your site secure. The HTTPS guarantees security, authenticity, and trust for those searching online. Having it is another attribute to increasing the ranking of your website.

Conclusion

There is more do it, what was explored above are just a few points.
However, it is very likely that your website will appear at the top of the SERP list instead of page 2 of google.