Methods to Learn Web site Supply Code

A graphic that says "How to Read Your Website's Source Code"

Beneath all the pictures, textual content, and calls to motion in your web site lies your webpage supply code.

Google and different engines like google “learn” this code to find out the place your webpages ought to seem of their indexes for a given search question.

It is a fast information to point out you easy methods to learn your personal web site supply code with a purpose to ensure it’s Web optimization-friendly.

I additionally will go over a number of different conditions the place figuring out easy methods to view and look at the precise components of supply code will help with different advertising and marketing efforts.

Methods to View Supply Code

Step one in checking your web site’s supply code is to view the precise code. Each net browser means that you can do that simply. Under are the keyboard instructions for viewing your webpage supply code for each PC and Mac.


  • Firefox: CTRL + U (Which means press the CTRL key in your keyboard and maintain it down. Whereas holding down the CTRL key, press the “u” key.) Alternatively, you possibly can go to the “Firefox” menu after which click on on “Net Developer,” after which “Web page Supply.”
  • Edge/Web Explorer: CTRL + U. Or proper click on and choose “View Supply.”
  • Chrome: CTRL + U. Or you possibly can click on on the weird-looking key with three horizontal strains within the higher proper hand nook. Then click on on “Instruments” and choose “View Supply.”
  • Opera: CTRL + U. You can also proper click on on the webpage and choose “View Web page Supply.”


  • Safari: The keyboard shortcut is Possibility+Command+U. You can also right-click on the webpage and choose “Present Web page Supply.”
  • Firefox: You’ll be able to right-click and choose “Web page Supply” or you possibly can navigate to your “Instruments” menu, choose “Net Developer,” and click on on “Web page Supply.” The keyboard shortcut is Command + U.
  • Chrome: Navigate to “View,” click on on “Developer,” after which “View Supply.” You can also right-click and choose “View Web page Supply.” The keyboard shortcut is Possibility+Command+U.

As soon as you understand how to view the supply code, you’ll want to know easy methods to seek for issues in it. Normally, the identical search features you utilize for regular net searching apply to looking in your supply code. Instructions like CTRL + F (for Discover) will allow you to rapidly scan your supply code for necessary Web optimization parts.

Supply Code Title Tags

The title tag is the holy grail of on-page Web optimization. It’s a very powerful factor in your supply code. When you’re going to take one factor away from this text, take note of this:

You understand these outcomes Google gives once you’re looking for one thing?

All of these outcomes come from the title tags of the webpages they’re pointing to. When you don’t have title tags in your supply code, you possibly can’t present up in Google (or in every other search engine, for that matter). Imagine it or not, I’ve really seen web sites with out title tags!

Now, let’s do a fast Google seek for the time period “Advertising Guides”:

source code - title tag

You’ll be able to see that the primary result’s for the KISSmetrics weblog part on advertising and marketing guides. If we click on on that first outcome and look at the web page supply code, we will see the title tag:

source code for title tag

The title tag is designated by the opening tag: <title>. It ends with the closing tag: </title>. The title tag is often close to the highest of your supply code within the <head> part.

You’ll be able to see that the content material contained in the title tag matches what’s used within the headline of that first Google outcome.

Not solely are title tags required with a purpose to be included in Google search outcomes, however Google identifies the necessary key phrases in your title that they assume are related to customers’ searches.

If you’d like a sure webpage to rank for a specific material, you’d higher ensure phrases that describe the subject material are within the title tag. To study extra about how key phrases and title tags are necessary in your total website structure, try this publish.

There’s one last item to recollect: each webpage in your web site ought to have a singular title tag. By no means duplicate this content material.

When you have a small web site, similar to 10 or 20 pages, it’s straightforward sufficient to overview every title tag for uniqueness. Nonetheless, in case you have a bigger web site, you’ll need some assist. It is a easy four-step course of:

Step #1: Open Ubersuggest, enter your URL, and click on search.

source code - ubersuggest step 1

Step #2: Click on “Website Audit” within the left sidebar.

source code - ubersuggest step 2

Step #3: Evaluation High Web optimization Points.

source code - top seo issues

After touchdown on the positioning audit overview, scroll right down to the fourth part of outcomes (it’s the final one on the web page) to overview High Web optimization Points.

That is the place you’ll discover in case you have duplicate title tags or meta descriptions. If nothing is exhibiting right here, you’re within the clear. When you see duplicates, such because the 30 pages for my web site, dig deeper.

Step #4: Click on on “Pages with Duplicate <title> Tags”

source code - duplicate title tags

You could discover a main problem, similar to a number of of your weblog posts sharing the identical title tag. You might also discover that it’s no massive deal, such because the 26 pages in my report with the title “Weblog Neil Patel’s Digital Advertising Weblog.”

Upon clicking on the 26 pages immediate, you see:

source code - identifying issues

Whereas the title is similar on 26 pages, it’s nothing greater than the pages of my weblog that home the content material. It’s not the precise weblog posts or main pages of my web site.

Meta Descriptions in Supply Code

One other necessary a part of your webpage’s head part is the meta description tag. This 160-character snippet is a free promoting copy that will get displayed beneath your title content material in the various search engines.

source code - meta data

I’ve seen a whole lot of internet sites that fully ignore this tag. It’s very straightforward to seek out in your supply code:

meta description source code

Test to verify it’s on your whole webpages. Extra importantly, examine to be sure you’re not duplicating it throughout a number of pages. Duplicating a meta description tag isn’t a search engine penalty, nevertheless it’s a really massive advertising and marketing mistake.

Lots of people gloss over the meta description, however you actually ought to put some thought into it as a result of it’s learn by search engine customers. Take into consideration what copy would assist pull in additional guests and enhance click-throughs.

H1 Headings in Supply Code

H1 headings carry just a little on-page Web optimization weight, so it’s a good suggestion to examine your pages to be sure you are utilizing them correctly. For every web page in your web site, look over the supply code to see in the event you spot this tag:

h1 heading source code

You don’t need a couple of set of H1 tags showing on any given webpage. In different phrases, don’t attempt to purposely increase your Web optimization by together with a number of H1s. When you over-optimize your website, it’ll harm you in the long run.

Use your H1s for what they’re meant for: the largest heading on the web page. On your own home web page, this is perhaps your worth proposition.

Nofollows in Supply Code

When you have interaction in hyperlink constructing, then checking your backlinks to see if they’re nofollowed is a should.

However earlier than I’m going additional, I’ve to speak just a little about what “link juice” is.

On the planet of Web optimization, getting one other web site to hyperlink to your website is a good achievement. That hyperlink is seen by engines like google as an endorsement. Search engines like google issue within the variety of hyperlinks that time to your website when they’re rating your website of their engines. “Hyperlink Juice” is a non-scientific time period for the so-called energy that the hyperlink gives your web site or webpage in query.

Nofollows are an attribute that may be coded right into a hyperlink to cease the hyperlink juice from flowing to an internet site. It is a quite common factor you will note within the hyperlinks current within the remark part of blogs.

To search out out in case your backlinks are passing hyperlink juice, you need to examine to see if the hyperlinks have nofollow attributes inside them. In the event that they do, then the hyperlink you labored so laborious to get isn’t doing a lot for you because the nofollow attribute mainly tells Google to disregard your webpage.

The Nofollow Attribute in source code

Within the image above, rel=’exterior nofollow’ is within the anchor hyperlink. Although an individual can click on via on the hyperlink, no hyperlink juice is being handed.

Some individuals assume that Google really does rely some hyperlink juice from nofollows, however to be conservative in your backlink counting, you need to assume nothing is getting handed.

Alternatively, it’s possible you’ll need to “web page sculpt” a few of your personal webpages. Some SEOs consider it’s a good suggestion to restrict what pages you ship your inside hyperlink juice to in order that extra necessary webpages get nearly all of the positioning’s total hyperlink juice. You are able to do this by nofollowing a few of your inside web site hyperlinks. For instance, you would possibly need to nofollow the entire hyperlinks to your privateness coverage or different boring / uninteresting pages.

Google will inform you to disregard this follow, and I considerably agree. It’s form of a tedious, pointless activity, and your vitality is healthier spent on creating nice content material as a substitute.

Picture Alt Tags in Supply Code

Empty picture alt tags are quite common Web optimization boo-boos. Picture alt tags describe what your photographs are to robotic engines like google.

When you run an e-commerce web site, you undoubtedly need to ensure your alt tags are crammed out. A good suggestion is to be sure that the product model identify and serial quantity are within the alt tag description.

image alt tag in source code

Above is a screenshot of a picture tag with the alt tag buried inside it.

You shouldn’t use alt tags for ornamental photographs. That may be seen as an over-optimization and will earn you a penalty. Simply be sure you have your alt tags crammed out for:

  • Pictures of Merchandise
  • Diagrams
  • Infographics
  • Your Web site Emblem
  • Screenshots
  • Pictures of Workforce Members

Confirm That Your Analytics Are Put in Correctly

One final nice cause for checking your supply code is to be sure you have Google Analytics put in on each webpage of your web site.

Checking may be very easy. For Google Analytics, simply view the supply code of your webpages and seek for the letters “UA.”

verifying google analytics in source code

When you discover an occasion the place the “UA” is adopted by a 7-digit quantity, then you may have confirmed that Google Analytics is put in on that one web page.

Additionally, maintain observe of what number of instances “UA” exhibits up in your webpage. Generally, your analytics monitoring code shall be inserted greater than as soon as unintentionally, which is pointless. If that’s the case, you need to have your developer take away the additional cases.

Subsequent, you’ll want to examine the remaining webpages in your website to see in case your analytics code has been inserted on each web page. When you don’t have your analytics monitoring code on each web page of your web site, you’re not getting an entire image of what’s taking place in your website, which form of makes analytics ineffective.

This generally is a daunting activity in case you have an infinite web site. It even may be not possible to examine manually.

I like to make use of to get a textual content file of all of the URLs my web site has inside it. This gives me with a list guidelines which helps to maintain observe of which URLs would possibly want some additional consideration (like having analytics put in on them).

It’s additionally an excellent instrument for being alerted to duplicate content material points and different unusual issues that is perhaps lurking on an internet server.

Even gives you solely 500 outcomes totally free. You could have to ask your developer to present you a URL stock so that you’ve got an entire map of your large web site.

Moreover, you might have considered trying them to create a script or program to carry out these checks for you so that you don’t must do them manually.


Figuring out easy methods to learn fundamental supply code is necessary for anybody constructing an internet site. It helps you create Web optimization-friendly webpages and web sites, in addition to establish pre-existing Web optimization points that hurt your website’s place within the SERPs.

When you’re having bother fixing Web optimization issues or need assist with Web optimization normally, our company will help.

Consulting with Neil Patel

See How My Company Can Drive Extra Visitors to Your Web site

  • Web optimization – unlock extra Web optimization site visitors. See actual outcomes.
  • Content material Advertising – our workforce creates epic content material that may get shared, get hyperlinks, and entice site visitors.
  • Paid Media – efficient paid methods with clear ROI.

Guide a Name