Tags are small snippets of HTML code that tell engines how to “read your content correctly”. In fact, you can greatly improve search engine visibility by adding HTML SEO tags. As people begin to enter the field, they often wonder how much code they need to know to be an SEO analyst. Without optimized HTML tags, your website's SEO will suffer.
So what tags and attributes are important in search engine optimization? Why do you need them and how should they be used? We reviewed all the HTML tags that exist and put together a list of the most important ones to help you learn the basics of HTML or just refresh your memory. Hypertext Markup Language (HTML) is the standard markup language for documents that web pages use to tell browsers what elements it contains and which should be displayed on the screen. HTML is the basis of the vast majority of web pages and is one of the most essential parts of technical SEO. With the help of HTML elements, SEOs can convey information on web pages to both people and search engine bots.
Doing so can make it clear to everyone what the structure of the page and the order of the content is, as well as clarifying how the page relates to other online web pages. We've already mentioned terms like element and HTML tag, but there are also meta tags and attributes. It can get very confusing quickly if you don't know the difference. So, let's take a look at the basic terms we'll use throughout this post.
An HTML code is made up of elements, each of which can be a tag or a meta tag. If a tag or meta tag has additional characteristics, it is an attribute. In this case, the HTML element is a header that is indicated in the code with the start tag and the end tag. Because the header has the align%3D “left” attribute, it aligns along the left side of the page.
It's the basic HTML entity that marks the start and end of each element. Think of HTML tags as keywords that define how web browsers format and display page content. Now, a meta tag is a type of tag that provides web browsers and search engines with technical information about a web page, such as description, keywords, document encoding, bot indexing rules, etc. Note that all meta tags must be placed inside the document label.
An interesting fact is that, although the description and keywords are meta tags, the title is a tag. Finally, an attribute is an additional piece of information about a tag or meta tag. They represent special words that are used within the start tag to control the behavior of an element. For example, earlier in this post, we mentioned a tag that adds images to web pages.
Well, its alt attribute shows an alternative image title if the image itself can't be displayed for some reason. Since many people use the terms “tag” and “attribute” practically synonymously, let's take a moment to clarify the terminology. In this example, “open the tag”, “Welcome to my blog about SEO” is the content of the tag and close the tag. The HTML element in the previous example is a header that is used as a visible title on a web page to introduce content about search engine optimization.
In this example, rel%3d and href%3d are attributes of the tag. Note that there are also empty items, such as, that don't have any final content or tag for them. Now that we have a clear understanding of tags and attributes, let's discuss why search engines, browsers, and users need them. First, Google uses meta tags to obtain information about the content of a page and, ultimately, include it in search results.
In fact, the fragment is a direct confirmation of this, since it is composed of the title tag and the description meta tag. However, if the title and description of the page are configured incorrectly (for example, they are misleading, too many spam emails are sent with keywords, etc.). Google's Search Console Help Center has a list of all the meta tags supported by the search giant. So, if you feel like you want to dig deeper into each HTML tag, make sure to take a look at it.
Labels help browsers read information. This way, texts, images and links can be displayed exactly as indicated in the HTML code. Can you imagine if users had to visually pull the content of the site out of all that HTML code? The tag is the first label you put in the code of your website. What it does is present the page to search engines as a web page.
Note that while the tag is not an HTML tag per se, so it doesn't have any attributes, it provides vital information for browsers that lets them know what type of document to expect to find on the page and how it should be displayed. When used correctly, the browser will understand that the web page was created in HTML. Ultimately, you'll have no problem processing the code and displaying the page as intended. The tag presents the first section of the web page and contains information about the page that browsers do not display.
I want to point out that it's important to know that the tag houses some of the most important SEO tags. The element serves as a metadata container, as in data about the HTML document that is not displayed on the page and goes between the tag and the tag. As a general rule, metadata defines the title of the document, its character set, styles, hyphens, and so on. The tag can contain HTML elements such as,,,,, and that is a must.
As you can see in the example above, the tag contains metadata such as the title of the document, which is not visible on the page, but can contain several elements that provide data on the page. In addition to that, global HTML attributes that can be used with any HTML element are also compatible with the. To elaborate, the tag contains all the content of an HTML document, including headings, paragraphs, multimedia, hyperlinks, tables, lists, and so on. Basically, everything that the human eye can see on a web page is housed in the tag, which, by the way, can only be one of.
Document title This is a title This is a paragraph. And now, let's move on to the other HTML tags that can help your SEO. As we've already mentioned, tags can tell browsers and search engines everything they need to know in a language they can understand, such as how the page should be treated, what it's about, and what its purpose is. The only trick is knowing how to say what you want to say correctly.
The bottom line is that if you use them the right way, your website promotion and SEO efforts will benefit significantly. As one of the favorite tags of SEO professionals, the tag helps both users and search engines understand what a page is all about. The title is also displayed as anchor text when you post links on social networks, if you don't use the Open Graph markup, that is. That's why the title should be concise, informative, unique and interesting to attract potential readers.
The length of the title should be about 60 to 70 characters, since excessively long titles will be reduced to 600 pixels anyway. As a result, incomplete information will be included in the snippet. Okay, with the topic of title length out of the way, let's see if we need to use target keywords in the title tag. Several years ago, Brian Dean of Backlinko did a study that mentioned how using the target keyword within the title tag can have a positive effect on a website's ranking.
The target keyword can help boost rankings, but there is no direct relationship between the use of the keyword in the title tag and an increase in ranking. Google has long learned to analyze the semantics of web pages without sticking to tags alone, as was the case in the past. The main takeaway is that you need to use keywords, but only with the goal of helping both search engines and users understand what your page is all about, nothing more. You are also free to specify other additional information in the title, such as price, brand, delivery options, etc.
You can learn more about how to use them correctly in our guide to titles and descriptions. Interestingly, since the element is part of the tag of the HTML file, it is not displayed on the page itself. In addition, there can be only one label on a single document that must be placed inside the container. The tag also supports HTML Global Attributes, but it doesn't support Event Attributes.
The tag, often referred to as metadata, defines metadata in the HTML document that is not displayed on the page, but can be processed by search bots (to identify keywords) and browsers (to display content or reload the page). It should always be placed inside the page element and is usually used to specify the character set used on the page, the description of the page, the keywords, the author of the document, and the viewport settings. First, let's look at the attributes that the tag can contain. One of the first attributes of the tag that we will focus on is the name attribute.
Its main purpose is to inform the bots that visit the page if the information on the page is intended for them or not. For example, by including a name attribute in the meta tag, such as “You will point out to all bots and the Google bot, respectively, that they should consider the “noindex” directive. In fact, when the meta tag contains a name attribute intended for bots, it is often referred to as a “meta robots” tag. From an SEO standpoint, using the name attribute in the meta tag is a great way to prevent certain bots from interacting with your pages, as well as allowing you to provide additional data on the page.
I want to point out that there are a lot of opinions online about whether it is necessary to include keywords in the meta tag or not. Sure, ten years ago this could have helped their advocacy efforts, but no longer. Google representatives have repeatedly stated that the search giant does not consider keywords when ranking sites. The same goes for Bing's stance on keywords.
In addition, SEO expert Bill Slawski conducted a survey that confirmed that meta keywords are a thing of the past. But these are not all the values of the name attribute. Let's take a closer look at others. The description attribute, often referred to as meta description, is another attribute used with the.
Now, while the description text doesn't provide a direct boost in rankings, it can increase your CTR, which, in turn, is seen as a sign of positive ranking. Although not an attribute, the viewport meta tag allows you to control the width and scale of the viewport (the user's visible area of a page) so that it displays correctly on screens of all sizes, from desktops to laptops and from tablets to mobile phones. With the help of this data, browsers can obtain information on how to control the dimensions and scaling of web pages. Taking a closer look at the code, we can see that the Width%3DDevice-Width part is configured in such a way that the width of the page will match the width of the screen of the device used.
As for the initial scale%3D1,0 part, set the initial zoom level when the browser first loads the page. Therefore, you might want to test it based on how your page is configured. In the modern era, when the usability of a site directly affects its ranking positions, it is simply unacceptable to create pages that don't fit the sizes of different screens. People will immediately leave your page if it looks like the example on the left.
Without the Twitter Card tag, page title, description, image, etc. of your content won't show or show up in your Twitter posts along with the link. Instead, Twitter will pull data from relevant Open Graph tags, if any. In the context of the HTTP-equiv attribute, which we will see below, the content attribute defines the type of data that is sent to the browser.
But first, let's focus on a very important value of the content attribute. Noindex is another commonly used meta tag attribute for SEO purposes. This attribute allows publishers to identify content that search engines can index and include in SERPs. Basically, the noindex attribute allows you to indicate to search engines that they cannot use the given page in their respective indexes.
As with the “meta robots” tag, the noindex attribute is commonly referred to as the “noindex” tag because of its use, although it is an attribute of the meta tag. This attribute is very useful when you want to hide sensitive data from organic search. For example, you could have an area on your site that only paid members can access, and if you don't use the “noindex” tag, the content will be accessible to anyone from the search results pages. When using robot directives on your page, make sure it's not blocked by robots, txt file.
Otherwise, search engines simply won't be able to access the page and see the directives specified in the meta tag. The http-equiv attribute displays the contents of the HTTP header and is used by servers to gather additional information from the page. In simple terms, browsers convert the value of the http-equiv attribute specified with the help of the content attribute to the HTTP response header format and treat it as if they came directly from the server. The HTTP header reveals a lot of data that is useful to SEO specialists, such as the response status of the server (200, 404, etc.) or the name of the server that sent the response.
In addition, it can be used to specify the canonical URL of the requested page, prevent robots from indexing a page using the X-Robots-Tag HTTP header, or configure an HTML redirection with the refresh attribute. The charset attribute is responsible for encoding the document. Define the character encoding style of a website. Encoding must be specified so that browsers can correctly display the text of the HTML document on the page.
If the tag with the encoding data contains an error, you will only see characters encoded on the page. One of the most commonly used encoding standards is UTF-8, with 96.6% of analyzed websites using it. It is compatible with all modern browsers and search engines. Some other coding standards include ISO-8859-1, Windows-1251, and Windows-1252, but are used by less than 3% of websites.
The key here is not to use multiple coding standards in a single document, as this will confuse both browsers and search engines. This, in turn, can lead to content indexing problems and incorrect text display. Nowadays, virtually every search engine knows how to identify page encoding without outside help. But, to be safe, you'd better specify the encoding used on the page to avoid problems.
The tag is used to define hyperlinks that link from one page to another. Basically, a standard hyperlink on a web page is a label. Now, let's take a look at the attributes that are associated with link tags. The most important attributes of the tag are the href and hreflang attributes that indicate the destination of the link and specify the country and language of the alternative page, respectively.
The hreflang attribute was designed primarily for websites that contain the same copy in different languages. Allows search engines to know which version of the page should be shown to website visitors, allowing them to view content in their preferred language. Note that the hreflang attribute can also be used in the HTTP header for non-HTML documents, or it can be specified in the site's XML sitemap. The rel%3d nofollow attribute signals search engine bots that they cannot follow the URL indicated in the href attribute.
Google's use of the “nofollow” attribute “rel%3d” Several years ago, the search giant made some modifications to the “nofollow” attribute and introduced the sponsored attributes rel%3d ugc and rel%3d. Unlike the “nofollow” attribute, these new ones allow publishers to establish the relationship between links and their landing pages in a much clearer way. In addition, Google also stated that the sponsored attributes “nofollow”, “rel%3d “ugc” and “rel%3d “are now seen as clues by the colossal search. Google's bot used to ignore such links, but now you can consider the “suggestion” provided, but you can still treat the link as “nofollow”.
The rel%3D canonical attribute of the link tag allows SEOs to point out which other web page should be considered canonical, since it is the main version of the page, but copies may exist. From an SEO perspective, this helps promote a specific page in organic search, preventing your copies from ranking. The code with the canonical attribute must be placed inside the page element. Note that you must indicate the page you want search engine bots to see as canonical after the “href%3d” attribute.
The tag is present on any page that has an image. Used to embed images in HTML code and display them in PNG, JPEG or GIF format. You can also add an image as a link to another file. To do this, simply attach the label to the container.
Interestingly, this tag does not insert any images into the pages, but rather links to them so that they are displayed on the page. The tag basically serves as a container for images that are in fact located somewhere else, such as a server. As you can see, there are three attributes in this tag. One of them must be filled in correctly for the label to work, while the others can be left worthless.
Let's take a look at all three in more detail. The main purpose of the src%3d attribute is to indicate where (URL) the file of an image displayed on a web page is located. But if there's a slash at the beginning of the URL, then it's relative to the domain. Note that relative URLs will not break with a domain change, for example, when changing from HTTP to HTTPS.
And if a browser can't find an image, the alternative text will be displayed along with the broken link icon. The sole purpose of this attribute in terms of SEO is that you need it to index images and see them ranked in the image search. Also, the image tag simply won't work without this attribute. The main purpose of this attribute is to indicate the alternative text that will appear if an image cannot be displayed on the page for some reason.
In addition to that, since search engines still struggle to find the technology that allows them to fully understand what is represented in images, the alt attribute provides another way, in addition to the title attribute, for them to understand what is represented in an image and ultimately classify it. in the search for images. Therefore, try to use keywords that a) describe the image, and b) use keywords relevant to the topic of the website. In terms of human website visitors, screen readers and support technicians use the text of the Alt%3D attribute to help people who are blind or visually impaired understand what is in the image.
So, you might want to make the most of the alt attribute in terms of helping those people absorb the content. Remember how I said that two attributes can be left worthless? Well, even though the alt%3d attribute must be present in the image tag as the title%3d attribute, you're not required to fill it. However, considering the above points, you may want to complete it after all. The title attribute describes the content of the image.
Although this attribute is not as vital to optimization as the alt attribute, since it is not used for search ranking, it is worth completing it, as it can provide additional information when users hover over the image. The tag also supports HTML Global Attributes and HTML Event Attributes. A separate group of labels is responsible for emphasizing the text, making it bold, italic, underlined, etc. Text selection is useful when you need to logically highlight an important part of the text, both for readers and search engines.
Note that the key difference between the and tag is that the latter provides a semantic emphasis on an important word or section of words (useful for SEO), whereas the former is simply offset text with a conventional italic style to show an alternative mood or voice. As far as lists are concerned, we can see a similar story. The SEO value of lists lies in their clear, concise and step-by-step structure that increases the chances of the page appearing in the featured snippet. From an SEO standpoint, it's much more beneficial to use tables rather than lists, since tables allow search engines to easily get data from tables and, as a result, rank articles higher.
The tag is designed to define a page or section header to present content ahead and usually has a logo or icon, navigation links, and a search bar. It's important to note that there can be multiple tags in a single HTML code, but the tag itself cannot be housed in one tag or another. The tag supports HTML Global Attributes and HTML Event Attributes. In terms of SEO benefits, search engine bots find headers easy to use because they provide page formatting, making page content scannable.
Without the presence of headers, search robots may think that your page is not easy to use and, as a result, your rankings may be affected. In addition, since the header may also contain internal navigation links, this provides search engines with a clear understanding of which pages are most important in the structure of your site. By the way, an experiment confirmed the priority of using. No matter how many headers you optimize, they still can't beat a web page with a.
Therefore, to gain SEO benefits, it's best to stick to best practices regarding the use of headings in content, use only an h1 header, and maintain the header hierarchy. The tag was designed to define a footer of a document or section on a website. In most cases, the footer is the same throughout the website and provides users with all the information they may need. But what is the SEO benefit of using the footer? Well, the footer contains links.
And in SEO, this is important, as it provides a clear internal link structure. So make sure that all your important pages are linked from the footer for search engines to see. The tag was designed to define a section in an HTML code. It is used to contain all kinds of HTML elements.
To elaborate, the tag is a block element that aims to highlight a fragment of a document to change the appearance of its content. So that you don't have to describe the style of the tag every time, choose the style from an external style sheet, also add a class or id attribute along with the name of the selector. From an SEO point of view, wrapping page content in tags won't be a direct problem, however, having a lot of unnecessary code in your HTML document can slow down the page and cause UX problems. Simply and simply, the tag was designed to define an HTML document section.
But in addition to this purpose, it can also be used to mark news blocks, contact details, content chapters, and dialog box tabs, to name a few. It should be noted that this element usually has a title, and you can place one section element inside another. HTML global attributes and event attributes are compatible with the tag. In terms of SEO, the element is similar to the tag, but, although it seems that nothing is going on, it sends a stronger signal to search engines.
Tells them that there is a logical group of related content within the tag, such as a contact details section. Below you can see a page of SEJ articles that has an infinite scroll. Once you finish reading one article, another one starts immediately. The tag simplifies the process of highlighting new articles or blog entries in an online publication for search engines.
That way, search engines like Google can place more emphasis on the content wrapped in the tag. In addition, the use of tags reduces the use of tags and cleans up the HTML code of your page. The tag is used to define a block on the side of the page that contains headers, links to other content, tags, and other information. This is usually called a sidebar, although it may contain a footnote, an announcement, or something else.
As a general rule, content placed inside the aside element should not be directly related to the content of the page. Similar to the label, aside only creates a sidebar and shows no design aspect. However, styling can be applied via CSS. The tag helps search engines quickly get valuable information from the page, such as author, number of views, and date.
In addition, this tag can be used to provide additional content attached to a page that is relevant to the entire page and not to one of your blog posts. This gives search engines the opportunity to analyze the page environment to better understand its general and more specific topic, with the ultimate goal of ranking the page for relevant queries. You've probably heard that most SEO specialists disapprove of sites that use frameworks (most of these sites were created in the 90s). If we look at the reasoning behind these sentiments, we can see that these sites are difficult to optimize, index more slowly, and are not always correct, and that these sites have a lot of usability problems.
As you can see, it doesn't look very good, but there's a lot more behind the scenes that causes even more problems for those pages. So what do you need to know about the label? The tag defines the properties of a single website framework. It is placed inside the container that divides the page into different areas. At the heart of it, each area is a separate web page.
The tag is used to specify an inline frame. In essence, iframes allow you to embed another website in your site's HTML code, such as interactive maps and YouTube videos. Therefore, the tag gives you the ability to embed content from another website within your own website. Are there any SEO benefits to this? Well, since search engines understand that iframe content is pulled from another resource, web pages that use the iframe element won't receive any positive signals, but it's still better to use it than.
The tag is used to navigate the site and points to the most important pages of the website. Since we've already talked about navigation links and internal structure in the sections and in this blog post, you might wonder how this tag differs. Well, if your page contains several link blocks, you can use them to mark priority links. But don't overdo it and tag all the links with the element.
Did you notice that I said links in the plural? The tag can be used more than once in an HTML document, but make sure you don't put it in the tag. With the help of this tag, screen readers can understand if they need to omit the initial representation of the content. In addition, the tag supports HTML Global Attributes and HTML Event Attributes. For search engine optimization, links tagged with the element send a signal to search engine bots regarding the pages that you consider to be the most important on your website.
In addition, it provides them with quick and easy access to these web pages. The tag can be placed in the header or body of an HTML document an unlimited number of times. In most cases, the location of the script does not affect its performance in any way. However, keep in mind that you must place the scripts you want to execute first in the head of the HTML code.
To avoid making mistakes in HTML tags that may affect the quality of your site promotion, it is necessary to perform a full site analysis. You can easily audit your entire website with the help of SE Ranking Website Audit. In this blog post, we only cover the tags and attributes that SEO professionals most often face. By having a good understanding of the importance of each of these elements, their structure and function on the page, you can identify errors in using tags, correctly develop tasks for programmers and content writers, and perhaps even do some coding without help.
You don't need to love HTML tags, but knowing which ones are important for site optimization is a must. If you want search engines to rank your pages, help them by providing them with useful and relevant information in the HTML code. Is it a good idea to use “mark-tag” to “highlight the keywords on my page, but then make them inherit the normal color and background with css? Thanks Andrew for the informative blog. I have a concern regarding “DNS prefetching”, could you explain?.
Thanks for the great SEO idea Thanks Andrew. Share great content with us. But I still have the question that if we use the Open Graph tag, then which social media channel would Twitter or Facebook prefer. Can I use both at the same time on a single page? Can we use the h2 tag inside the article and how many times can we use it? You said that h1 tags are important.
I use WordPress, do you think I should add h1 tags to the title as well? Or should they be inside the article? Also, can I be penalized for having too many h1 tags? Save my name, email and website in this browser for the next time I comment. HTML tags are among the first things we learn in SEO. They are invisible to the naked eye, but they can do wonders for rankings and the website in general. In fact, HTML tags have become so essential that no website can compete in current search results if they ignore HTML tags or, God forbid, use them incorrectly.
In my experience, I would feel quite crippled if I didn't know basic HTML and CSS. Understanding things like meta and nofollow, among many other similar concepts, is quite central. That said, you don't need the knowledge or skills of a real web developer. The layman is good enough in many cases.
Not at all, but it certainly helps. Code quality is a very important component of SEO. Not being able to do anything because of that would significantly limit their capabilities. We recently hired an SEO technician for our agency and bypassed all applicants who didn't have any knowledge of HTML.
No, but knowing basic HTML adds up the value. You DON'T NEED to have knowledge of HTML for SEO. But, while you're working with SEO, you'll work a lot with website tags. So, it will definitely help you if the basics of HTML are clear in your head, for example, what are tags? how do they work? how to use them where are they placed? etc.
And the best part, learning HTML and basic coding stuff isn't difficult. With a minimum amount of time allotted each day, you can easily learn it in a week. You definitely don't need to know how to program or how to create a website from scratch. You need to know enough about HTML to recognize different tags (), their properties (o), and recognize how the source code of a web page is structured (what is the difference between the and the), etc.
If you want to become an SEO expert, or if you want to understand the technical elements, the more you know about how a web page (or a website or a web server) is built and works, the better you will do. Just complete the simplest free HTML course and you'll be fine at first. Of course, you can do some kind of SEO without HTML knowledge, but you'll be like a mechanic who can only change oil, filters, and refill a gas tank. .