An SEO Introduction to HTML, Tags, CSS and the World Wide Web
Our SEO introduction to HTML begins in Switzerland. Cloistered into one of CERNs smaller offices, Tim Berners-Lee took it upon himself to find a way to create a global network for the storage and transmission of information. In March 1989, his work culminated in the creation of the World Wide Web, or the internet, as it has become known. 5 years later, faced with the growing need for standardisation, he co-founded the World Wide Web Consortium (W3C).
This non-profit has been instrumental in the creation of a framework which aims to use languages and standards to safeguard the future of the internet and ensure its continued growth. Perhaps the most important example here, is the launch of HTML 1.0. in January 2000.
The rules set down by the Consortium still largely govern the way producers and consumers interact with the internet, and are therefore crucial to any understanding of the modern digital age. For SEOs and Marketers the temptation to avoid pesky 'Dev talk' like HTML, CSS, Tags, HTTP is ever present, and it certainly is much easier to simply pawn these issues off on the Dev team.
In this post, I will give a brief SEO introduction to HTML, and other core concepts needed to understand the world wide web, and market to those who consume it. Let's get started!
HTML - Structuring your documents
HTML is a browser-readable language that allows for the structuring of documents and pages. It is the backbone of pretty much any website your care to mention. One of its great advantages is that HTML can be written in simple text editors, available for free on any desktop or laptop. This means that the creation of domains and pages on the World Wide Web, and the subsequent participation in the digital world not only as a consumer, but as a producer, is not limited to an elite group of people, but instead it is open to all.
Let's take a look at a simple HTML file:
<meta name="description" content="This is where you put the Meta-description">
<meta name="robots" content="index, dofollow">
<meta name="language" content="en">
<link rel="alternate" hreflang="de" href="http://www.yourdomainingerman.de" />
<p>The written copy</p>
As we can see, HTML documents usually consist of two parts:
- The head section: Contains the title of the entire document which is a crucial ranking factor. Older HTML files might contain Meta-Keyword Tags, which used to help Search Engine's understand web pages. This is no longer the case, but the Meta-Description tag is still relevant for SEO and should also be included in the head section. Additionally, this is where you should direct to your Robots as well as indicate your language and location with hreflang.
- The body section: This is where the information shown within the browser is located. The paragraphs, images and comments are all in this section. Text formatting usually comes into play, and images should be given a keyword rich alt tags.
The HTML tag binds the head and body section, with an open tag (<html>) at the top, and a closing tag (</html>) at the bottom. Browsers read the HTML tag and understand its meaning, rendering it appropriately for our consumption.
Tags & SEO
If you right click on any webpage and select "View Source Code" you will see its HTML structure. You quickly notice that tags (the sharp brackets >) play an important role in the integrity of the structure. User agents (ie. browsers and web crawlers) interpret these tags and render them on the page. If a tag is unknown or incorrect, it is ignored.
There are three types of tags you need to know:
- <tag_name> Text</tag_name>
1. Empty-Tags: Are instantly rendered by User agents. Popular examples are the line break <br/> or the horizontal line <hr/>. Click here for a full list of tags.
2. Container-Tags: The second type of tag is more complex. There is always an opening (<) and closing (/>) tag, placed on either side of the affected text. Both tags need to be included in order for the command to work. Making a word bold looks like this <b>word/b>, and italic would be <i>word</i>. Container tags are also used to tell User agents what place the words should have in the structure of the site. We can see this in the <h1></h1> and <h6></h6> tags, which represent the top and bottom of the site hierarchy.
In terms of SEO; h1 (headings) and h2 (subheadings - like the "Tags & SEO" subheading used above) tags are powerful signposts for Google. Placing your focus keyword within the h1 tag will help you rank for this keyword. H2s are slightly weaker in terms of ranking power, but should nevertheless be utilised. To get maximum efficacy, place the keyword at the beginning of the h1 tag, and include it in one h2 tag. Use variations of the keyword in following subheadings.
3. Container-Tags with arguments: The third type is extrapolated from the container-tag, and houses further specifications. These are needed to instruct User agents about video, image, link or audio formats located within or outside of the HTML document. This is most commonly used for the inclusion of a hypertext link:
<a href="link.html">Anchor text</a>
Additionally, these tags are often used to determine the color or size of the font located within them.
If you are going to remember any of this, please make it the importance of the title, h1, and h2 tags as well as how to link using HTML.
A wee word on Meta-Descriptions
The Meta-Description allows producers to create their own synopsis of a page, including a call to action, and place it in their header section. Usually, the Meta-Description is then shown in the SERPs and can play a vital role in a consumers decision to click on your URL. Because Google does not include Meta-Descriptions as a ranking factor in its search algorithms, many SEOs and Marketers fail to give it the credit and subsequent attention it deserves.
But more on that in a minute. First, let's look at the specs:
- Provides an overview of the the page's content
- Up to 156 characters. Use the Snippet optimiser if needed
- Should contain the focus keyword
- Use UTF-8 characters for better visibility and click-through-rates (I use this chrome plugin)
- Capitalise words in order to catch the eye
- Avoid duplicate Meta-Descriptions (Search Console -> Search Appearance -> HTML Improvements)
So why are they so important? Well, because they have a huge bearing on one of Google's most underrated ranking factors: Click-Through-Rate (CTR).
Google confirms watching clicks to evaluate results quality. FYI Google still won't say if clicks used as rank signal pic.twitter.com/jzNGc5reQk
— Danny Sullivan (@dannysullivan) March 25, 2015
For the uninitiated, CTR describes the relationship between impressions and clicks in a percentage. As shown by the graph below, CTR varies significantly by the position in the SERPs.
A higher rank leads to better CTR, which then results in more visits, finally culminating (ideally) in increased revenue.
Meta-Descriptions give us the opportunity to reverse this equation, by drawing attention to our URL, thus improving the CTR and boosting our rankings. Take a look at the SERPs for the keyword "eBay loans" to understand this point.
Although the bitbond URL is ranked 3rd, the Meta-description and Schema markup draw the eye of the User and boost the CTR for this URL far beyond what is normal. The above average CTR is noted by Google and will help cement the URL's position high up the SERPs.
An improvement I will make here is to change the trigger words "easier", "free" and "now" to all caps, in order to draw the eye even more, and fulfill the 156 character count.
CSS & SEO
If someone from the 1990s clicked around on the world wide web of today, he or she would barely be able to recognise it. The reason is the modern web's visual quality, which has progressed at a staggering pace, thanks to the emergence of CSS (Cascading Style Sheet).
To illustrate this point, have a look at the two images below. Both are lists, the one on the left uses CSS for increased visual appeal, while the list on the right, uses barely any.
Essentially, CSS describes how HTML should be displayed on the page and looks like this:
font-family: verdana, arial, helvetica, sans-serif;
The code above would tell the User agent to display our H1 in the specified way, pulling it from a style sheet. The same effect can be created through HTML by saying:
<h1 font-size="18px" color="blue"><b>text</b></font></h1>
As you can see, HTML is messy and much less versatile than CSS even for small formatting changes. But why, are we talking about CSS when it seems unrelated to SEO?
Because CSS often comes at the detriment of SEO, with webmasters and designers formatting text (<p>) without typical h1, h2, etc. tags, seriously harming their site's chance of ranking.
CSS itself is barely considered by Search Engines, but when producers use it to destroy the hierarchy of a web page, it has a detrimental impact on rankings.
Your IP address & URL buildup
IP addresses comprise 4 blocks of numbers ranging from 1 to 255, which are separated by full stops. These signify our online addresses in accordance with Internet Protocol 4. Internet Protocol 6 is out and available, but enthusiasm and adoption are weak.
Generally, we distinguish between static and dynamic IP addresses. Your home Router or Server has a static address, and remains the same. Dynamic IP addresses are usually provided for those who enter the web through an Internet Service Provider (ISP), and change on every entrance.
The text entered into the address bar in order to access a web page is called the Uniform Resource Locator (URL). The URL doesn't just know the IP address of the server, but even the precise web page to open. Let's look at an example in order to really understand the meaning of URLs:
http : // www. cgrundy .com
http: The protocol used to communicate between the server and the browser. There is a long standing debate in the SEO world over the impact of https, versus simple http. Google has included the safer https protocol as a positive ranking factor since 2014. But MOZ and their community, have cast grave doubts on the efficacy of the safer protocol, and even experienced a negative impact on rankings. Check out this guide on how to switch from http to https if you want to make the witch anyway.
Colon: Separates the protocol from the remaining URL
//: Signifies that a connection with a web server is to be achieved. This may not be the case for emails for example.
www: Name of the server receiving communication from the browser
cgrundy: This is the domain name to which the server belongs. You can purchase your domain name of choice, if it is still available. For a positive impact on SEO, try to avoid hyphens and stop words. Using keywords in the domain name, used to guarantee rankings - today the impact is negligible.
Conclusion | SEO introduction to HTML, Tags, CSS and the World Wide Web
The internet has transformed beyond recognition since Tim Berners-Lee launched it into the world in 1998. The aspects of SEO which include coding will continue to grow. Technical SEO is becoming its own discipline, distinct from content creation, in the eyes of many employers. It therefore literally and metaphorically pays to understand the basics of coding and the Web.
Regardless of profession, the watchword is: Program, or be programmed. If we do not learn the basics of coding - the lifeblood of the internet - we are more susceptible to spam, and digital attacks of any kind. We are also more likely to optimise effectively and secure good rankings for ourselves and our companies.
This SEO introduction to HTML and the World Wide Web should serve as a starting point for Marketers willing to ad another string to their bow.