Introduction
Now that you can view the source code of any website, how can you use this for practical purposes? Search engine optimization, or SEO, is one of the first things that come to mind. There is a very close relationship between the code that powers your website, and how well the site ranks in search engine results.
When you access a website in your browser, you see a nicely formatted page, the way the website developer intended. However, when a search engine accesses the same page, it sees the underlying HTML source code. This is why it is important that the code is clean, and follows the recommended guidelines, even if the page appears perfectly to the end user.
In the early days of the Internet, people used a number of tactics, such as keyword stuffing, to trick search engines. It was relatively easy to rank well on searches by employing these tricks. However, these days search engines employ whole teams of engineers to discover and plug any loopholes. Even if someone does find a way to fool search engines, it will not last long, and you could end up with a permanent penalty on your website.
The information you will find here is completely legitimate as of today. We will simply share ideas that better organize and present your content, rather than hacks that may work in the short term, but will end up hurting you.
SEO Basics
Let us first dive into the basics of SEO. There is a lot to search engine optimization, and we will try to cover each aspect briefly, but the primary focus of this post is to cover the part your source code plays. For detailed explanations of the other factors, I suggest doing your own research on each area.
What exactly is SEO?
One of the best ways any online business can improve their revenue or reach is through increasing search traffic. Instead of spending money to push your message to the masses, search traffic allows relevant visitors to come to you. And this traffic does not stop when your advertising budget runs out. An optimized website, offering quality, relevant content will continue to drive traffic for months or even years.
Search Engine Optimization is the process of improving your site's reputation, quality, and visibility to help you rank better in searches.
Content is King
Before we continue, one must be clear that content is still king. The aim of search engines, such as Google, is to help visitors find answers to their queries. Therefore, they will present them with what they consider to be the most relevant and highest quality content. No matter how well you package your offering, if it does not answer a user's question, it will not rank.
The aim of SEO is to format content in such a way that it loads quickly, is well organized, is well presented, and does not pose any risk to the visitor. However, good content is a prerequisite to these steps. You are the best person to decide how to create the best content possible for your visitors. However, using the right tags for any piece of content will help search engines and visitors alike to find what they are looking for.
Website Reputation and Offsite SEO
How reputable your website is another important factor that affects SEO. This is determined through a number of metrics, including the quality of your content. Since this is out of the scope of this article, I will give a brief overview here. You can learn more about it elsewhere.
Backlinks
One way to determine a website's reputation is to see who links to it. The more reputable sites that link to you, the more your site's reputation will improve. And unlike in the early days, how it links to you is just as important.
Say you run a website about golf products. If an article on Golf Digest links to you in a natural way, say in a review of a product you sell, it will be a big positive. However, if it is a random, out of context link in an article on knitting mittens, on a knitting website, even a reputable one, not only will it not help you, your site could incur a penalty. Firstly, the website, as well as the article, are not related to golf, or sports. Secondly, the link is inserted in an unlikely place using a dubious keyword. To a search engine's algorithms, this will look odd and spammy.
Website Security
Another factor is how secure and clean your site is. If it frequently leaks user data, is routinely hacked, or hosts questionable content, it may be marked as dangerous. This has a lot to do with your hosting service, so make sure you use one that is reliable.
If you have not already done so, and if your host allows it, restrict access to HTTPS only. This will encrypt all communication between the website and the visitor, increasing privacy, and protecting any sensitive information exchanged.
Check your web server's configuration, and make sure it is using up to date cyphers, and includes HTTP headers that increase security.
One part you usually have full control over is your software. Make sure to regularly update your code, and check for any security holes, such as insecure plugins, or upload functionality.
The Semantic Web, or Web 3.0
While HTML has usually been used to format web pages for the viewer, the Semantic Web is an extension to the standard that puts emphasis on the meaning of the content. Also referred to as Web 3.0, this allows better interpretation of the content by screen readers, visually impaired visitors, and search engines.
To put it simply, the Semantic Web promotes the usage of correct HTML tags and attributes that accurately describe content, and allow the user to find all the information they need. As we will see below, using the right tags can make the difference between content that is treated as relevant and special, and content that is not.
Essential HTML Tags for SEO
Here is a list of HTML tags, in order of importance, that you should pay special attention to for improving your SEO:
- title
- h1
- meta
- article
- h2-h6
- header
- nav
- main
- footer
title
The title tag appears in the <head> section of a web page and determines its primary title. This is what you will typically see at the top of the browser window or tab. Most search results use this tag for the title of the result, making it the first thing a user will see.
The title should contain the main keywords that your page represents, and for best results, should be under 60 characters. For optimum use of keywords, keep it between 50-60 characters.
Do note that there is no guarantee that search engines will use your title tag in results. If their algorithms determine that your title does not properly represent your topic, they may pick this from any other part of the page.
h1
The h1 tag is placed within the <body> tag, and determines the main heading of the page and will be visible to the user within the web page. It is recommended that there should be a single h1 heading that is bigger than all other text, and is prominently displayed without having to scroll down.
Until recently, most webmasters kept the h1 tag the same as the title tag. However, there really is no need to keep it the same, and it is a good opportunity to make use of alternative keywords. This could help you rank the same page for a wider range of search terms.
As with the title, keep the heading under 60 characters, and preferably between 50-60.
meta and link tags
Meta tags are found in the <head> section, and are invisible to users. However, they can contain all sorts of useful information, such as what icon to display for the website, and how search engines should treat a page. Here are the most important ones:
canonical
While any content you create has to be of a high quality, it also needs to be unique. You cannot do much about others duplicating your content, but websites often unwittingly serve multiple pages with the exact same content. This could be due to a misconfigured web server, making copies of the same page by mistake, or due to pagination. For example, the following URLs, with subtle differences, may serve identical content, potentially reducing its effectiveness:
- http://www.example.org
- https://www.example.org
- http://www.example.org/
- https://www.example.org/
- https://www.example.org/?id=eu8ae3h1n49ekkw
The canonical link tag allows you to tell search engines which page they should index. For our example, we can simply add this tag to the head section to tell search engines to only look at the second last URL ("https://www.example.org/"):
<link rel="canonical" href="https://www.example.org/">robots
The robots meta tag tells crawlers if the page should be indexed, and if any links it contains should be followed. You may want certain pages, such as the results of a search, to not be indexed, but to follow the links in the search result. In such a case, this is the tag you would add to the head section:
<meta name="robots" content="noindex,follow">For your main content pages, this is typically what this tag should look like:
<meta name="robots" content="index,follow">dns-prefetch, preconnect, and preload
Certain meta tags can fetch resources in parallel, while the page is loading, cutting down on the overall time it takes to paint the page in the browser window. The three tags we recommend are:
- dns-prefetch
Used to perform DNS lookups of external resources used on the page. This cuts down on the lookup time later on. In this example, we use it to lookup the host serving the Google Fonts we use on the page:
<link rel="dns-prefetch" href="//fonts.googleapis.com"> - preconnect
Used to initialize the connection to external resources used on the page. In this example, we use it to start the connection to Google's static server:
<link rel="preconnect" href="https://www.gstatic.com"> - preload
The preload directive is used to load resources such as stylesheets, in parallel. This is how we load our stylesheets:
<link rel="preload" href="https://www.view-page-source.com/c/x.css?ver=1.0" as="style" onload="this.onload=null;this.rel='stylesheet'">
article
If your page represents a full-fledged article, or lists a series of articles, this is the tag to use. The article tag denotes a self-contained piece of information and separates it from elements specific to your website, such as headers, footers, and related posts. Various components of your article, such as the heading, author name, post date, text, photos, videos, etc. can be included within this tag.
The article tag is a great example of the Semantic Web, and how one should treat important content, instead of simply surrounding it with a div or section tag.
h2-h6
We already explored the importance of the h1 tag above. Five more levels of heading tags can be used to break down your content into smaller sections. Remember to maintain a hierarchy, so that under a h2 tag, you use the h3 tag, instead of suddenly dropping down to a h5 or h6.
header
The header tag, not to be confused with the head tag, is used to represent information that the visitor would see at the top of the page. This could contain navigation links, a logo, and any elements that are not an integral part of the main content of the page. There should be only one of these on your page.
nav
The nav tag is for your site's navigation and is usually placed within the header section. This should contain links to high level pages on your site that you want to drive traffic to. For websites with more than a dozen or so pages, it is inadvisable to link to all your pages here. A better approach is to create category or section pages, and link to those from the nav menu. Avoid putting links here to supporting pages, such as disclaimers, or your contact page (unless the primary aim of your website is to get people to the contact page). It is better to put such links elsewhere, such as in the footer.
main
The main tag is where your page's primary content resides, and is used to separate it from elements that might be common to all pages on your site, such as the header & footer. The content is typically unique, and could be an article, or a product listing. Your site should contain only one main section.
footer
The footer tag is where you can place additional information that you want to appear on all your pages. This is usually a brief summary of your website, contact information, social media links, and the copyright statement. It is also where you should place links to information pages that are not your primary offering. These could be in a menu that points to your privacy policy, additional information about your organization, or your partners.
Code quality
It is not uncommon for developers, even meticulous ones, to make mistakes. With hundreds, or even thousands of lines of code that power a site, this is not surprising. These mistakes are usually harmless, causing little to no effect on your web page. However, bigger mistakes can be severe enough to break the page layout, expose sensitive information, or cost you a penalty by search engines. In this section, we will look at some areas you should focus on to improve the quality of your code.
Broken or malformed tags
HTML is designed to be quite resilient, and your browser will attempt to display your full page even if there are mistakes in it. For example, the above paragraph requires an opening, and a closing p tag. If the corresponding closing tag is omitted, the content will still display, but the browser will likely treat the remaining document as part of the paragraph.
This may not be a big deal for a visitor using a browser, but a search engine parsing through the HTML will not look upon it kindly.
Code intended for the server
Tying in to the above point, sometimes the mistakes are not with the HTML, but any other language you may be using to generate or modify it. While many such errors will break the page completely, some will get through and hide within your page. For example, a page generated by PHP may include PHP code that was not escaped properly.
Website Speed
What do you think of sites that take seemingly forever to load? If you are like most people, you will wait only a few seconds before giving up, and moving on to the next website in search results. However, a web page that loads in less than a couple of seconds will have a much more positive impact on the user. While we are sometimes unable to control the speed of the server, it could be your code that is slowing everything down. Here are a few possible causes, and how to to fix them:
Too many images or widgets
Take a look at how the site is being loaded. If there are too many images, especially large, unoptimized ones, it will take a while for your page to load. In case there are too many ads, widgets, or embedded content, they will slow down everything. Check the source code to see how many of these are being loaded, and cut down what you can.
Certain content, such as photos, can be "lazy loaded". That is, the browser will only download and display them when the user scrolls to that section. This helps the main portion of the page, such as the headings and paragraphs, to finish loading quicker, giving the user a better experience.
Loading resources in parallel
Opposite of lazy loading is preloading. Certain resources, such as fonts & stylesheets, should be loaded as early as possible to minimize changes after the user has started reading or viewing the content. The preload meta tags mentioned above will help you load these resources faster.
Code vs Content Ratio
The ratio of code to content is a relatively minor factor when it comes to SEO. However, it is another thing that could give you an edge over a competitor that matches you in all other areas. Code in this case is the HTML, inline CSS, and Javascript code that the page contains. The more tags, attributes, definitons, and custom code you include, the more resources your visitor's browser, or search engine crawler will use to sift through it.
A basic example is using style attributes in a HTML element. For example, you could have a paragraph "p" tag that defines the style of the text within it:
<p style="margin:8px 10px 4px 10px; padding:8px; color:#333333; font-family:Roboto,Helvetica,Arial,sans-serif; font-size:18px; font-weight:300;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>In this example, the 60% of the data is the content/text that will be displayed to the visitor, while the code, including the HTML tag and style definitions used to display it, make up 40%. This ratio is pretty bad, and can easily be improved. If we move the style definitions to a class in a separate CSS file, this is what it may look like:
<p class="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>Now the text will display exactly the same as before, but the code has been reduced to just 8%. This optimization may seem unnecessary for a small page, but such code adds up for typical websites. The more tags, and other pieces of code you use, the bigger the size of the page that the browser/search engine has to download, and the more resources it has to use to render it.
User Experience
One of the most important factors that search engines, such as Google, look at is User Experience. This is a very broad term that encompasses everything we have talked about so far, specifically quality of content, and website speed. However, certain metrics can influence this directly which we will mention below.
Cummulative Layout Shift (CLS)
Something that makes me furious about many of today's websites is how the layout moves just when you find an engaging piece of content to focus on, or when you are about to click a link that seems fascinating. In some cases, this is intentional. A nefarious way to get you to click an ad, or signup link. In most cases, it is due to bad design, or intrusive third party advertisements.
Since CLS has a great impact on user experience, this is now considered a ranking factor. How do you reduce it? By looking at the source code. We will talk in detail about dealing with CLS in a separate post. However, here is a common problem that can easily be fixed:
One common cause of layout shift is loading third party ads, especially responsive ones, that cause everything below them to move down while the ad is loading. A viable solution is to leave sufficient space for the ad beforehard.
For this site, we use a div to display third party ads. It has the CSS class addiv with a min-height attribute set to 280px. Since the ads are almost always 280px tall, this reserves the space beforehand, and eliminates any shifts to the sections below it.
Conclusion
SEO is a worthy investment for your site that can bring you returns for years to come. Create the best content you can for your specific topic, and then use this guide, as well as our View Source tool to get your message across to the relevant people.
