How to Read Your Website Source Code and Why It’s Important for SEO
By Sean Work August 27, 2013Opinions expressed by Entrepreneur contributors are their own.
Editor’s Note: A previous version of this article appeared at KISSmetrics.com.
Underneath all the beautiful images, perfect typography, and wonderfully placed calls to action lies your website source code. This is the code your browser turns into delightful experiences for your visitors and customers on a daily basis.
Google and other search engines “read” this code to determine where your webpages should appear in their indexes for a given search query. So, a lot of search engine optimization (SEO) comes down to what’s in your source code.
This is a quick guide to show you how to read your own website source code in order to make sure it’s properly SEO-ed and, really, to teach you how to sanity-check your SEO efforts. I also will go over a few other situations where knowing how to view and examine the right parts of source code can help with other marketing efforts.
Finally, if you’re paying someone to manage SEO on your site, we’ll go over keeping tabs on his or her progress. To get started, just click the “Next” link below.
How to View Source Code
How to View Source Code.
The first step in checking your website’s source code is to view the actual code. Every web browser allows you to do this easily. Below are the keyboard commands for viewing your webpage source code for both PC and Mac.
- Firefox – CTRL + U (Meaning press the CTRL key on your keyboard and hold it down. While holding down the CTRL key, press the “u” key.) Alternatively, you can go to the “Firefox” menu and then click on “Web Developer,” and then “Page Source.”
- Internet Explorer – CTRL + U. Or right click and select “View Source.”
- Chrome – CTRL + U. Or you can click on the weird-looking key with three horizontal lines in the upper right hand corner. Then click on “Tools” and select “View Source.”
- Opera – CTRL + U. You also can right click on the webpage and select “View Page Source.”
- Safari – The keyboard shortcut is Option+Command+U. You also can right click on the webpage and select “Show Page Source.”
- Firefox – You can right click and select “Page Source” or you can navigate to your “Tools” menu, select “Web Developer,” and click on “Page Source.” The keyboard shortcut is Command + U.
- Chrome – Navigate to “View” and then click on “Developer” and then “View Source.” You also can right click and select “View Page Source.” The keyboard shortcut is Option+Command+U.
Once you know how to view the source code, you need to know how to search for things in it. Usually, the same search functions you use for normal web browsing apply to searching in your source code. Commands like CTRL + F (for Find) will help you quickly scan your source code for important SEO elements.
The title tag is the holy grail of on-page SEO. It’s the most important thing in your source code. If you’re going to take one thing away from this article, pay attention to this:
You know those results Google provides when you’re searching for something?
All of those results come from the title tags of the webpages they are pointing to. So, if you don’t have title tags in your source code, you can’t show up in Google (or in any other search engine, for that matter). Believe it or not, I’ve actually seen websites without title tags.
Now, let’s do a quick Google search for the term “Marketing Guides”:
You can see that the first result is for the KISSmetrics blog section on marketing guides. If we click on that first result and view the page source code, we can see the title tag:
The title tag is designated by the opening tag: <title>. It ends with the closing tag: </title>. The title tag is usually near the top of your source code in the <head> section.
And we can see that the content inside the title tag matches what is used in the headline of that first Google result.
Not only are title tags required in order to be included in Google search results, but Google identifies the words in your title tags as important keywords that they think are relevant to their users’ searches.
So if you want a certain webpage to rank for a particular subject matter, you’d better make sure words that describe the subject matter are in the title tag. There are a number of online resources where you can learn more about how keywords and title tags are important in your overall site architecture.
Here are some important things to remember about your title tags:
- Make sure you have only one title tag per webpage.
- Make sure every webpage on your website has a title tag.
- Make sure each title tag on your website is unique. Never duplicate title tag content.
Another important part of your webpage’s head section is the meta description tag. This 160 character snippet is free advertising copy that gets displayed underneath your title content in the search engines.
I’ve seen hundreds of websites that completely ignore this tag. It’s very easy to find in your source code:
So, check to make sure it’s on all of your webpages. More importantly, check to make sure you’re not duplicating it across multiple pages. Duplicating a meta description tag is not a search engine penalty, but it’s a very big marketing mistake.
A lot of people gloss over the meta description, but you really should put some thought into it because it is read by search engine users. Think about what copy would help pull in more visitors and increase click-throughs.
H1 headings carry a little on-page SEO weight, so it’s a good idea to check your pages to make sure you are using them properly. For each page on your website, look over the source code to see if you spot this tag:
You don’t want more than one set of H1 tags appearing on any given webpage. We recently published an article that says you shouldn’t try to over optimize your H1 headings. And what that boils down to is don’t try to purposely boost your SEO by putting your keyword in the H1 heading. Just use it for what it’s meant for — the biggest heading on the page. On your home page, this might be your value proposition.