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:
<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)
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:
But actually when I finished reading the OG documentation, I think meta tags like
og:title,og:descriptionshould 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🤔
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.
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...
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.
I use Edge on Windows and has not yet figured out a convincing explanation🤔
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"
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.
đź‘ŤMakes sense
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.
of course alt is not a tag
THANKS
Thank you for your post.
Maybe you could talk about the manifest or create a post about it. 🔥
Adding open graph meta tag can also help
ogp.me/
Good Content, thanks for sharing it!
Super helpful! Thanks!