So, let's start with the basics!
SEO - Search engine optimization
What is SEO?
Basically, it's a process designed to crawl websites and find information. So your website will be in different positions on search engines depending on your SEO.
For example, you search on Google: 'JavaScript for beginners', and the first results will have the better SEO.
And how does it work?
Search engines use bots to go on websites and search for relevant information. So, these bots get all this information and put it in something called 'index'. After this, algorithms analyze these pages in the index and organize them to show the user in a certain order depending on what the user had searched.
Now, where does HTML entered in this?
When we talk about HTML there is more behind it than what we see. Did you know that your HTML tags are important for these results?
Yes, it's true! So let's talk about some of them (these are the most important ones for me, other tags could work better for you).
Title tag
<title>This tag is important for our search results!</title>
Should be kept small, inside the head tag, and have important keywords.
Meta tags
Meta tag description is the most important one for me and does exactly what the name says. When we search on any search engine we have a small description below the title. That's our meta tag description working.
<meta name="description" content="insert your description here" />
When sharing articles/posts on social media websites there are other meta tags that were created from Facebook, they are called og tags.
<meta property="og:title" content="Article Title" />
<meta property="og:type" content="What type of content are you sharing?" />
<meta property="og:description" content="Describes your article content here"/>
<meta property="og:image" content="insert image url here"
Then we have heading tags!
From h1 to h6, these tags separate our website into different parts.
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
Each of these tags represents a new section for the browser. So when google is looking for some content it can be found in the heading.
Alt Attribute
Again, a description! But in this case, is a description of our images.
<img src='some image' alt='what is this image about?' />
Schema Markup
The Schema Markup works to understand the type of content that is displayed on a page. This one is a bit more complex because the are many possibilities! There are two ways to create the schema, with tags and with JSON. The second option is the most common one and you can use a Schema Markup Generator.
Generator example: technicalseo.com/tools/schema-markup-genera..
Not a lot right?
✍️ Note, that we should always try to use semantic tags in our HTML. If we keep our HTML clean and with the correct tag, the better our SEO will be!
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
And that's it!
Thank you for your time! And if you have suggestions feel free to leave them below.
Bye ✨