How to Read Your Website Source Code

Do you ever wonder what code is running the web pages on your browser? If so, this post will give you a brief introduction to how to view your website’s source code. This article will provide helpful tips for navigating and understanding the different codes used in HTML, CSS, and JavaScript. It also covers where to find these codes if you’re not quite sure of where they are! Once armed with this knowledge, you’ll be able to see how your favorite websites work under the hood – or even make changes yourself!

In order to read your website’s source code, right-click “view page source” or press CTRL+U (command-u).

How-to: View Source Code on a website
How to View Source Code on a website

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.

Reading code: JavaScript Source Code
Website Source Code

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.

Keyboard Shortcuts

PC Computers (Microsoft/Windows)

  • Firefox – press CTRL+U. Or you can go to the Mozilla 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 dropdown menu (hamburger) 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.”

Mac Computers

Reading source code: Right-Click to View Page Source in Safari
Right-Click to 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. This will activate the develop menu in Safari.
  • 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 bar and then click on “Developer” and pressing “View Source.”
How to view the source code in Safari
Right-Click to use Browser Inspect

To find items in the source code, press CTRL+F (for Find) to quickly scan your source code for Search Engine Optimization, web design, and troubleshooting errors.

What to look for in the Source Code:

Title Tags

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.

Learn how to read code: Title Tag Code Example
Source code of a web page – Title Tag Example

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.

Screaming Frog crawl audit
Screaming Frog Audit

Meta Descriptions

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 <meta name="description">

Meta Description Code Example
Meta Description Example

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.

Site's Source Code - SEO Plugin Meta Description Code Example
SEO Plugin Meta Description Example

Schema Plugin Example:

Schema tells Googlebot and BingBot crawlers important information about your page.

How to Read your Website Source Code
Schema Meta Description Example

Same as Title Tags, you will want to check for missing, duplicate, oversized descriptions in an automated Screaming Frog audit.

H1 Headings

H1 tags are your page titles; it’s what people read first when they land on your page; you want to make it compelling and descriptive, or 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.

H1 tag Example
H1 Code Example

Links

You have several options when it comes to link types.

Follow Links

There is no attribute for “do follow” links, so every link is followed unless otherwise stated.

NoFollow

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 rel=nofollow.

USG

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 rel=usg

Sponsored

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. rel=sponsored

You can find Links by searching for <a href=

Home page - A href Links example
A href Links

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: <img src=

Image SRC Link Example
Image Link Example

WordPress can add a lot of code to your images; you can also search for alt=".

Analytics

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 “UA-

Google Analytics UA- Script Example Snippet
Google Analytics Script Example

Alternatively, you can use Google Chrome Google Tag Assistant 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 /sitemap.xml

E.g., domain.com/sitemap.xml

XML Sitemap Example
Yoast XML Sitemap Example

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 Robots.TXT.

Robots.TXT Sitemap Example
Robots.TXT Example

Final Word!

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-10-09

Avatar for Isaac Adams-Hands

Isaac Adams-Hands

Isaac Adams-Hands is SEO Director with SEO North, where he helps the team plan marketing goals that are keyword-optimized and measurable for over 30 clients simultaneously. He has worked at Microsoft, The institute of chartered accountants in Australia, Auto Trader, Le Cordon Bleu, and Algonquin College in various Digital Marketing Roles. Isaac is qualified as a Full-stack developer, Server Administrator, and Cyber Security expert, adding additional experience to his Search Engine Optimization knowledge. His Inuit heritage brought him to the Arctic to hunt and fish for most summers, which grew his passion for 4-wheelers and dirtbikes.