Fear not Dorothy! Just follow me down the yellow brick road as we embark on uncovering the key HTML elements that you need to know for optimizing your on-page SEO.
My goal by the end of this article is for you to have a complete understanding of the fundamentals of SEO. You will learn how to identify key elements of a webpage, utilizing various tools and methods, and you will able to optimize your webpage for targeted keywords utilizing these highly influential HTML elements.
How Do I Use Keywords On My Website?
So you’ve done your keyword research. You’ve identified your primary keyword for your webpage and now it is time to implement this keyword so that Google can start identifying your webpage with this keyword.
But, where exactly do keywords go within your website?
It is often difficult for people to understand this fundamental component to On-Page SEO since most are unaware of the general anatomy of a webpage or lack the technical knowledge to understand and identify key HTML elements within a web page.
And in fact, if you ever outsourced your SEO it might appear as if nothing was changed within your site, leading you to wonder what exactly you paid for.
The idea of placing keywords in select locations such as within your meta data and select heading tags, can be quite confusing for most.
The following are the 3 most influential places within your website to place your primary keywords, to help Google identify and rank your page accordingly.
Title Tags
What are Title Tags?
Title Tags, also known as meta titles, are an important part of the webpage identification system. They are a basic HTML element within the header section of your webpage that provides valuable information to search engines.
Title tags are similar to a book title, in that they provide search engines with a clear understanding as to what your webpage is about, because of this, title tags are one of the most influential places to have your primary keyword.
Why are Title Tags so Important?
Title tags are meant to be a concise description of your webpage content. Concise is the keyword here, no pun intended.
Though there is no limit to how long your title tag can be, it is best that it remain under 60 characters in length, since Google typically only displays the first 50-60 characters.
Because of this, it is best practice to have your primary keyword placed closer towards the front of your title tag as opposed to the end where it might get cut off.
So aside from being a brief description of your webpage content, why are title tags important?
Title tags helps both readers and search engines identify what your webpage is all about. Like a book title, they are the first impression people have of your webpage.
As mentioned earlier, it is one of the primary elements on a webpage that Google uses to identify and rank your webpage within search results.
But don’t just look to Google when determining your webpage’s title tag. Take a user-centric approach to creating highly captivating and engage worthy title tags.
The way most people judge a book by its cover, a title tag can either make or break your site when it comes to whether or not someone will want to visit your webpage even if your listing ranks well.
So where are these elusive, mythical elements that control the hand of Google and decide your fate?
Where Can I Find Title Tags Within My Webpage?
Title tags are probably one of the most misinterpreted, undervalued or simply overlooked HTML elements on a webpage as they are often unseen, or in most cases auto-populated.
If you are using a content management system (CMS) like WordPress, title tags, are often auto-generated and automatically applied for each and every page on your website.
Title tags are not easily identifiable when actually on a webpage. This key HTML element is in fact nowhere to be found within the actual pageview of a webpage and if you are on a mobile device, you would likely never see it.
Search Engine Results Pages
To clearly see how title tags are utilized by search engines, it is probably best that we take this time and head over to Google.
Simply by entering a search we are provided with a results page known as a Search Engine Results Page, or SERP for short. No, don’t spell it out. It’s pronounced “surp.”
If you look at your SERP you are provided with a list of sites. In each of those listings is large blue text. This blue text is the site’s title tag.
Notice how the Title Tags reference the keyword that you searched for. By placing that keyword into title tag, you are telling Google and other search engines that your website is relevant to that particular topic/keyword.
Also remember how I mentioned that Google limits the amount of characters displayed within search results. See how the second title tag is cut short. The ellipsis is a clear indicator that there is more to the title tag that is unseen.
This is why it is critical to ensuring that your keyword is placed near the front of your title tag and to limit the amount of characters to just under 60 characters in length. This will ensure that you have a complete and effective title tag that maximizes the amount of real estate provided by search engines within the results listings.
Web Browser
Remember how I mentioned that title tags are nowhere to be found within your pageview, well that’s because this information is not only passed along to search engines for results listings, but it is also passed along to your web browser.
If you look at the top of your web browser, you will see your title tag placed within the browser tab.
Not much to look at right, but now imagine multiple tabs open.
See how your title tag once again allows a user to identify your webpage.
Social Shares
Another aspect and benefit to optimizing your title tags is for social sharing. Many social networks utilize your title tags to auto-populate your webpage’s information when someone decides to share your webpage URL.
HTML Source Code
Whether you are using Chrome, Firefox or even Safari all modern web browsers now support the capability to inspect a webpage’s code. It’s a way of looking under the hood.
In order to do this, go to the webpage that you are wanting to inspect.
Right mouse click within the web page and select “inspect”
You will see the following panel open up within the pageview of your web browser.
Use this process for inspecting the other HTML elements we will discuss later in this article.
Locating Elements within the Page Code
By simply clicking somewhere within the panel and hitting “Command-F”, or “Control-F” if you are on a PC, it will open up a search field at the very bottom of the panel.
This search field allows you to quickly search for anything within the HTML code of the page.
In order to locate the title tag of this page, we are going to type in the following:
<title>
See how easy that was! Familiarize yourself with the placement of this element within the actual HTML code.
Notice that the title tag resides in the <head></head> tags of the HTML code.
Meta Descriptions
What are Meta Descriptions?
Meta descriptions are another key meta data element, also found within the head content of your HTML code.
And much like your webpage title tag, meta descriptions provide a brief summary of your webpage and again are elusive to most individuals as they are nowhere to be found within your actual web page view.
And if you are utilizing a content management system like WordPress, these descriptions are often auto-populated, pulling from the first identifiable pieces of content within your HTML.
Why are Meta Descriptions so Important?
Meta descriptions are a brief summary of your webpage.
Much like a title tag is similar to the title of a book, the meta description is similar to the brief synopsis that is often found within the back cover of a book.
Meta descriptions are added content to help persuade and influence viewers to want to click and engage with your webpage.
Though, once again, you are not limited to the amount of characters that you are able to enter within a meta description, however Google does truncate your meta description to about 160 characters.
Though the meta description holds no true value within search engine rankings it is important to utilize this key element for keyword placement as it provides additional contextual information that helps create a sense of relevance to the viewer.
Creating highly engaging, compelling descriptions will help you attract more clicks within SERPs.
And though Google takes no consideration as to the content within your meta description, it does however take into account user activity. The more people that engage and click on your webpage, the clearer the signal is to Google that your webpage is relevant to that particular search query.
Clicks on your search results listing is known as click-through-rate or CTR for short. Yeah this one you sound out. Its not “sitter.”
Google has clearly made it known that a page’s CTR positively impacts a page’s ability to rank.
Where Can I Find Meta Description Within My Webpage?
Meta Descriptions are bit more elusive then their counterpart, title tags. The reason being is that these meta descriptions are definitely nowhere to be found within the actual pageview or even browser tabs. Their sole purpose is primarily to be used within search engine results pages.
Search Engine Results Pages
Looking once again back to our original search results listing of “bluetooth headphones” we can see just under the title tag in grey text our meta description.
Notice again that Google uses ellipsis to truncate the amount of characters displayed. This helps create a sense of uniformity among search results listings.
Social Share
And just like title tags, meta descriptions are an added piece of informational data used within social share.
HTML Source Code
Go back to the web browser inspect panel and this time type in “<meta”
Notice that several tags show up. That is because meta tags or meta elements as they are also referred by are tags placed in the head section of your code to help define the contents of a web page.
Meta tags go beyond just simply identify the description of the page. They also identify keywords, content type, author, language and much more.
To locate our description meta tag, we need to type in the following:
“description”
Headers
What are Headers?
An update in HTML 5 has introduced what’s known as a header tag.
<header></header>
Do not mistake these for the <head> (no “er”) tags that I mentioned earlier.
Header tags are a container for navigational links or introductory content, but these are not the headers I am referencing in this article either.
Instead I am talking about H-tags.
<h1> to <h6> tags
H-tags are a list of subheadings found within a web page’s content.
Again, if title tags are the title of a book, then headers are the chapters and subchapters within the book.
H tags range from 1-6 as a sort of scale of importance. H1 defines the highest level of importance while h6 is of lesser importance.
You will want to place your primary keyword for each of your pages within the H1 tag. H1 tags should only appear once on a page and should be at the very top of every page.
All the other subheadings (h2-h6) can appear multiple times throughout the same page, but should be used naturally throughout your page to break up blocks of content.
Remember, the idea is to break up your content so that it makes it easier for the reader to easily digest your website content by simply scanning the page.
Why are Headers so Important?
Headers, also known as h-tags, break up your site content into easily digestible elements. They create subtopics by which people are able to quickly identify a section of content within your webpage.
Where Can I Find the Headers Within My Webpage?
Unlike Title Tags and Meta Descriptions, headers are not a part of the search engine results content. Headers only exist within the actual content of the web page. Depending on the CSS styling of the headers, these may or may not stand out.
In general, headers should be easily identifiable and should help break up block of content.
HTML Source Code
Let’s head back to our web browser inspector tool.
H tags can be found simply by typing in the following:
<h1
<h2
<h3
<h4
<h5
<h6
Note that not every webpage will require all h-tags. Also remember that your webpage should only include one H1 tag.
Summary
Well Dorothy, you made it safely down the yellow brick road and made some friends along the way. Your long, awaited arrival at Oz is near.
Take some time to take a complete inventory of each of the pages within your website to ensure that your keywords are being placed in each of these 3 key areas.
And if you are looking for more great ways to up your SEO game and take your search rankings to the next level, check out my On-Page SEO Basics article.
