So you created a website and you're wondering why you don't have that many visitors? You tried to promote your page using Facebook or Instagram, and even you paid a great amount of money to reach a certain number of visitors? Let me ask you two other questions:
Did you know that organic ranking generates more traffic than paid search? And did you know that there are some free ways to get more visitors? Well, this is precisely what I am going to talk about in this post. If you're interested keep reading, hopefully, you'll find some good tips you didn't have knowledge of. Without further ado, let's start!
Introducing HTML tags for SEO
To be on the same page, what are HTML tags? (You might want to check my previous post here) HTML tags are snippets of HTML coding that provide the directions for the visual content that we see on the Web, they also tell engines how to "read" your content. In fact, they have a great influence on ranking pages. They can provide a better navigation (more traffic), help query matching, guide search engines on where to find relevant informations. In addition, they let you personalize how social media show your articles. In the end, it’s HTML tags for SEO that determine how likely you are going to have a decent rank.
Since I want this post to be beginner friendly, I choosed the mostly used ones, so you can include them in your pages:
Header tags
These are the tags that you can include in your header element.
1. Title tag
The title tag basically describes what your content is about.
<title>My fancy title</title>
The first thing that you see in search engine result pages is indeed the title tag, if your title doesn't pick the interest of users, they are less likely to click on the link. Besides, the title tag is displayed on your browser tab, so if you have many tabs open, the title makes it easier to retrieve the tab the user wants. Finaly, the title is also shown when someone shares your link in social media.
Some advice on the title tag :
- Do not stuff your title with keywords because it might be changed by Google to a title that seems more relevant to the content. So make sure that the title faithfully describes the content.
- Keep the length under 70 characters, if your title is long, keep in mind how much space the characters occupy so that it won't be cut (you can use & instead of and, "/" instead of or, etc.)
- Your keywords should be at the beginning of the title so that they are easily spotted.
- Do not repeat the same titles accross your website, Google may penalize your website thinking it has duplicate content.
- If you are a known brand, you can use the brand name at the end of your title, it will add more value to your title while focusing on the title itself, unless it's a home / about / contact us page.
2. Meta description tag
Having a catchy description can help to push users to click on your results in the search engine result pages (SERPs). In HTML it looks like this:
<meta name="description" content="Some catchy description">
And here is how the description is shown in the SERP:
Note that sometimes, Google might quote a copy of your page if by doing so it better suits the query rather than your description. Although this tag is not a ranking factor, I'm sure that most of you instinctively look at the description before clicking, and they also appear across social media when users share your URL!
Some advice on the meta description tag :
- What I can advise you is that you should write a description that matches best the content of your page while avoiding duplicate descriptions.
- Also, avoid alphanumeric characters, when you use quotation marks, for example, Google will ignore the sentence in between, so it is safer to not use any alphanumeric characters at all.
- Once again, keep the length in mind, since only the first 150-160 characters will be kept, and the rest is cut; and make sure to include what's most relevant at the beginning.
3. Open graph tags
Open graph tags are part of Facebook open graph protocol, you can find them in the head section of a web page, and the reason that they were created is that they enable you to control how information about your page is represented in social media, meaning that they influence the performance of your links in social media. All of major platforms recognize them and are widely used (Google, LinkedIn, Twitter, etc.)
4. Twitter cards
Twitter cards are very similar to open graph tags; in fact, open graph tags are used in Twitter if no Twitter card is present. They are exclusively used by Twitter.
5. Robot tags
Robot tags are snippets of code that tell search engines what pages you want to index, and which ones you don't. So that individual pages can be ignored. It might help you to avoid some problems if you think that some pages should not be indexed but you still want to keep them. If this tag is not included, search engines would index all of your pages by default. Here is how it looks in HTML:
<meta name="robots" content="index, follow">
You can specify the following parameters in your robot tags:
- noindex: prevents from indexing a page.
- nofollow: prevents the search engine from following the globality of the links on a page.
- noarchive: prevents a cached copy of a page to appear in the search result.
- nosnippet: prevents the description of a page from appearing in the search result, as well as caching the page.
- none: used for "noindex, nofollow".
6. Canonical tags for prioritization
If you have pages with identical content, you can choose which one should have more priority using this tag:
<link href="https://www.facebook.com/HildweigDev" rel="canonical">
This can be an amazing trick to counter the problem we talked about above for duplicate content!
7. Responsive website
A responsive website is a website that is shown in a friendly way for desktop and mobile screens. Google prioritizes websites that are responsive over unresponsive ones. But how does it know that it is responsive ? Simply by looking at this snippet:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Those were the tags that you can include inside your head element. Now let me show you some useful tags that you include inside the body element!
Body Tags
These are the tags that you can include in your body element
1. Header tags for the win!
How many of you scan the page content by scrolling through the titles before reading the actual content? That's one use. In terms of SEO, using headers means that you're telling the search engines more efficiently what exactly your content is about. Google also uses headers to create some list-like snippets when looking for a particular topic:
Some advice about the headers :
- It's a good practice to have one h1 header per page, you can use h2 for lower value titles, then h3 if necessary, and so on. Use the headers smartly to make the content of each section clear.
- It's also a good practice to include your keywords or their synonyms in your headers, but try to not stuff them okay?
2. Alt attribute on images
Alt attributes are part of the image tag, not do only they provide an alternative text for the image if it is not shown correctly, but it is also useful for search engines so that they know what that image represents.
<img src="url" alt="A clear description">
Some advice on the alt tag:
- It is unnecessary to optimize each image description, focus only on those that add value to your content, some useful information.
- Again, you can benefit from using them if you include keywords (without overuse).
- Make the description clear and concise.
3. Good usage of links
A good practice is to link your page to other pages that are inside your website to enhance the website traffic. This is called internal linking, external linking on the other hand are links that point to a page of another website. Links also help search engines to find and index the pages of your website. This is quote from Google:
Some pages are known because Google has already crawled them before. Other pages are discovered when Google follows a link from a known page to a new page.
Another thing is that, if you want to use external links and make search engines ignore the connection, or when you link to a website with a poor domain authority, use the "nofollow" attribute:
<a href="https://www.facebook.com/HildweigDev" rel="nofollow">Maybe you want to follow my page?</a>
Conclusion
That's it for today. Congratulations for reading the entire post! Most of the things in life are not within our control, but this time, these efforts, your dedication are within your control. If you liked the content please let me know! Also if you have other tips that you would like to share feel free to share them in the comments!
Here is a summary of the tags that we discussed today:
See you soon!
Top comments (9)
Are you going to write another article about PHP and Javascript? This would be very useful, you can add also things about complementary libraries for SEO such as React Helmet for React or the use of Javascript tags for SEO...
Yes I will! I just didn't plan for it yet, I have a list of posts to help beginners first, then more intermediate ones will come! Thank you for your suggestion!
All around awesome advice here! Bookmarked. 🙌
For any onlookers that create content here on DEV, it's super easy to add a canonical URL directly to your posts. This way, if you are reposting an article on DEV that appeared somewhere else first — like your personal website — you can point to that original source URL and improve your SEO. I highly recommend doing this!
Anyway, thanks again for sharing this post!
Thank you very much! And thank you for the useful information!
Thanks for your effort :)
Thank you for your kind comment! It motivates me a lot!
Great, some of the things were known and some were not, so thanks for telling something new
You're welcome! Glad that your learned something new!
Thank you very much!