Your website is coded, everything's shiny and sparkling, now it's time to display your creation on the beloved first page of google.
What are the biggest beginner mistakes to avoid ?
Google loves links, but hates defective ones, you need to avoid :
These are links without text(anchor), or links that are not working, because their reference is pointing nothing existing.
<!-- no text(anchor) --> <a href="sheets/piano.html"></a> <!-- Broken ref --> <a href="https://IDONTEXIST.com">Visit website</a>
The anchor is the text of a link, it needs to be explicit, as much as it can be.
<!-- bad anchor, a "Discover best piano sheets" would be better --> <a href="sheets/piano.html">GO HERE</a>
Google hates duplicate content, even with the links.
<!-- "Piano sheets" / "Guitar sheets" / "Saxo sheets" would be nicer --> <a href="sheets/piano.html">Best sheets</a> <a href="sheets/guitar.html">Best sheets</a> <a href="sheets/saxophone.html">Best sheets</a>
Ok, to finish with the links, Google loves backlinks, especially backlinks from high autority domains.
It means that if some links from trusted known websites are pointing to your domain, it's all good for you, you will appear higher.🍾
So try to get noticed by known websites, so they create some good quality backlinks to you.
The meta description is a tag that you put on your head section.
It describes your website, and this is what appears below the name of your website in search results.
You need to write a 50–160 characters text, with as much keywords related to your website niche as possible.
Notice that after ~ 160 characters or so the text is truncated.
Don't try to fool google by adding a lot of keywords here without any sense, build good presentation sentence(s).
<meta name="description" content="Find all your favorite sheets from the best musics, available for piano, guitar, violin ...
You need one H1 per page, with some nice keywords inside.
After that you can use the different headings for the different sections, the lower the heading, the lower its importance.
Headings go from H1 to H6.
There is a nice selection of semantic tags in HTML, use them wisely when you are creating your content, instead of using "div" everywhere.
It helps the crawler robots of search engine understanding your website.
<nav></nav> <footer></footer> <ul></ul> <main></main> <header></header> <button></button> <form></form> <article></article> Etc ...
Google and other search engines are increasingly rating the accessibility of websites and applications.
What is usually wrong in term of accessiblity ?
Alt attribute not filled.
You need to describe the images you are displaying with the img tag in their alternative text attribute.
It helps people who are using screen reader.
Bad usage of links and button.
A button is here to perform an action, a link is here to take you somewhere.
Don't mix the two, or people with screen reader won't understand anything.
And try to make your navigation as clean, understantable and accessible as possible, it's a really important part of your website, especially in term of accessibility.
This one is really easy to check, yet there are so many websites with contrast problems.
The color of the text must contrasts with the color of the background.
You can check the contrast with websites like : https://colourcontrast.cc/
Don't forget that if you have a great sight and you are seeing eveything well, someone with poor eyesight could have some troubles.
All right that's enough for today, I hope you've learned or at least remembered some good rules for SEO.
You can find me on YouTube, talking about web development(warning, it's in French!🥖🥐🍷 ).
I plan to start an English channel too, I just need few weeks to work on my bloody accent.
YT : https://www.youtube.com/c/TheWebSchool
Take care, and see you next time. ✒️