A guide on how to View Source Code on Website and Why it’s Important
Viewing your HTML source code is a great way to identify and trouble issues with your website quickly. It also gives you insight into how competitors structure their websites.
Search engines read source code to determine where your web pages should rank in search results.
If you are paying for someone to manage your SEO, it’s a great way to keep tabs on them.
This short guide will teach you how to read the source code and make actionable changes.
How to View Source Code
The first step in viewing your source code is by opening a web browser of choice and going to the webpage you want to read. Below are the commands to open source code viewing.
- Firefox – press CTRL + U. Or you can go to the Firefox menu and 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 select the hamburger menu in the right-hand corner, clicking on “Tools,” and select “View Source.”
- Opera – CTRL + U. Or right-click on the web page and select “View Page Source.”
- Safari – Option+Command+U. Or right-click on the webpage and select “Show Page Source.” Ensure you have developer tools enabled in Preferences.
- Firefox – Command + U. Or right-click on the page and press “Page Source.” You can also find it under “Tools” in the menu, pressing “Web Developer” and click on “Page Source.”
- Chrome – Option+Command+U. Or right-click on the page and select “View Page Source.” You can also navigate to “View” in the menu and then click on “Developer” and pressing “View Source.”
To find items in the source code, press CTRL + F (for Find) to quickly scan your source code for essential SEO elements and troubleshooting errors.
What to look for in the Source Code:
Let’s start with the top of the page and attract people to your website in the SERPs (Search Engine Result Pages).
The title tag is what people first read in Google Search; it gives them an idea of what your page is about and why they should click on it. It’s a tiny billboard in search results, so you want to craft your words carefully.
The opening tag designates the start of the title 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.
The content inside the title tag typically matches what is used in the headline of Google search results.
If you want a page to rank for a specific term, you need to have that keyword in the title. It is crucial to have unique titles; duplicate titles only confuse search engines on page intent.
There’s one last thing to remember: every webpage on your website should have a unique title tag. Never duplicate this content.
To automate this process, you can use a free application called Screaming Frog. Screaming Frog scans your website (up to 500 pages on the free version), allowing you to identify duplicates quickly, find titles over a specific word count and missing tags in a matter of minutes.
If Title Tags are the billboards of search results, then Meta Descriptions are the advertising copy. Your copy needs to be written to engage readers to click on your blue link; the issue is, you need to do that within 160 characters.
Most websites forget to add meta descriptions, so Google adds or rewrites over 60% of meta descriptions. Adding descriptions allows you to beat the competition and make your website stand out.
Meta Descriptions are a little more difficult to find with so many “meta’s” in the source code. To find your description, search for
Finding the correct description might become confusing if you have SEO and Schema Plugins installed.
SEO Plugin Example:
You will notice
<meta property="og:description" to tell Facebook and Twitter what to pull for the post descriptions.
Schema Plugin Example:
Schema tells Googlebot and BingBot crawlers important information about your page.
Same as Title Tags, you will want to check for missing, duplicate, oversized descriptions in an automated Screaming Frog audit.
H1 tags are your page titles; it’s what people read first when they first land on your page; you want to make it compelling and descriptive, or else people will bounce and go somewhere else.
You should only have one H1 per page; HTML5 now accepts more than one H1 tag, but try to keep it down to one per page.
It’s also important not to stuff your H1 with too many vital fraises that will look unnatural to readers and could penalize you in Google’s algorithm.
You can find your H1 tags by searching for
<h1 in the code.
You have several options when it comes to link types.
There is no attribute for “do follow” links, so every link is followed unless otherwise stated.
Nofollow is an attribute you can add to internal links that tell search engines not to follow that link. In the past, this attribute was primarily used for PageRank sculpting; you will notice no-follow links by the
User-generated (USG) links have been created by users with write access to your website. This user-generated link is typically added to community forums. You can find these links by searching for
If a person or business has paid you to add a link to the page, you must declare this is a sponsored link by adding
You can find Links by searching for
Image Alt Tags
Content is king, but images show what you are talking about; it’s essential to add ALT tags to your photos for Search Engines and the visually impaired.
When a search engine crawls your website, they only look at the source code, so the only things they can see/read are the file names and alt tags.
You can find an image by searching for:
WordPress can add a lot of code to your images, you can also search for
Often overlooked, in the excitement of launching a new website, people forget to verify the Analytics codes have been properly installed.
If you are using Google Analytics, you can find the tracking code by searching for “
Alternatively, you can use Google Tag Assistant Chrome Browser Extension. Or by using Screaming Frog’s Custom Extraction settings. This step is vital in checking that every page has analytics installed correctly.
Navigating your website
No matter how well your website is organized, it can sometimes be difficult to find pages quickly.
I find XML sitemaps a great way to find and review pages. You can find your XML sitemap by going to your website then typing
If you receive a 404 page, that means you have not installed an XML sitemap. Not having an XML sitemap could be hurting your search visibility. You can install one automatically by adding the Yoast Plugin for WordPress sites and using Screaming Frog to generate an XML sitemap for your static website.
After adding or installing a plugin, you will want to tell Google where it is by adding it to your
I hope you found this guide valuable. Feel free to ask me any questions or add suggestions below.
Published on: 2021-03-20
Updated on: 2021-03-29