Understanding HTML and CSS for SEO
As individuals start entering the field, they frequently wonder how much code they actually need to know to be an SEO analyst. And guess what?
You really don’t need to know much code to be an SEO analyst.
BUT, you'll be a billion times better at your job by putting forth the effort to understand what HTML, CSS, and JavaScript are, and how each is interpreted by search engines. You don’t need to be a web developer, or even fluent in any programming language to be a good SEO analyst; but don’t forget, knowledge is power. The more you know, the better you’ll be. Not just because you’ll be able to tell what you’re looking at, but because knowing the most important concepts and tags can help you to talk to a developer without feeling like a fool.
Let's start off with the basics: what are these words?
What is HTML?
HTML, or Hypertext Markup Language, can be thought of as the skeleton of a website. It’s the code that contains the content and meta information that search engines use to understand what a website is about. A website written in pure HTML won’t look that great, but it will be lightning fast, likely optimized for organic search, and responsive (optimized for mobile). For example, the musician Vulfpeck's website is entirely written and styled in HTML, and it shows.This is an exceptionally barebones site, and that’s because HTML is just that—the basics of a site. To make it pretty, you’ll want to learn some CSS.
What is CSS?
CSS, or Cascading Style Sheets, is the skin of a website. It allows for granular control over the style, fonts, and basically all visual aspects of a website. Without CSS, your website would look like Vulfpeck's site (from the previous example). Generally, global CSS is written to style elements like the header, footer, navigation, and occasionally even the body content itself. As such, a best practice is to ensure that all shared CSS is kept in one style sheet. When you need to style unique items like a blog post, team page, or about us page, individual style sheets can be used for each page in combination. This allows for increased page speeds by not forcing search engines to crawl tons of unnecessary lines of styling code for each and every page on your site.
What is JavaScript?
Imagine JavaScript (not to be confused with Java, which is a wholly separate beast) as the muscles, tendons, and ligaments that allow a body to actually move and do cool things. JavaScript can be used for a variety of purposes, including image galleries, dynamic layouts, games, and even unique responses to weird user behaviors. Because we’re focusing this post on the basics of HTML & CSS for SEOs, we’re not going to be focused too heavily on JavaScript. We do want to note that JavaScript and Google tend to play well together for the most part, but there are a lot more in-depth technical details of how JavaScript affects SEO, which we are not going to get into here. The most important thing to remember is to avoid having your site load content through JavaScript. If it’s important, make sure it’s in the skeleton of your site, rather than in JavaScript code.
"Well dang. That's simpler than I thought."
We are absolutely overgeneralizing, but you should still get the point. HTML is all of the information on a site, including content and metadata (data about data). CSS makes it look pretty and unique. JavaScript makes it do awesome things.
With the very basics out of the way, let’s get this show on the road and tackle the basic elements of HTML and CSS you need to know as an SEO analyst.
Free SEO Scorecard
Get professional analysts' insights into your Technical SEO, Content, Competitor Activity, UX, Web Analytic Configuration, and more. Get started with your free website SEO audit today.
HTML to internalize forever
Let’s break this down a bit.
Code, regardless of the language, will always use both an opening and a closing tag. In HTML, this happens a few ways, as demonstrated above. To make it easy, we’re going to look at each element one at a time, starting with our <HTML> tag, which as an SEO, you will likely never write. It’s used literally just to declare that everything in between the opening and closing </HTML> is written in HTML. It’s actually just that straightforward.
Now you may be thinking, “well what about my JavaScript & CSS?”
Calm down.
We’re getting there.
Let’s tackle our second tag: The head tag. In between the opening <head> tag and closing </head> (note: the backslash before “head” indicates a closing tag) is where you’ll find such important things as the Page Title, Meta Description, Canonical tags, stylesheets, and even JavaScript information or tracking codes. Most importantly, this is where all metadata is stored for a site.
You may have also spied something that can be a little confusing: the link rel=” “ tag. This HTML tag is used to describe the relationship between the HTML page and other particular resources. This could be used in a variety of ways, such as canonical tags, linking CSS sheets, and providing additional directives to search engines, such as nofollow, prev/next, and even alternate.The alternate tag is pivotal when optimizing for international clients because this is where we denote the languages and regions targeted by these “alternate versions” of pages so that the most relevant version of a page is always served to the user. This gets very tricky and is a little out of scope for this post.
Inside of our example head section, you’ll see some of the most important elements in HTML for Search Engine Optimization. These are:
- The Title Tag -- This is literally the title of your page. This is what pops up as a blue link in organic search results. It is a heavily-weighted signal, and this particular tag can be highly correlated with ranking success and failure.
- The Meta Description -- This bit of information is found right under the page title in our previous example. Although it’s not a direct ranking factor, the meta description heavily influences click through rates, as it is the bit of information below the blue link in organic search results.
- The Canonical Tag -- The canonical tag can be exceptionally confusing to new SEOs. There’s a lot to say about it, but just know that essentially, what you’re doing when using it is declaring the preferred version of a page. If it is the original page, it will be self-referring; if not, it may point to another page to give it credit, reduce duplication, or avoid plagiarism. This works in a similar way as the link rel=”stylesheet” tag, with the difference being that the latter defines the relationship between your HTML skeleton and the CSS skin as opposed to the relationship between pages.
There are a huge number of other HTML tags and elements that appear in the <head> of a site but from an SEO perspective, these are all that you should have to worry about until your skills significantly advance.
HTML for Blogging
Now that you’ve learned some of the more important concepts for SEO in HTML, let’s take a look at some of the code that you will likely end up using in your day-to-day.
Most websites these days are easily manipulatable through a WYSIWYG (What You See Is What You Get) editor. WYSIWYG editors are great, but they don’t provide the control over your site and content like you may want. That’s when you’ll really want to get in and use the text editor. Below, you’ll find some of the most useful elements in HTML when it comes to shaping your blog or content up.
So let’s start with the <body> tag. This is where your content will live 100% of the time. Sometimes you’ll even find some tracking snippets in here, but the best way to think of it is that while the <head> contains valuable information for search engines, it’s the <body> that contains valuable information for users.
Most of the time—unless you’re working on a weird CMS or have custom code to implement—you’ll rarely ever have to manage the <body> tag itself. Instead, you’ll be dealing with every other tag that you see within that section.
Let’s take a look at everything between the opening and closing <body> tags.
<div></div>: Okay, I admit. This gets confusing too. See, divs are used for organization and generally contain a large block of code that you’d like to style in the same way. Here’s the catch: you can place a span inside of a div and give them both a unique ID. Then, styling the div will affect the span, but allow you to retain granular control.
<span></span>: The confusing part: spans are also used for organization. Again, all you need to do is assign an ID (<span id=”example”> </span>) and it can easily be referred to in CSS for styling. There is a lot more to know about the differences between divs and spans but to be honest, until you’re hand-coding websites, you shouldn’t need to be concerned.
<h1></h1>: Your H1, or first header, is the most emphasized piece of text on the page. It’ll be the largest text by default. The header tags in HTML work in a hierarchical fashion, meaning that H2 tags carry less weight than the H1 tag from a search engine's standpoint, and will be the second largest text on your site. This carries all the way down. The main thing to remember with header tags is to always use them in a hierarchical order to further explain the topics and subtopics of a page.
<strong><h2></h2></strong>: Okay, fine you caught me. This is actually two tags put together. <strong> is a tag that is used to—if you can believe it—make your text bold. That’s it. The H2 tag is then the a subheader under our H1 tag. This would generally be used to further expand subtopics within H1's topic.
<p></p>: Ahhh, the all important P, or paragraph, tag. Almost 95% of the time, your content will be written inside of a <p> tag. The exceptions to this are essentially just your header tags.
<ol></ol> & <ul></ul>: The OL and UL tags can be used interchangeably, depending on how you’d like to style your lists. See, these tags refer to an ORDERED list and an UNORDERED list. Thus, O & U L. In either, the <li></li> tags will wrap around each item in an ordered list to create a numbered list and each item in an unordered list to create a bulleted list.
<em></em>: The em tag can be thought of as providing emphasis on a term, by styling the text inside of the tag in italics. That’s it. An easy way to italicize your content in HTML.
<img src="" alt="" />: The img src tag is one of the few that makes sense just by reading the tag. This declares the source of an image that you’d like to use. Utilize the alt tag to describe to search engines and screen readers what the image actually shows. Remember, search engines still can’t see photos, so using the alt tag helps provides some context to bots when crawling images on a page.
<a rel="nofollow" href="">text</a>: I know, there’s a curveball here. I hope you were prepared. See, without rel=”nofollow” (mentioned above), this is just a standard link tag. The rel=”nofollow” bit dictates to search engines that you would not like to pass any link equity to the linked site. The rest of the tag designates the page that you’d like to link to, and the text that users see linked to this page, which is referred to as the anchor text.
Even more tags you should know
<a href="" target="_blank">ANCHOR TEXT</a>: By now, you should be able to recognize what a link looks like in HTML. The difference is that this target="_blank" opens up a link in a new tab, which can be a benefit in that you avoid directing users to leave your site. Instead, you’re making it easy for them to navigate to the link in question without having to leave your page.
<a href="#jumplink"> ANCHOR TEXT </a>: Many long blog posts (not this one) incorporate a table of contents that is usually marked up with active links. When clicked, these links traditionally jump you lower down the page to a particular section. This is known as a jump link and it requires two parts: the actual link (link seen above) and the particular element you’d like to jump to. This element will need to be named using a made-up ID. Once that is done, simply set the ID where the URL would go in the <a href> tag and you’re done. Be warned: this isn’t the most accurate at times and, depending on placement, can jump a little off pace from where you want to be.
<br />: A lot of people tend to use to make line breaks happen in content. If you’re reading this and do this now, PLEASE STOP. Just use <br />. It’s a lot easier, the line spacing is more ideal at times, and it doesn’t even require a closing tag.
<tagname style="property:value;property:value;property:value;property:value;property:value;">:
So, while we’re never going to recommend using inline styling with HTML, we do acknowledge that you need to at least see an example of what you shouldn’t do. So please, if you see this on your site, kill it with fire. Search engines don’t like it, and by using an ID or a class tag to designate the section you want to style, you can easily accomplish the same thing in CSS without the influx of inline code. Oh, did we mention that it helps with site speed to do so?
Congrats!
You now know enough HTML to be able to structure your content on a blog the way you want, and to ensure that search engines have a good understanding of the context and intent of your pages.
Now let’s talk CSS.
What is a CSS Stylesheet?
The stylesheet is what dictates how the HTML should actually appear. This is where the font choice, background colors, image sizes, and all of the important mobile-readiness precautions take place. It is defined in the HTML head with a link rel tag.
When you're writing in CSS, you'll want to keep a few things in mind. First, it's extremely important to remember to set IDs or classes for your HTML blocks so that you can easily style these sections later.
Boom.
We've now (poorly) styled our navigation. In many instances, you'll find that it can be difficult to get the CSS the way that you want it, and will likely revert to styling your content with inline HTML.
Obviously, you know better than that, though.
There are a lot amazing things that can be done with CSS. Don’t believe me?Google it. Though, once you’ve gotten to the point of wanting to make really amazing CSS designs, you may want to ask for a pay raise. However, if you want to go that route, there are a billion resources that you can use to hone your skills.
Where to Learn to Code
These days, learning to code is as easy as having the internet and a computer that has access to the internet. Seriously, among Codecademy, The Odin Project, Udemy, Kahn Academy, and so many other resources, you have everything you need at your fingertips. The next step is having the time and putting forth the effort to genuinely learn and utilize code.
