DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for 10 HTML Tags for SEOπŸ”
Sampad Sarker
Sampad Sarker

Posted on • Updated on

10 HTML Tags for SEOπŸ”

1.Use Title Tags

<title>Title of the webpage ...... </title>

Your content is labeled in this way, and search engines interpret this as the name of your page.

2.Meta Description Tags

<meta name="description" content="Learn html, css, Js and develop your own website or helps others to make their websites.">

When the article appears in search results, Google will also reveal this. The title and meta description tags should both contain your keywords.

3.Header Tags

Here is the hierarchy of header tags:
<h1></h1> – typically used for webpage title.

<h2></h2> – highlights the secondary titles of the webpage.

<h3></h3> – related points of the topic in the webpage.

<h4></h4> – supporting points from <h3>.

<h5></h5> – not commonly used, but excellent for supporting <h4> points.

4.Add alt in Images

<img src="cats.jpg" alt="cat is sleeping on couch">

The alt attribute tells search engines what the image is about. Search engines have no idea what the image is about unless it has an alt.

5.Building Links

Obtaining high-quality backlinks is a part of SEO. You should also pay attention to internal connections as well as exterior links.

<a href="http://mywebsite.com/" rel="nofollow">your anchor text</a>

The link will still function, but search engines will not accept it. It is useful to share links with visitors without affecting the SEO of the other pages.

6.Add Open Graph Tags

Open graph tags helps in improving social media's search and display capabilities. For instance, if your information is posted on Facebook, open graph will be used to display theΒ information.

<meta name="og:title" property="og:title" content="The Title of Your Blog">

7.Twitter Card Tags

Twitter Cards work similar to OG with the exception that these are specifically for Twitter.

<meta name="twitter:card" content="summary">

It is advisable to optimize your cards to get the most out of the tags.

8.The Robots Tag

If you wish to block particular articles from being indexed, use the robots tag.

<meta name="robots" content="noindex, nofollow">

Google will not index the content or follow any of the links in this case. However, you must exercise caution when employing these HTML elements for SEO purposes.

9.Use Canonical Tags when necessary

When you develop a website, you can make it available in a variety of ways. As an example:

http://www.yourwebsite.com

https://www.yourwebsite.com

http://yourwebsite.com

https://yourwebsite.com

<link rel="canonical" href="https://yourwebsite.com/">

This tells Google that β€œhttps://yourwebsite.com/” is the URL on which you’re focusing.

10.Responsive Site Meta Tags

<meta name="viewport" content="width=device-width, initial-scale=1">
To inform that search engines should be made aware that your website is responsive.

Top comments (14)

Collapse
 
mrcaidev profile image
Yuwang Cai

I recently read the documentation of Open Graph, and I'm confused about the way DEV.TO add og:* to their meta tags, on the page of a post article.

This is how DEV.TO adds OG meta tags to the post article page:

How DEV.TO adds OG meta tags to the post article page

But actually when I finished reading the OG documentation, I think meta tags like og:title, og:description should be relative to the post itself, rather than information of the whole DEV.TO site.

I'm a beginner to SEO so would anyone explain this to meπŸ€”

Collapse
 
cicirello profile image
Vincent A. Cicirello

Are you sure your screenshot is of the head of a page for a post? And not for the dev.to homepage? I just checked head of a page for one of my posts and the og and twitter tags correspond to the post as you'd expect.

Collapse
 
mrcaidev profile image
Yuwang Cai

I found something interesting: When I first enter a page for a post, the meta tag is all about DEV.TO, but after I click on the refresh button, the meta tags update to the content of the post...

Thread Thread
 
cicirello profile image
Vincent A. Cicirello

That is interesting. I wonder if it is something browser specific causing that behavior, perhaps in combination with their CMS. Viewing the source in Chrome on Android showed header tags as expected. I might check it out again later on a desktop.

Thread Thread
 
mrcaidev profile image
Yuwang Cai

I use Edge on Windows and has not yet figured out a convincing explanationπŸ€”

Thread Thread
 
stojkovski_94 profile image
Filip Stojkovski • Edited on

This is probably because the meta og tags are set on backend and the DEV.TO is probably single page application and never re-set after the initial page load. Meta og tags are used so social media like twitter/facebook etc. can "beautify" the post of copied link. In reality you don't need some of the meta tags to be updated dynamically on SPAs as long as it is properly crawled by the robots when accessed.
Note: This is my presumption and view of this "problem"

Thread Thread
 
cicirello profile image
Vincent A. Cicirello

You might be right (I haven't been curious enough to look at the forem repository for the source code). However, I also haven't been able to recreate the issue described here. I've gone to the page of one of my own posts on both Chrome and Edge on Windows 10, as well as on Chrome on Android, and in all 3 cases inspecting the source of the post page, I find the OG tags for the post (as you'd expect) and not for the site. I'm guessing that the behavior that they saw might depend upon how one navigates to a post page.

Thread Thread
 
mrcaidev profile image
Yuwang Cai

πŸ‘Makes sense

Collapse
 
ashleyjsheridan profile image
Ashley Sheridan

Have to chime in on the alt "tags". Firstly, it's an attribute value, not a tag.

Second, it's meant as an alternative to the image, such as on slow connections where the image doesn't load, or for screen readers. It's absolutely not for the purposes of SEO. Stuffing keywords into image text is just a plain bad experience all round.

Collapse
 
sampadsarker profile image
Sampad Sarker Author

of course alt is not a tag
THANKS

Collapse
 
lucaargentieri profile image
Luca Argentieri

Thank you for your post.
Maybe you could talk about the manifest or create a post about it. πŸ”₯

Collapse
 
mrepol742 profile image
Melvin Jones Repol

Adding open graph meta tag can also help

ogp.me/

Collapse
 
robsonmuniz16 profile image
Robson Muniz

Good Content, thanks for sharing it!

Collapse
 
dhruvjoshi9 profile image
Dhruv Joshi

Super helpful! Thanks!

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›