Going back to the basics is a natural process for all developers. It is normal to skip steps while learning something, but you must be aware of its consequences: if you skip too many steps, your foundations will be undeveloped. Therefore, you won't have a solid background on how to do that thing.
How important is HTML for SEO?
Some may say it's hard not to know how to write a well-structured HTML, right? It is tough.
What are the headings?
Headings are tags mainly used to guide readers through your text. They make it explicit when a new section starts, ends, and develops through new topics. Also, it is important not only for users but for search engines. I mean, it is our main purpose SEO-wise, right?
During web scraping and crawling, search engines give considerably high weights to descriptive headings and well-structured content.
Text-to-HTML rate
The text-to-HTML rate is important for your website. It's a rate calculated by the search engine to determine how much content is available on your pages. If your page is rich in content, it will be considered a content-driven page, which means it is more worthy of scraping. A good text-to-HTML rate is between 25% and 70%. To maintain a good rate, it is important to remove unnecessary HTML or increase the text count.
Leveraging the available HTML tags
There are 100 HTML tags you can use to structure your website. The difference between a good and a bad SEO can be decided by the tags used in the website content. If you strategically leverage specific tags through your website's structure, you'll be able to give more context to the search engine. Therefore, your website will be better indexed than a website with a non-semantic HTML since the scraper knows more about your website because of the tags.
A practical example of how to leverage semantic tags:
- Non Semantic Example:
<img src="https://example.com/image.jpg" alt="A beautiful sunset over the ocean" width="500" height="300">
- Semantic Example:
<figure>
<img src="https://example.com/image.jpg" alt="A beautiful sunset over the ocean" width="500" height="300">
<figcaption>Fig. 1: A breathtaking view of the sun setting over calm ocean waters.</figcaption>
</figure>
Using <figure> and <figcaption> will give more context to the search engine. With this additional context, the search engine will be able to determine the subject of the present image, boosting the keywords of your website.
Aria label - attribute text to visual elements
A search engine isn't able to interpret icons or visual elements in your website. If you build a search bar with an input and a search button, the scraper will only identify your input - because of its tag and placeholder. But, the search icon would be completely ignored.
A practical example of the usage of aria labels
<button aria-label="Close" onclick="myDialog.close()">
<svg
aria-hidden="true"
focusable="false"
width="17"
height="17"
xmlns="https://www.w3.org/2000/svg">
<path
d="m.967 14.217 5.8-5.906-5.765-5.89L3.094.26l5.783 5.888L14.66.26l2.092 2.162-5.766 5.889 5.801 5.906-2.092 2.162-5.818-5.924-5.818 5.924-2.092-2.162Z"
fill="#000" />
</svg>
</button>
As you can see, this button has an SVG icon, but it also has an aria-label, which means that if your user is visually deficient, they can listen to "Close" when they're about to click on the close button. Without the aria label, the reader wouldn't be able to interpret the text of the icon, and the search engine wouldn't have the context of the icon, so it would be ignored in the scraping process.
Final consideration
In conclusion, one of the most important strategies to boost your SEO ratings is to write a more semantic SEO, which would be better interpreted by search engines and web scrapers. Every product needs to be well-indexed. If there are no users, there is no profit. If you don't have branding dominance, your product will be obfuscated by its competitors.
Photo by Souvik Banerjee on Unsplash
Top comments (2)
I missed the articles, very good to see you coming back to productions again :D
Thanks, dude. I appreciate you!