How To Learn HTML for SEO

This class is designed to teach beginners the basics of HTML for SEO. It’s important to understand that everything taught in this class is based on SEO best practices. Utilizing these best practices are merely tactics. To get the best use of these tactics they should be applied within the context of a SEO strategy that includes content development, and link building, as well as optimized HTML. This course will be updated on a semi-regular basis when changes to best practices occur. If you have any questions about this class or want to learn more about SEO from Joe, contact him today.

Intro

back to top

Welcome to the HTML for SEO course. This video is the introduction and frequently asked questions. Some of the questions that I’m going to answer in this video is who is this course for, what is this course about, do I need to know HTML, will I learn HTML, and what is this course not about. Who is this course for? This course is designed for SEOs, web designers, web developers, content marketers, students, or really anyone that wants to learn how to optimize HTML for SEO. What exactly is this course about? In this course, we will learn how to best optimize HTML for web pages for SEO. Do I need to know HTML? No, you do not need to know HTML. However, a basic understanding of it will help you with this course. Will I learn HTML? No, you will learn some HTML as it applies to SEO, but this course is not designed to teach HTML in full. What this course is not about? This course will not teach you web design, you will not learn full HTML, we will not be talking about content, we will not talk about link building, we will not talk anything about SEO that isn’t related to HTML. This course is only about HTML for SEO. What exactly is HTML? HTML stands for Hypertext Markup Language and it’s the building blocks for all web pages. It’s used mostly as a structure to apply style sheets, JavaScript, and images to create a visual design. Each HTML page is made up of elements known as tags. An example would be the paragraph tag. As you can see, this is a paragraph. How can I see a page’s HTML? Let’s take a look. This is an important exercise because it will teach you how to understand how HTML is actually used in the real world. We are currently at my homepage, HallAnalysis.com, and if we want to see the HTML used to create this web page in Google Chrome, you can place your mouse on the page anywhere, right click, scroll down to view page source, and it will pull up a full printout of all of the HTML we used to create this web page. You can scroll down and view all of the HTML as it’s presented in a very clean format. There’s another option you can also do in Google Chrome and that is to highlight a certain area of HTML on the page. For example, we’ll highlight this word

Chapter 1: JavaScript & HTML

back to top

Hello there! Welcome back to the HTML for SEO course. This is Chapter 1: HTML DOM and JavaScript. In this chapter, we’re going to discuss what exactly is the HTML DOM, how does JavaScript influence the DOM, why is this important for SEO, and a few tips for optimizing JavaScript in HTML. Let’s begin by saying, “What exactly is the HTML DOM?” The HTML DOM stands for HTML Document Object Model. It is the standard model for web browsers and other pieces of software to read and analyze HTML. Each HTML element is considered a separate object within a tree structure of the DOM, including the entire document itself. Let’s take a look what this actually means. Here, we have a very basic HTML document. As you can see, we have a title tag, a heading tag, and a paragraph tag, but really the document starts in the beginning here where it says DOCTYPE HTML. Each element underneath DOCTYPE is a separate object within the document object model, and this allows for web browsers and other pieces of software to interact with the HTML in a model that it can understand. How does JavaScript actually influence this object model? While using the HTML DOM, web developers can change the content and structure of the HTML in real time using JavaScript. I’m going to show you an example of this using the page that we just looked at. As you can see here, this is a basic page, and you can see the h1 tag says, “This is a heading.” If we look at this page in a web browser like so, it looks like a basic HTML page without any styling. It says “this is a heading” and “this is a paragraph” just like it says here in the code. If we want to manipulate parts of this HTML using JavaScript, we can paste in some JavaScript towards the bottom of the page, and I’ve actually already written some, prepared for it, right here. And as you can see, this is some very basic JavaScript that I pasted at the bottom of the document. Let’s just walk through this JavaScript. It’s very basic and easy to understand. First, we’ll start off with And then we’ll tell the web browser that, So, by placing this bit of JavaScript here at the bottom of the document and we’re going to click save, and go and reload the document here, we can see that we changed the heading tag for this document. As you can see, using JavaScript, engaging with the document object model, web developers and designers can really influence the way the web page is built. But why does this matter for SEO? I mean, that sounds great, but really what does it have to do with SEO? Well, Google and other search engines can now read and process JavaScript. Therefore, it is vital that SEOs understand how to analyze JavaScript if interacting with the HTML. Let’s take a look at that. In the last video, in the introduction to this course, I showed how you could view the source of an HTML document in different ways, and I mentioned that there was a difference between looking at the view source. This is one page you can do it. Right click and go down to view page source, and we can see the exact same code that was in our editor. However, if we do an inspect – let’s highlight the heading tag here and go down to inspect – and you open up chrome developer tools, we can see that the h1 tag here actually says hello world whereas, in the code itself, it says this is a heading which means that chrome developer tools displays the HTML after it’s processed. So, any adaptations to the HTML through JavaScript or other changes will show up here in the chrome developer tools. This is the exact same way that Google’s crawlers and other search engines interpret the page as well because they read the JavaScript and process it for the user and for their index as well. What are some tips for optimizing javascript in HTML? Admittedly, I could spend all day talking about how to optimize JavaScript. This course is just about HTML, so I’m going to list what I consider to be three of the main tips for optimizing JavaScript for SEO. And that is to use in-line JavaScript for elements that are important to SEO. Now, what does in-line JavaScript actually mean? In our example here, we show this bit of JavaScript down at the bottom of the page. This is called in-line JavaScript because it’s found on the page that it’s intended to manipulate. External JavaScript can be found in a external file and it’s typically called out right here within the head section. It’s one line and it points to an external document. That still works; however, keeping your JavaScript in-line inside the document is a surefire way to get Google to crawl it because it’s part of the initial page load. I don’t advise you do this for all of your JavaScript because it definitely will slow down the page significantly, but like I said if you do this for the most important, the elements that are important to SEO, you’re going to have a much better case of Google or another search engine indexing that JavaScript and applying it within the index faster. Like I said before, you’re going to want to try to minimize the use of JavaScript as much as possible. JavaScript can slow down websites and make it harder for the engines to crawl the page. It’s very important that you slow down JavaScript as much as possible. And then also it’s important to use either the native DOM framework like we’ve used here. This is what I’ve walked you through. This is a native DOM JavaScript framework. Or a well-known JavaScript library like jQuery. And that’s important because if you use a well-known framework, it means that the engines have already had time to crawl that framework across millions of web pages and have already had time to interpret it on their own. So, it’s important to use either a native DOM framework or a well-known library like jQuery. That’s it for this chapter. Up next, we’ll be talking about HTML CSS and style sheets and how that applies to SEO. Looking forward to talking to you then. Thanks a lot! Have a great day.

Chapter 2: HTML/CSS Styles

back to top

Hey there! Welcome back. This is Chapter 2: HTML and CSS. In this chapter, we are going to discuss what exactly is CSS, how does CSS influence HTML, why is this important for SEO, and then we’ll discuss some tips for optimizing CSS as it applies to HTML. Let’s start off by asking the question, “What exactly is CSS?” CSS stands for “cascading style sheets” and it describes how the various HTML elements are to be displayed on each device. A unique CSS document can be made for each HTML page, or you can use the same one for thousands of pages. That’s typical. Most websites use the same CSS sheet for the whole site. Let’s go ahead and take a look at what this means actually. This is the HTML document example that we used in the last chapter, and I’ll clean this up a little bit by taking some of this JavaScript out like so. And as you might remember, of course, this is the page that we’re working with – what it looks like in the browser – and if we want to add some CSS to this, what we can do is I’m going to paste some right below the title tag here. As you can see, I just added a little bit of CSS right here in the head section right below the title tag. And in this CSS – we’re going to go through this really quick – you can see that I’ve added “changeme” which is the ID of our heading tag and I’ve applied the color orange. This is a very basic style sheet that defines the color of this heading tag with the ID of “change me.” So, then I’ll go and save the document, and then we’ll go and reload this in our browser, and we can see the change. It changed the heading tag to orange because we have it listed as orange in the style sheet. This is basically how CSS works. You can edit the styles found here in the style sheet. Any changes– Any style or design changes that you make here are reflected in the browser, it applied to the HTML below. Like I just demonstrated, CSS elements controls different aspects of the HTML document it is associated with. Each element is basically a separate statement that can control different aspects of each page. So, then, why does this matter for SEO? Google and other search engines, they use crawlers. They try to mimic the behavior of users. So, when CSS conflicts with a good user experience, it can cause problems. You’re probably thinking to yourself, “How can something as basic as CSS give the way of a user experience?” Let me show you real quick. Let’s go back to our page here and let’s change this up a little bit. Instead of putting “color,” let’s put “display” like so, and then instead of “orange,” we’ll put “none” like so. We click save like that and then refresh the pageā€¦ See, we didn’t refresh. And all of a sudden, the heading tag disappeared completely. Now, it’s still there. If we look at the source code, hit view source here, we can see that the heading tag is still there. The only difference is that we changed the CSS up here. And so, this is problematic because if your CSS is getting in the way of the user seeing all the content on the page, it can make for a bad experience. And so, for example when we apply the CSS, it made that heading tag disappear. Now, let’s take a look at a more real-world example of why this is an issue. This is Coca Cola’s–This is one of Coca Cola’s websites. It’s actually not a bad site. It’s for product facts. It provides a lot of product information for many of their products. I got to get a shout out real quick. This came to me by Tyler Hermanson. I asked for example of tapped content on Twitter. He sent it to me, so thanks a lot Tyler for sending that in. Let’s take a look at how CSS could be providing a problem for this website. This is a good example. If we click up here in the top, you see our products, ingredient information, and frequently asked questions. Let’s start off with ingredient information right here. First off, you can see that all the content on this page is mostly hidden. It looks like they have your ingredients listed in alphabetical order. If you click each letter, you’ll see a list of ingredients that begin with that letter, and they give a pretty good description of what each ingredient means. That kind of thing. This is a good user experience if you’re approaching the page from this point of view, but let’s say that we’re on Google and we’re searching for a specific ingredient. Let’s say that we are searching for this one right here. Something I don’t even know how to pronounce. “Phenylephrine.” But anyways, let’s say that we were searching for this ingredient like so and we find that page listed on the first results. Now, of course, it’s not listed on the first results probably because of a lot of different reasons, but it is possible for that to happen. This is sort of a moment, an area of disagreement for a lot of SEOs. Some SEOs believe that Google will ignore all this content and some SEOs will tell you that Google will still read this content whether it’s visible or not. I believe that they probably still do read a lot of this content even though they’ve told us in the past they don’t. That’s an opinion you have to make for yourself. But for the purpose of learning SEO for CSS, it’s important to understand that whether or not Google can see the content that’s inside these tabs or not is irrelevant, and here here’s why. Let’s pretend for a moment that Google can read the content that’s in these tabs. Let’s pretend that, for example, because they can read what’s in this “P” element here that this page is ranking for this term. If I want to learn more about how this chemical works with Coca-Cola, then I might be interested in clicking on the page to read more about it. The problem – in fact, it’s right here, Coke Zero product facts – there are other ingredients here listed. The bottom line is that if I land on this page here and I don’t see that query that I just typed into Google, then it’s not going to–I’m not gonna stay on the page. You need to provide all the important

Chapter 3: Title Tags

back to top

This is HTML for SEO Chapter 3: Title Tags. So, in this chapter, we will discuss what exactly is a title tag, why is it important for SEO, and then we’ll review some tips for optimizing a title tag. What exactly is a title tag? Well, the title tag is an HTML element that holds the title in the document and it’s one of the strongest ranking factors for SEO as far as HTML tags are concerned. So, let’s actually take a look at this and look at some examples. Let’s pull up the HTML document that we’ve been working on in this course and, as you can see right here on line 5, we have the title tag. And if we take a look at this page within our web browser here, we can see this is the page. Up here it says “page title.” If we were to edit this and put in something random. It’s lunchtime here, so I’m feeling hot dogs. So, if we put something random in the title tag here, as you see when we reload it, it comes up right here. So, the title tag displays in the browser in the tab section. And then it also is what is used to display in the search results for the title of each search snippet. For example, this query is for the search term “pizza bagel” and we see we have a lot of different, looks like, recipes for pizza bagels. Each one has a title within the SERP. Each one of these titles are taken from the individual page’s title tag. In some cases, Google will replace the title within its search results pages with a title that is more appropriate, that they think is more appropriate, but probably eight to nine times out of ten they utilize the text that’s found within the title tag on the page itself. And so, that’s why it’s so important. So, how do you optimize for the title tags, right? How do we optimize for this tag? Well, first off, we’re going to want to use relevant natural language. This is important, I think, because a lot of people think about the title tag and the content that should go inside the title tag. They oftentimes will just throw a bunch of keywords in the title tag and that actually does not work. Which brings us to our next point: you do not want to over use target terms. So, a lot of times an SEO or someone will try to just jam in a bunch of terms that they want the page to rank for within the title tag, and that can actually cause problems because Google may consider this what they call “keyword stuffing.” They may find it over optimized. So, you should not over use your target terms with a title tag. A big thing with title tags is do not duplicate. This is something that the search engines have always paid attention to. They do not want to see pages on your site that have duplicated title tags. And this is because this is a very quick and easy way for the search engines to identify duplicated content on the site. And so, as a way to mitigate the risk of content being labeled duplicate, you should really not have duplicate title tags. So, it’s very important that every page in your site have a unique title tag. Generally speaking, it’s a good idea to keep your title tags between 30 and 65 characters. This is because – you know, we looked at the search results pages a little earlier for the term “pizza bagel” – if you go past 65 characters, there’s just not a lot of room within the search snippet. And then if you go under 30 you’re probably not putting enough content in the title tag. So, between 30 and 65 characters is the sweet spot. You’re going to want to optimize for click- through rates. What does this mean? Click-through rate is the percentage of people that click on the search result that have searched for that query. So, we’ll look at that in a second. Then, you’re going to want to standardize across the entire site. Basically, this just means is to develop a format for the title tags or a formula for how title tags should work. Before we go any further, though, I want to just touch base on the click-through rate issue here. I want to talk a little more about that. Basically, I mentioned that you really want to try to optimize for click-through rate, and what that means is that you want to try to pick a title for your page that is going to inspire someone to click after they reach the search results. This is important for lots of reasons, but the most obvious is that–Let’s say that you are trying to rank for the term “pizza bagel.” Well, you might get lucky and do a really good job with your SEO and, as a result, rank number one for that term. However, if you’re not that lucky or if you still have a lot of work do for your SEO, you might rank lower on the page. For example, this “Kids-Only Pepperoni Pizza Bagels” from Kraft Recipes. Now, if your title tag is written in a way that inspires people to click on the link, then it doesn’t matter so much if you are all the way down at the six or seven position on the page because you might be getting just as many clicks as, say, someone up here at the second or third result. So, you know, it’s very important to focus on increasing your click-through rates by including a title tag that is relevant and that also inspires clicks. There are some good examples on this page already. As you can see, “How To Make Pizza Bagels.” There’s another how-to right here. How-to right here. How-to content generally gets a good click-through rate. Another common thing we found down here is “Best 25 Pizza Bagel Recipes.” Again, that gets a high click-through rate because you’re showing a large body of content. “25 Different Recipes” right there. “Easy Mini Bagel Recipes.” Easy is a term that usually gets a high click-through rate. Kids-only, that’s kind of different so it might get a good click-through rate. Another one is to include if you have a very popular brand name with your within your industry, it might be to make sure you include that in the title. So, Betty Crocker is probably going to get a lot of click-through rates because of their brand name. Really focus on developing title tags that have high click-through rates. Another thing I want to touch base on is the length. I mentioned in this that you should keep it between 30 and 65 You can’t assume that every user is going characters. Just to point out that, as you see, many of these towards the click “P,” and then read the content top are actually shorter. This one right here from Bagel Bites says, happens. So, if you really want to focus “Cheese and Pepperoni.” That’s the only thing it’s in the title tag. kind of a surefire best bet way to get “Luke’s Pizza Bagel Recipe.” You don’t need to make a very, you know, long title tag. to want to make sure that you’re not You know, keeping it within a manageable kind of length in that the This is probably the biggest entire title can be shown within the search results. There’s no, CSS for SEO. Let’s take a look at some you know, there’s no cutoff here in the title tag. That’s optimize it further. One thing you can important. So, focus on length and click-through rate. Those are very documents to make loading faster. important. And then, also I mentioned to standardize across the entire site. What WordPress website, for example, will have does that mean? That basically just means that I want you to develop a standard site, but then maybe included a bunch of formula and here’s some examples of that. These are some examples of some individual CSS document. It would be standardized title tag formats. A very popular one is the “page title” right to one document so that the server here with we call this a pipe, a page title, and the brand name. The product user only has to make one request name, if this is a product page you use a product name, and then maybe the product Minimize using CSS to hide important category, a pipe, and then the brand name right here. you don’t want to hide content that’s If this is a blog post title, or a blog post, you do a blog post title right content that has key words included in here, then the category that the blog post falls in, and then the brand name. needs to be visible for the user and the The reason that this is kind of helpful and beneficial is that this will page. Do not use CSS to trick users or help the search engines sort of identify a kind of a structure and Basically, in the past folks would architecture to your content because it will know that, okay, this product like links or special content. So, in the here is found in this category. It will apply semantic relevance to, not paragraphs of keyword-rich paragraphs only the product name, but also the product category as well, if you include sections of content, and then use both of these with the title tags. The same is applied for the blog post title. it on the page, you couldn’t see the You know, just to mention what I said earlier in the video, you do not but it had a lot of keywords meshed into want to duplicate terms. For example, let’s say the product name is “pizza That’s a violation. They will they will bagel” right here. If the category is bagel or pizza, but you should probably content specifically for ranking. The leave that out all together. So, don’t duplicate language within the same Some people like to put, what we call, title. And then try to always adhere to some sort of format like so. That is other sections of the site and hide it about it. with CSS. You really should not do that Up next is Chapter 4: Meta Robots Tags. See you then! In fact, you should really only hide things with CSS if you have a very

Code Example:

Chapter 4: Meta Robots Tags

back to top

HTML for SEO. This is Chapter 4: Meta Robots Tags. So, in this chapter, we will be discussing what exactly is the meta robots tags, why is this important for SEO, and then we’ll discuss some tips for optimizing the meta robots tag. So, basically, the meta robots tag is essentially just an easy way to give direction to the search engine crawlers. When a search engine visits your site, it will attempt to crawl or scan every page on the site unless we tell it not to. And so this tag basically tells the search engine crawler what we would like them to do while they’re on a given page, whichever page this tag is located on. So, we’ll give–In this video, I’m going to show you some examples of how to control the search engines utilizing this tag. This tag can get you in a lot of trouble if you don’t use it correctly because it does tell the search engines which pages should not be included in the search results. Let’s take a look at this real quick here. There are two main sections of this tag that you need to be focused on. There is a first section here in our example where we mention “index” right here. This will control whether or not the page is included within the search engines or not. And in this next section after “index” is “follow.” And this will control whether the search engines follow the links found on that page and also whether they apply the full value of those links on to the rest of the site, or the pages that the links link to. So, basically it’s actually really easy to use. So, if we decided that we did want a page included within the search results, then we would just include the index perimeter. In fact, we probably don’t even need to include a tag at all to tell the engines to index a page. But if we were going to, we would use just “index” because that tells the engines, “Hey, go ahead and index this page. Include it in your search results along with the rest of site.” If we, however, decided that we did not want to include the page within the search results, then we would apply a “noindex” instead. So, “do not include in search results” that would equal “noindex” right here, and that would be applied right here in this section here. If we wanted the search engines to follow all of the links found on the page, and then also apply the full value and equity that those links represent, then we would include the “follow” attribute right here within the robots meta tag. However, if we for some reason did not want the search engines to follow the links on that page, or we don’t want those links to provide value, a good example: maybe you might have some sponsored content on a page and some of that content may include links, so to adhere with Google’s guidelines, you should include a “nofollow” here within the meta robots tag. Before I go any further, I want to show you–You know, we’ve gone through the four different options available for this tag. Let’s go ahead and show you what the tag looks like in the wild. So, here is our example again of our HTML page. I’ve included the robots meta tag up here in the head section of the document. As you can see, it says “index, follow”. For example, if we wanted to make sure the search engines do not include this page within the search results, we would just put a “noindex” here. Change that from “index” to “noindex”. And when the search engines see this, they will not include this page within the results, but they will follow the links on the page because it still says “follow”. If we wanted to stop that, if we wanted to put “nofollow” right here, then this directive would tell search engines to no longer include it within the search results and to no longer follow the links found on the page. I’ve included some examples of each one of these here. For example, if we wanted to include a page within the search results, then we would want to include this first one here which is “meta name=”robots” content=”index, follow”. However, if we did not want to include the page within the search results but we do want to follow the links, then we would include a “noindex” tag along with a “follow” directive for the links. There are maybe some cases where we want to include a page in the search results, but we do not want the search results engines to follow the links on that page. Like I mentioned before, this can be because of sponsored content; different reasons. Either way, you want to go with “index, nofollow”. And then, there may be some cases where we want to not include the page within the search results and then also we do not want Google to follow the links found on the page. And when that is the case, then we will want to put a “noindex, nofollow”. An important point to mention – I’ve seen this a lot – in some cases, a webmaster will want to remove a page that’s already existing and they will attempt to block the page from being crawled within robots.txt file. This is sort of unrelated to this, but again this is the most – what we’re looking at right here in the robots meta tag – this is the best way to be de-index a page or to remove an existing page from the search results. I hope that this chapter has provided some guidance for the for the meta robot tag and I’m looking forward to talking with you in Chapter 5 about the Meta Description Tags. Talk to you then.

Example Code

Chapter 5: Meta Description Tags

back to top

This is HTML for SEO Chapter 5: Meta Description Tags. In this chapter, we will discuss what exactly is the meta description tag, why is it important for SEO, then we’ll talk about some tips for optimizing the meta description tag. So, the meta description tag is a HTML tag that provides a brief description about the page. And as you can see, it’s very basic: meta name=description, and the content is a brief description about the page that the tag is found on. I want to go ahead and show you some examples of this, though, before we go any further. Here is an example of the tag within the page that we’ve been working on within this course. On line 8, you can see the tag, its meta description, and then the content. This is a brief description of the content of this page. I like to keep my meta description tag near the meta robots tag because it’s easy to identify, but it always needs to be within the head section of the document. Within the search results, the meta description appears underneath the page URL. For example, back to the search result “pizza bagel,” on the second result we see cheese and pepperoni from Bagel Bites.com. And then underneath that it says, “a bite-sized pizza classic.” This is coming either directly from the meta description tag or from the page itself. And that’s important to mention is that most of the times Google and other search engines will utilize the meta description tag to fill in this content right here in the results page. However, in some cases, they may pull content directly from the page itself. Which is why if you want to utilize the meta description tag to put content here, it’s important to utilize your target keyword at least once within the description, and that should help get the meta description present on a search results page. So, how do you optimize this? Well, we just mentioned including the right keywords within the content. That’s one good thing. But also you’re going to want to maintain content between 70 and 156 characters for the description tag itself. Use engaging content to increase your click-through rate. So, we talked earlier about the title tag and we talked about how to board to increase click-through rate using the title tag. It’s just as equally as important to do that with the meta description tag, so you should utilize this area to provide some persuasive copy for people to click the search result and to view your page. It’s very important that you do not duplicate the content within the meta description tag. This means it’s important that each page on your site have a completely unique meta description tag and this is important because we believe that Google likely looks for duplicate meta description tags as a way to identify duplicate content of a site. So, it’s very important that you use very unique content within your meta description tag. And last, but not least, make sure you do not use quotation marks. Quotation marks can break the description tag. It can often confuse the crawler and think that, well, the tag is ended a lot sooner than it has. So, make sure you do not include quotation marks in the meta description tag. That is it for this chapter. Next chapter is Chapter 6 and we’ll be talking about canonical tags, and I will see you then.

Code Example

Chapter 6: Canonical Tags

back to top

HTML for SEO Chapter 6: Canonical Tags. In this chapter, we will discuss what exactly is a canonical tag, why is it important for SEO, and tips for optimizing the canonical tag. So, what exactly is the canonical tag? Well, the canonical tag tells the search engines which version of the URL that the page is to be displayed is the correct canonical URL. Now, I’m sure you’re wondering, “What exactly is a canonical URL?” That’s a very good question. So, the issue of canonical URLs and canonical tags is very important and it solves a very big problem for SEO. So, let’s get started and take a look at what this means. As we see, each one of these URLs listed on this page is for the same exact page. We can see that each URL varies a little different – a little bit different format or different variation of the same URL. Even though we can see that this is the same exact page for each one of these URLs, a search engine might not be able to tell the difference between these these URLs. And so, what the canonical tag does is it tells search engines which version of the URL we would like to choose to be our canonical version of the URL. And the reason that’s important is because it combines all of the inbound renting factors and all the other aspects of SEO from all these different URL variations. It combines them into one single entity. So, therefore, if a bunch of links are pointing to this version here at the bottom right here and we’ve chosen that this version of the top is going to be our canonical URL, then all of the links pointing to this point at the bottom will be applied to the one at the top. And the same is applied for all of the other different variations found on the page. Now, let me show you how this works. A lot of people might ask themselves, “Well, why can’t we just forward the different variations? Why can’t we just pick one canonical URL and then just use the server redirects, or other types of redirects, to redirect back to that one version?” And the reason is because it is impossible to anticipate all of the different variations of the same URL. For example, this variation right here: example.com/pizzabagel and then there’s a perimeter at the end called “source=twitter.” A lot of social media websites and other third party platforms, sometimes content management platforms, will add their own tracking perimeters at the end of a URL. And so, this is just one example of how any perimeter or any additional string of text can be added to the end of the URL. And so, to anticipate that the canonical tag is used to strip away anything that’s included at the end of a URL that should not be there. For example, this URL: example.com/pizzabagel/source=twitter. For this URL here, this tag would be placed in the head section. And by doing so it tells the search engines: Hey, ignore this tracking perimeter at the end here and only apply any links or any inbound signals to this URL up at the top. Only apply those to the canonical version of the URL here. Let’s take a look real quick at where this tag is applied. As you can see, we place it here in the head section of the document. I like to place mine near the meta tags just so it’s easy to quickly find. Let’s go ahead and take a look at some tips for optimizing this tag further. Some things to think about is that obviously you only want to include the canonical version of the URL. So, choose which version of a URL you want to be the canonical version and apply it in there. Do not pull the full GET request. So, before when I showed the different variables at the end of the URL, different tracking codes, etc. that whole process is called a GET request. It’s part of the HTTP protocol. You should just not include the full GET request. Which basically just means only include the URL that you want to be indexed without any perimeters attached to it. Use absolute URLs and not relative. So, a relative URL is essentially a place or a location on the internet that is relative to your own. For example, if we are on a page like we saw before about pizza bagels– Then if we’re on this pizza bagel page here and we want to link to another page, say something else, then we don’t need to include the domain section of the URL. And if we don’t include it, then that’s called a relative URL. It’s important, though, when we’re using canonical tags to use absolute URLs which means the entire URL itself, not just what happens after the domain name. And then, furthermore, you’re going to want to include the correct protocol which is the HTTP. If it’s a secure URL, then it would be HTTPS. And you’re going to want to include whether or not it’s a www or a non-www. Again, it’s very important that the URL found within the canonical tag is the canonical version of the URL. So, all of these tips here are tips to make sure that that happens. That is it for Chapter 6. Up next is Chapter 7 where we will talk about heading tags. Thanks so much.

Example Code

Chapter 7: Heading Tags

back to top

HTML for SEO Chapter Seven: Heading Tags. So, in this chapter we will discuss a heading tags. We’ll talk about exactly what heading tags are, why are they important for SEO, and we’ll talk about some tips for optimizing heading tags. So, what exactly are heading tags? Well, heading tags are HTML elements that contain the main headings on the page. So, a lot of times this will mean a blog post title or a headline. Let me show you some examples, though, real quick. Going back to the page that we’ve been working on for this course, I’ve included the h1 tag which we had at the beginning of the course, the h2 tag, and h3 tag. So, this is basically how the hierarchy of heading tags work. I think they can go over to h6. But this is how they’re created in the code. And then they look like this. They look like this right here. So, this is what the headings look like. As you can see, this is an h1 heading, an h2 heading, an h3 heading. And as you can see, the h1 is bigger, the h2 was a bit smaller, and the h3 is below that. So, a good way to think of this is this is headline number 1. This is a sub headline. So, maybe a section of this first one. And then the h3 is even smaller than h2, and it might be a subsection of the h2 section. And so, a good way to think of this is that heading tags can fall within a hanging hierarchy where h1 is the top of main heading and then everything below it are subheadings or subsection headings. If we were to take a look at an actual example–So, for example this is my website, HallAnalysis.com. This is a blog post on our blog and, as you can see, “Google Is Testing Autoplay Videos In Search Results.” This is a heading tag right here, so that’s h1 of for this tag right here. Let’s take a look at some tips to optimizing these tags. Obviously, you’re going to want to use relevant terms. So, Google does look at heading tags for semantic content. Historically, they’ve always kind of viewed the h1 tag as being more authoritative, but again you only want to use these relevant terms within the heading tag in order to make sure that those terms are communicated correctly. You want to use– Try to use no more than one of each per page unless there is a logical reason to do this. So, what I mean by this is that, you know, if you’re using it on a blog post, then there should really only be one h1 tag that should be the blog post title. If you are viewing a series of blog posts, like on a blog post archive page, then you can repeat the heading tag that makes logical sense because there’s more than one headline on the page. However, if there’s only one headline, then you need to only utilize one heading tag or subheadings or subsection tags. Do not use as a design element or logo holder. I see this a lot. So, a lot of times I’ll see a web designer will put a h1 tag in the heading, or the head section of the page, to hold the logo of a site. This is not a good idea. This can confuse the search engines because the search engines will identify that h1 tag and then look for content within it and not see content, see an image, and not fully understand the content of the h1 tag. So, try not to include a logo inside the h1 tag. Include only text. Generally speaking, you’re going to want to use over 70 characters. It’s generally thought that a heading tag under 70 characters doesn’t contain enough content to provide value, so try to go over 70 characters. And you’re going to want to follow the logical page hierarchy. So, you noticed before how I showed you that an h1 tag should be the main heading of the page, and then h2 and h3 and h4 – those are all smaller headings that can go underneath the subsequent heading that came before it, so treat your heading tags like a hierarchy and use them in a hierarchical order to make sure that everything is being displayed correctly. Otherwise, the engines might get confused with how you’re utilizing the heading tag. Up next, we will be talking about the Rel Next and Rel Prev tags in Chapter 8. I look forward to talking with you then.

Example Code

Chapter 8: Rel Next/Prev Tags

back to top

This is HTML for SEO. Chapter 8: Rel Next/Prev Tags. In this chapter, we will discuss what exactly are these Rel Next/Rel Prev Tags, why are they important for SEO, and then some tips for optimizing these tags. What exactly are these tags? What does this even mean? Basically, what we’re talking about here is an HTML element that signals that a specific page is a part of a series of pages. We’ll take a look at an example. I’ve included some code here, but before we get into that let’s look at an example here. If we go back to my website, this is the blog section of my website and, as you can see, we have a series of posts listed here with the post heading, a post snipped, and then a “read more.” This is typical for how blogs are laid out. At the bottom, though, we see that this page represents a series of pages of different blog posts. There’s a total of nine pages of blog posts here. This type of navigation right here is called “page nation” and it just simply means that we are allowing for a series of links that point to individual pages within the same collection. So, it’s one, two, sometimes it’ll say three, four, but it always says next page or whatever. This tag that we will be discussing today is designated for these types of pages that fall within a series. For example, page 2 here falls in a series of pages which will list blog posts on my blog. Why is this important? How does this tag actually work? For example, let’s say that we’re on page 3 of our blog listing. We want to tell the search engines that this page 3 that they’re on is part of a series of pages, and so these tags, the Rel Prev and Rel Next tag, tell the search engines which page comes before and which page comes after in the series of pages that we’re currently looking at. So, the way that is this happens is that it applies a relationship attribute to this link tag. Whenever you see R-E-L in HTML, that stands for “relationship” and it is a place where we include the relationship of this page to our existing page which is page 3. For example, on page 3, the previous page within this series, the relationship Rel Prev, the previous page is page 2, and so the next page within this series will be Rel for relationship, “next” the next page is page 4. This is important because it tells Google that all of these pages within the blog are part of the same series and it will consolidate all of the ranking factors and power associated with these pages onto the the main page itself, which would be the main blog page. Let’s shows some more code on how to execute this. Here, we’re back at our HTML example page. I’ve gone ahead and written out the Rel Prev and Rel Next that we had on the last screen. Again, this is for page 2, so the previous page would be page 2 here. The next page will be page 4, and you are going to want to include page 3, which is the existing page that we’re currently on, you’re going to want to include that within the canonical link. We talked about canonical tags earlier in this course. If you skipped that chapter or you need a refresher, please go back and watch the canonical tag video. But what’s important here is that we’re including the correct canonical URL within the canonical tag. We’re then including the URL of the page that came prior to the existing page within the Prev section and then the one that comes next in the series within the Next link here. What are some examples on how to optimize these pages for SEO? First, you’re only going to want to use these pages that are in a series. Do not place just some random page that you think might be next or a page you think that the user might have previously visited before they got to the current page. That’s not how this exists. This only applies to pages that are found within a series of content. So, this can be a blog post like I just showed you. It can be a listing of products. Sometimes products will be listed out among four or five different pages. That’s fine to include here. Any large piece of content that breaks up in to a series of pages should be utilized– These types of tags should be utilized then. Use only the canonical version of the URLs for these tags. That seems obvious, but I have to say, because that is very important, do not use any type of the URL that is not the canonical version. To review what the canonical version of a URL is, go back to our chapter on canonical tags and watch that video, and that should give a good explanation of what I mean by that. This does not work well with JavaScript or AJAX. For example, a lot of times websites will display a series of pages but then the navigation to explore those pages are piped in through AJAX or JavaScript. This is seen a lot of times with photo galleries or slideshows. It’s important understand that this tag needs URLs that you can place inside of them that respond with a static 200 response code, which basically means that it’s important that the URLs that you place within these tags are not dependent on JavaScript. Make sure that you’re not using JavaScript or AJAX to advance to the next piece of content within the series. If you’re doing that, then this is not going to work. These tags are not going to work. Just remember to use a standard static HTML with these types of tags. That is about it for this chapter, but we will be covering structured markup in the next chapter. Admittedly, this chapter was was pretty short, but the next chapter, Chapter 9, will promise to be a rather long chapter because we have a lot to cover. That is structured markup in Chapter 9, and I look forward to talking with you then.

Code Example

Code for http://example.com/page/3/

Chapter 9: Structured Markup

back to top

HTML for SEO. Chapter 9: Structured Markup. In this chapter, we are going to discuss what is structure markup, why is it important for SEO. I’m going to talk about the differences between RDFa, microdata, and JSON linked data. And to be honest with you, we’re not going to discuss everything that has to do with structured markup, and the reason is because structured markup is a very big topic. It can be done in hundreds of different ways and it really deserves its separate course altogether. And, because of that, after this course is finished, I will be developing another course completely reserved for the topic of structured markup. However, I did want to cover it briefly in this course because it does deal with HTML for SEO. When the course for structured markup is released, you all will have an opportunity to get access to that course at a discounted rate because you’ve already purchased this one. But for this course, we are going to discuss some of the main topics and ideas involving structured markup, and that’s what we’re going to do in this chapter. So, what exactly is structured markup? Basically, it’s a collection of special markup or HTML and JSON that is designated by the search engines to communicate important information from a web page to the search engine. You might be wondering what is–well, how is this important for SEO? What exactly does that mean? Let me just show you what we’re talking about here. If we go to Google and we do a search–this search here is for the term “hot dogs,” one of my favorite things to eat–we’ll see that the search result page here has lots of different items of information. You can see that we have a local map here with certain results from local companies. To the left over– To the right over here, we have a section about the hot dog from Wikipedia, some Nutrition Facts, and then the SERPs, or the results, below all of this of what you might typically find in a Google result. The difference, though, is that you can see there’s a lot more data here. And, for example, down here where it says “KC’s Hot Dogs”–this is actually one of my favorite hot dog places–you can see it has a rating of 4.9. Now, Google extracted the data for this section right here in the SERP from structured markup, and this allows for websites to include these types of data points within results. In some cases, Google may be using structured markup to populate this right-hand panel here. For example, this data came from Wikipedia. It’s likely that Wikipedia is using structured markup for their hot dog page, and then again the Nutrition Facts come from the USDA. It’s likely the USDA’s website is also using structured markup and that’s how Google is able to pull these data points. There’s lots of different types of structured markup because Google likes to acquire lots of different data points. We’re going to show a couple more to get a feel for what this actually means. This next search here is the cast of The Game of Thrones which is one of my favorite shows. As you can see here at the top, we have a list of the cast members in different cards. You can click on each one of these and get more information about each cast member. It’s likely that these data points– Google pulled these data points algorithmically using structured data which means they found web pages that had information about each one of these people and they pull that information off the web page using structured data. We scroll down a little further, we can see more information about the show. Some of this is coming from sites like Wikipedia. Others are coming from sites like the Internet Movie Database, but basically what this is, this is pulling more information about the show. As you can see, the ratings here from IMDB, from TV.com, and Rotten Tomatoes. Those have been all pulled from those websites using structured data. So, a good way to think of structured data it’s basically like special HTML that helps you share important data points that Google can display within their search results. Another example here is for the best Wi-Fi router. So, for different product searches, this can be very helpful. And you see here we have best Wi-Fi router as the query. If we scroll down a bit, we can see this really cool result here that says “best wireless routers August 2017” and we’ll see that it has a rating of 5 – 95 votes. That’s good. We can see this website is displaying a good rating, and then you can even see it said jump to Wi-Fi router buying guide which means that there’s going to be a different section on the page that’s all about a buying guide for Wi-Fi routers. This is also coming through on structured markup. Let’s take a look at one more example. This is a local SEO search query. You can see here it says “Colombia, South Carolina used cars.” That’s where I am right now, and we have the typical local SEO pack right here. But then you see down here on the first result, you see Carfax. I think you see used cars right here and that’s from what’s called the breadcrumb structured markup. We’re going to take a look at examples of all of these different types of structured markup right now. The best way to learn how to write this type of HTML is to go to Schema.org. Schema.org is a collaborative effort by multiple search engines to include a semantic markup or structured data into web pages so that the web search engines can extract this data. As an example, we’ll take a look at the breadcrumb structured data schema. If you come down here to the bottom, we can see markup starting without any breadcrumbs here or without any structured data. This is basically just simple links that are used as navigation. If you want to include structured data, there are three different types. There is microdata, RDFa, and JSON-LD. And so, basically, you have to choose which type you want to use to include into your system. The easiest is probably JSON-LD. We’ll go through each one though right now. Microdata is the beginning here and you’ll see that when we include microdata markup to our original markup, is the original markup here, there’s a lot to be added with microdata, and we start off by telling the search engines that the item type is a breadcrumb list. We want to tell the search engines, “Hey, listen, this is a list of breadcrumbs.” And then on the first breadcrumb, we want to add an item list element and an item scope and item type. And for the item type, we want to list the list items. And then for the link itself, we want to put an item prop which is item property = item, and then we include a URL directly to the link in the breadcrumb, and then we include another wrapper around the anchor text and that says item prop name, and then one more meta item prop for position because we know that this is the first spot within the breadcrumbs. Now, when we execute this type of structured data, hopefully what we’re looking for is we’re looking for a example like this right here. As you can see: Carfax – Used Cars. That helps your users and the SERPs kind of see that this is a sub page of Carfax and it’s all about used cars. That’s what the breadcrumb microdata looks like. A little bit easier implementation for breadcrumbs is RDFa. It’s a little bit less code, a little bit less intensive, and basically you’re doing the same thing. You’re letting the crawler know that this is a breadcrumb list. You’re letting the crawler know that this first item is a list item, it is a web page and the anchor text has a name, and the position is one. The first two that we just looked at is microdata and RDFa. Those are kind of complicated. A much easier way to implement structured data is by using JSON linked data. Now, JSON is a type of JavaScript that’s utilized to organize data. Google and other search engines have adopted it and have kind of rebranded it as JSON linked data. In this example, we can see that this is a bit of JavaScript that we place in the head section of the document. As you can see, the type says breadcrumb list right here. It says item list because that’s the next node within the JSON. The first item is a list item, the URL, and the anchor text. This JavaScript cannot stand in replacing your HTML for breadcrumbs, but it can be included in the head section of the document so the engines can crawl it and immediately get this information. Let’s take a look again at that. Like I said, executing this type of markup will help you get this type of result right here with the used cars. That does help occasionally. It can also help you with developing these jump links. I’m trying to find– Here it is. “Wi-Fi Router Buying Guide.” The bread crumb markup can also help develop those types of jump links as well. Let’s take one more example here before we go back. This is a recipe and so this is a structured markup specifically arrested for recipes. If we scroll down towards the bottom here, we can see an example without markup. Let’s start with that markup. This is “Mom’s World-Famous Banana Bread Recipe” and this is just a basic recipe written without any markup attached to it. If we take a look at microdata, if we go through the same process we did with the bread crumb list, where we define the item type as a recipe, we define the item properties, various nutrition, cook time, prep time. This type of markup will be different for each recipe because maybe you’re not cooking, maybe there is no cook time, but you might want to include a prep time. There’s different ways to do this, but it’s really up to how your recipe should be written. RDFa is a little bit more simple, but still pretty complex. You need to add a “type of” which is recipe, a property of name, a property of author. Of course, Google recommends that you utilize JSON linked data. I think one reason is because it’s a lot easier to implement and so, with this example, we can see a recipe schema written in JSON linked data. And this example should be copied and pasted into the head section of a document. I’m going to go ahead and do that now, copy the JSON linked data like so, and go to our HTML document that we’ve been using throughout this course and paste it into the head section. When I say the head section, I mean the HEAD SECTION where it says “head” here. Paste again just like so. Now, if this recipe is found on the page and Google crawls this page, it will be able to extract all the information about the recipe very quickly and they will include it in the results. Let’s take a look real quick at some tips for optimizing this type of structured markup. Structured markup is utilized for nouns which means it’s people, places, and things. These can be proper nouns or just normal nouns, but fundamentally if the topic of a page is a people, place, or thing, then you can utilize structured markup to include this type of data into the more rich search results. Like I mentioned before, a JSON linked data is preferred by Google and it is actually a lot easier than doing full HTML. Microdata and RDFa is embedded in-line which means that you want to edit your existing HTML to include microdata and RDFa if that’s what you choose to use. However, JSON linked data needs to be embedded in the head section of the document. This type of markup does not work very well with JavaScript or AJAX. We mentioned in Chapter 1 that JavaScript and AJAX can have considerable influence over the DOM of the page, and because of that we don’t want to include a structured markup in that process. We want to make sure that structured markup loads initially and that Google is able to crawl it fully without having to wait for JavaScript to load after. Structured markup must reflect the content on the page. Therefore, if you include JSON linked data for a recipe, then every element within that recipe markup needs to be included on the HTML page itself and visible to the user. In the past, Google has sent out manual warnings and also some manual penalties as it relates to utilizing structured markup that doesn’t reflect what’s actually on the page itself. This is about it when it comes to structured markup. I know this was very brief and we could talk all day about this because there are literally hundreds of different types of structured markup out there which is why I’m developing a separate course completely from this one just to do with structured markup. Thanks so much for listening to this. Up next is Chapter 10 where we discuss links.

Chapter 10: Links

back to top

Okay! This is HTML for SEO. Chapter 10: Links. In this chapter, we are going to discuss what are links and how do they work; why are they important for SEO; and then some tips for optimizing links. When we talk about links, links are talked a lot about in SEO. For this video, for this chapter, and for this course, we’re only talking about the HTML that makes links, and that is because the topic of links in general is very large. It’s a very big issue within SEO, but we’re just going to talk about the HTML that surrounds links. We’ll talk a little bit in this chapter about why links are important, but mostly we’re just going to be talking about how to optimize the HTML that makes a link. As you can see, I have an example link written out here in HTML and I’ve broken each section of the link tag into color-coded areas which are the three most important areas of the link tag for SEO. And we’re going to talk about each one of these areas in this video. But before we do that, I would like to just spend a minute to talk about the significance of links in general but for SEO. Like I said, this topic is very big, very complex, and so to fully understand the impact that links have in SEO, you really should do much more research outside of the context of this course. But just for this chapter, we’re going to talk about how links work and what and why they’re important in a very brief way. It’s important to remember that links are considered one of the top three ranking factors. Google has gone on record and said that links are somewhere within the top three ranking factors. It’s my belief that it’s likely within the top two actually. I really think links have a overwhelming significance for SEO, and it’s been like that since the very beginning. Anchor text provides semantic relevance. What that means is–and we’ll talk more about anchor text in a little bit in this chapter but–essentially when a search engine is trying to decide which keywords and terms a page should be ranked for, they may pull out some of the terms and keywords that are used in anchor texts that point towards the page in question. And then finally, links help the search engines and their crawlers discover new content. When content is linked together, the crawlers are much more able to find it and make that content more discoverable, as we call it, to the search engines. I’ve put together a little diagram here on this slide to kind of illustrate how links and how Google specifically may judge links. This is a very basic overview of Google’s original backlink algorithm, and it’s still the basis for how they understand links to this day. I’m going to give you a very quick overview of how this algorithm works. It’s important to remember that, realistically speaking, Google’s backlink algorithms are very, very complex and this is just a very basic overview of how link equity works and how Google typically analyzes links on a very broad level. Basically, we can start off by assuming that every page on the internet has a value of 1, or some inherent value. They may use a different grading system or they might have a different way of calculating the value of a page, but the premise is that, in the beginning, all pages are created equal and they are starting off with a value of 1. And for our demonstration purposes, we’ll just use integers for these values. As you can see, these pages out here they are all valued at 1, and then each link that comes off of these pages carries the same value the page has. As you can see, this page has a value of 3 because the initial value was 1 and then there were two links pointing at it, both from value of 1 pages, and as a result the resulting value for this page would be 3. Now, this page then has two outbound links on it as you can see, and because there are two outbound links on this page the value for each is split so the value for each of these links is going to be 1.5. So, therefore, this link right here carries 1.5 because this page already had a value of 1. The value is now 2.5 because 1.5 from this page that says 3 down to a value of 1 makes 2.5. Again, this link here is another 1.5 and it points to our center page here which has a value of 6 because many pages link to it. So, this is 1.5 and then this would be the 2.5. That would be 3.5 plus another half a page because this is has two links on a value of one, so that’ll be 0.5. So, that would be around 3 or 4, and then another two that’ll be 5 or 6, and then one more would be 6. So, the resulting value is 6 because of all of these inbound links pointing at it. A good way to just understand how this works is basically to understand the full value of the page divided by the number of outbound links on that page, and that’s a good way to understand how, what we call, link equity flows from page to page. This is a good example of how Google likely judges backlinks on the internet, and in pages that have the higher value are the ones they’re gonna rank higher. For example, in this corpus here, this page number 6 would rank higher than the rest because it has more link equity pointing to it. This one right here has a link equity of 3 would probably be next. Then 2.5 and then 2 and then all the 1’s below that. You can see now how links can play a very important role within SEO because they do provide authority and trust throughout the internet through this type of ranking algorithm. That’s basically the main significance for links within SEO. But today, in this chapter we will just be discussing how to optimize the HTML for these types of links. Like I said before, I broke down the link example into three sections. The first section we’re going to take a look at is the robot directive and this is the the part of the link that allows you to declare whether or not you want the link to be followed or no followed. And what does that mean? Essentially, what we want to know here is we want to know if we want a link to be considered within this algorithm that it needs to be followed. If for some reason we do not want a link to be considered in this algorithm, then we’ll apply the “nofollow” tag. Let me show you how that works. As you can see here, we have the beginning of the link rel relationship “follow”. Now this first directive here where it says “follow”, this is actually the default setting, so if you do not place any robot directive here for a relationship, then it will automatically be followed. So, this is not really needed at all. I just put it here as an example. If you, by chance, did not want the link to play a part in the algorithm that we just looked at, then you would apply the “nofollow” relationship tag down here. And that tells the search engine that, “Hey, listen, we want you to ignore this link and not utilize it within your ranking algorithm.” Now, you might be asking, “Well, why would we do that? What’s the point of no following a link?” Well, the point of no following a link is that, for example, Google does not allow within their quality guidelines for links that have been generated because of some sort of financial gain. That’s called buying links. And so, Google really urges you if you are somehow giving away a link in exchange for money– it could be through the use of an advertisement, it can be a sponsorship, it could be lots of different ways that you might end up giving a link to someone in exchange of some sort of money or monetary value–if that does occur, you need to use the “nofollow” robot attribute. And that just tells the engine, “Hey, listen this link is paid for and you should not allow this into your ranking algorithm.” This is sort of an issue of debate, but I will say if you do not include the “nofollow” relationship tag on links that you acquire money for you, you are violating Google’s guidelines and you likely will be penalized. That’s a very big penalty, so be careful if that happens. Otherwise, you likely won’t need to use the “nofollow” tag on links very often. Sometimes, I guess you might use it to control the way that the search engine crawls the site and that’s an option, but otherwise you should probably stay away from no following links unless you have a very specific reason, and that reason is likely that you sold a link or that the link is part of an advertisement, or that you’ve acquired some sort of monetary value as a result of giving that link away. And if that’s the case, it really does need to be “nofollow”. So, that’s basically the robot directive. Let’s take next a look at the target URL. The target URL is essentially the actual URL that the link goes to, and it’s found here in the middle of our link example. It starts off by the href attribute, and this just basically stands for hypertext referral. This is going to be the full– You want to put the full absolute URL path here within the h refer attribute. And the reason is because in the sort– This is actually a a difference in opinion among many SEOs. This is somewhat a controversial topic, but the question often arises should we use the full URL path within the target URL or should we use what’s called a relative URL. So, this first example is an absolute URL path because it shows the entire URL and, in many cases, we call this a canonical URL here. But again, if you are linking to a page on your same domain, then you can use a relative URL like so. A relative URL is simply just a URL path as its relationship to the root of the domain, the beginning of domain, and this works. This is fine. However, in my opinion, it does not give the search engine crawler enough direction in order to follow the absolute URL path. And the reason this is important is because occasionally the crawler may access the site from a version of the URL that is not the canonical version. So, for example, it might access the site where there is a “www.” here or it might access the site on a secure HTTPS URL, and that’s fine except if there are no redirections in place or if there are issues with the URL handling, then usually a relative URL will cause problems for the crawler because the crawler will end up crawling pages that were never intended to be crawled. It’s kind of smart to use an absolute URL path that follows the canonical version of the URL. We discussed canonical versions of URLs in a chapter prior in this same course. So, if you need a refresher, go back and watch the chapter on canonical tags, and that talks about what a canonical URL is. But again, it’s important to use the absolute canonical URL path for the target URL within links. The next aspect of a link that needs to be optimized is the anchor text, and the anchor text is essentially just the words that you see on the page that are linked to. And we’re going to take a look at an example of this actually right now. If I go ahead and copy this part of the link right here just like so and then we’re going to open up our HTML page that we’ve been messing with in this in this course. I put some dummy text in here just as an example to show you what this looks like. But let’s pretend that we want to put a link here in the text and we want to put it right here where it says “good text”. So, we’re going to paste that link that we just copied. Paste it right here. I’m going to go ahead and put the end tag here just like so. And now we have a link tag in a paragraph. Let’s go ahead and save this now and take a look at what it looks like. Refresh the page. And we can see now that there’s a link where it says “good text.” The words “good text” are the anchor text for this link. Right here, it says anchor text just like so, and when it is all said and done it looks like this. And so “good text” is our anchor text that we used right here and this is important because the search engines utilize whichever words we have found in a text like so in the anchor text. This is called anchor text. They utilize these terms to apply semantic relevance which is why the words that you utilize as the anchor text is very important. Because, say, for example, you would like to rank for the words “tennis shoes,” then if you use tennis shoes here in the anchor text in many of the links, then Google will start to apply the term tennis shoes to this page for ranking purposes. However, it’s important that the anchor text you utilize does follow natural language and that you don’t overuse anchor text in excessive format because you can be penalized for doing that. Let’s take a look at the example again. You can see that the anchor text is embedded right beside the text of a document which is why it needs to be really just natural language, and you really shouldn’t try to emphasize too many keywords inside the anchor text because it will sound kind of nutty and crazy. So, essentially that is the three most important aspects of optimizing links. Some final tips for optimizing these links: You should really only use the “nofollow” robot directive for very specific reasons. Use absolute URL paths for target URLs. Again, that means to use the entire URL, not just the relative portion of it. Use the entire canonical URL for the target URLs, and then use natural anchor tags that fits within the context of the document to provide for semantic relevance. Those are the three top tips I have for links and up next is Chapter 11: Images.

Example Code

Chapter 11: Images

back to top

This is HTML for SEO and this is Chapter 11: Image Tags. In this chapter, we are going to discuss the basics of image search; we’re going to talk about what are image tags and how do they work; why are they important for SEO; and some tips for optimizing image tags. To get started, it’s important to understand that SEO for images is a little bit different than typical web pages. And so to take a look at how it’s different, I want to look at what an image search results page looks like. When we talk about image SEO, we’re talking about the image search section. The typical web when we do a search on Google–say for example tennis shoes–it pulls up these results here, but if we click on images it pulls up a list of images, and these images are taken from web pages that are optimized for the term “tennis shoes.” However, the HTML used to display these images on each one of their pages can also be optimized and utilized for ranking high in these types of search results. And so that’s what we’re going to talk about today, is how to optimize the HTML for images for them to perform well within this type of image search results pages. Let’s get started here. Basically, there are four specific sections to optimizing the image tag. First, you want to optimize the file name. We’ll talk about what that means in a minute. Then, you’re gonna want to optimize the URL, optimize the alt text–we’ll talk about what alt text is in a moment–and then afterwards you’re going to want to optimize all the content surrounding the image itself. To get our hands dirty, let’s take a look at some sample code here. We just talked about on the previous slide those four sections, and I’ve gone ahead and written out a image tag and HTML here and I’ve split up this tag into the four sections that are important to optimize images and color coded them. Let’s start off with URL right here. Essentially, for image SEO, it’s important that your images stay on your same domain name. For example, if your website is example.com and you are trying to rank a image of a beach ball, then you’re going to want to keep that image file on your own website. In some cases, you might use a content delivery network to host your images–and I’ll show you how you can utilize that as well–but ultimately you want to keep the image on a URL that’s on your domain. And then, if you’re able to optimize the URL by including maybe some keywords that are related to the image that’s fine as well, but it’s not as important as just keeping it on the same domain as your website. The second section of optimizing the image tag is, of course, the image file name. For example, if you are able to give your image file a semantically relevant name– For example, if the image is of an image of a beach ball, then we want to name the file of the image “beach ball” and you want to stick to the same SEO best practices that you use for URLs. Make sure that the image file name is lowercase, that there are no spaces, instead you’re using hyphens, and that you don’t go overboard with the file name of the image. Try to make it semantically relevant of what the image is without adding too much text here. The third section for optimizing image tags is the alt text, and alt text stands for alternative text and it is historically used for users that have vision impairments or are unable to use a visual based web browser. The alt text provides an alternative description for the image within the HTML so that when a piece of software called a screen reader– which is an accessible piece of software– when it scans the pages, it can read what is ever in the alt text which is why whatever you place inside the alt text attribute right here should be semantically relevant to the image itself. This is important for SEO because search engines tend to use the words found within this alt text attribute to place semantic relevance on the image itself. But again, you want to optimize this. You want to make sure that your alt text is suitable for human beings to read and describes the image clearly using semantic language so that the search engines can pick up keywords found in the alt text and apply it to the rankings for this specific image file. The last section in optimizing images for image search is to include semantic relevant content within surrounding content. For example, if we want this image to rank for the query beach ball, then the paragraph found right after the image says, “Beach balls are a great toy for kids ages 4-15 at the beach.” Now as you see beach balls is located right here in the beginning of the paragraph which means that on the page it should be very close to the actual beach ball image. If you are able to include descriptive text or content near the image tag on the page, it will greatly and significantly help apply semantic relevance to that image. Let’s take a look at some tips for optimizing these image tags. Again, you’re going to want to use alt text. We just went over that. This is alternative text. You’re going to do this specifically for screen readers so that people with vision impairments can be able to hear the description of whatever the image is. But then you’re also going to want to optimize this alt text for search engines and allowing the search engines to get semantic value and keywords out of the image tag. You’re going to want to make sure to include any text in the image in the alt text. For example, some images may actually have text written on the image itself and, of course, the search engines can’t read that text, so you’ll need to provide some alt text on the image tag so that the search engines can read the text that’s on the actual image itself. That’s very important otherwise any text that are found in an image will not communicate over to the search engines. If you’re using a content delivery network, you’re going to want to make sure that you mask the URLs with a sub-domain. Earlier I mentioned that one of the first elements to optimizing the image tag is to use your own domain name in the URL. That’s very important. Some people, however, use what’s called a content delivery network which means that they may be forced to put their images on a network that is not related to example.com. If that’s the case, you may want to set up what’s called a sub- domain for your content delivery network. And essentially what that is is that allows you to mask the external URL that’s holding the image and to apply a sub-domain such as CDN–that’s typical– content delivery network, and let this domain name mask your content delivery network URLs so the engines assume that the image file is located on your server. If you have trouble setting up your own custom sub-domain for your content delivery network, I advise you talk to the folks that run your content delivery network and they can help you set up your own domain name like this or sub- domain name like this. The last tip is to optimize the surrounding content. This means including similar keywords or descriptions about the image within paragraph content, around the image, or near the image as well apply more semantic relevance to the image as it is shown within the search results. Well, that is the last part of this video course and I really appreciate it if you’ve been following along up until this point back and back, then this is of course the last chapter. However, you can always review this course as you see fit whenever you like and just look back to the chapters in the past. Thanks so much and I hope to talk to you soon. Bye-bye!

Example Code

Resources: