Reading Website Source Code

Under every one of the pictures, text, and suggestions to take action on your site lies your site page source code.

Google and other web search tools “read” this code to figure out where your site pages ought to show up in their lists for a given inquiry question.

This is a speedy manual for telling you the best way to peruse your own site source code to ensure it is SEO-accommodating. I additionally will go over a couple of different circumstances where realizing how to see and inspect the correct pieces of source code can assist with other showcasing endeavors.

The most effective method to View Source Code

The initial phase in checking your site’s source code is to see the real code. Each internet browser permits you to do this without any problem. The following are the console orders for review your page source code for both PC and Mac.


Firefox: CTRL + U (Meaning press the CTRL key on your console and hold it down. While holding down the CTRL key, press the “u” key.) Alternatively, you can go to the “Firefox” menu and afterward click on “Web Developer,” and afterward “Page Source.”

Web Explorer: CTRL + U. Or on the other hand right snap and select “View Source.”

Chrome: CTRL + U. Or then again you can tap on the odd-looking key with three-level lines in the upper right-hand corner. At that point click on “Instruments” and select “View Source.”

Show: CTRL + U. You additionally can right tap on the website page and select “View Page Source.”


Safari: The console alternate way is Option+Command+U. You additionally can right-tap on the page and select “Show Page Source.”

Firefox: You can right-click and select “Page Source” or you can explore your “Devices” menu, select “Web Developer,” and snap on “Page Source.” The console easy route is Command + U.

Chrome: Navigate to “View,” click on “Designer,” and afterward “View Source.” You likewise can right-click and select “View Page Source.” The console alternate route is Option+Command+U.

When you realize how to see the source code, you need to realize how to look for things in it. Generally, similar hunt capacities you use for typical web perusing apply to looking in your source code. Orders like CTRL + F (for Find) will assist you with checking your source code for significant SEO components.

Source Code Title Tags

The title tag is the sacred goal of on-page SEO. It’s the main thing in your source code. In case you will remove one thing from this article, focus on this:

You realize those outcomes Google gives when you’re looking for something?

Those outcomes come from the title labels of the site pages they are highlighting. On the off chance that you don’t have title labels in your source code, you can’t appear in Google (or in some other internet searcher, besides). In all honesty, I’ve really seen sites without title labels!

Presently, how about we do a fast Google look for the expression “Promoting Guides”:

source code – title tag

You can see that the main outcome is for the KISSmetrics blog segment on advertising guides. On the off chance that we click on that first outcome and view the page source code, we can see the title tag:

source code for title tag

The title tag is assigned by the initial tag: <title>. It closes with the end tag: </title>. The title tag is typically close to the highest point of your source code in the <head> area.

You can see that the substance inside the title label matches what is utilized in the feature of that first Google result.

Not exclusively are title labels needed to be remembered for Google query items, however, Google distinguishes the significant catchphrases in your title that they believe are applicable to clients’ quests.

On the off chance that you need a specific page to rank for a specific topic, you would be advised to ensure words that depict the topic are in the title tag. To become familiar with how catchphrases and title labels are significant in your general site engineering, look at this post.

There’s something final to recall: each page on your site ought to have an exceptional title tag. Never copy this substance.

In the event that you have a little site, like 10 or 20 pages, it’s simple enough to audit each title tag for uniqueness. In any case, on the off chance that you have a bigger site, you’ll need some assistance. This is a basic four-venture measure:

Step #1: Open Ubersuggest, Input Your URL, and Click Search

source code – ubersuggest stage 1

Step #2: Click “Site Audit” in the Left Sidebar

source code – ubersuggest stage 2

Step #3: Review Top SEO Issues

source code – top website design enhancement issues

In the wake of arriving on the site review outline, look down to the fourth part of results (it’s the keep going one on the page) to survey Top SEO Issues.

This is the place where you’ll discover in the event that you have copy title labels or meta depictions. In the event that nothing is appearing here, you’re free. In the event that you see copies, as the 30 pages for my site, burrow further.

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

source code – copy title labels

You may track down a significant issue, for example, a few of your blog entries having a similar title tag. You may likewise find that it’s not a problem, as the 26 pages in my report with the title “Blog Neil Patel’s Digital Marketing Blog.”

After tapping on the 26 pages brief, you see:

source code – distinguishing issues

While the title is something similar on 26 pages, it’s just the pages of my blog that house the substance. It’s not the genuine blog entries or essential pages of my site.

Meta Descriptions in Source Code

Another significant piece of your page’s head segment is the meta portrayal tag. This 160 character scrap is a free promoting duplicate that gets shown under your title content in the web indexes.

source code – meta information

I’ve seen many sites that totally disregard this tag. It’s extremely simple to discover in your source code:

meta depiction source code

Check to ensure it’s on the entirety of your website pages. All the more significantly, check to ensure you’re not copying it across numerous pages. Copying a meta depiction tag isn’t a web search tool punishment, however, it’s a major promoting botch.

Many individuals overlook the meta depiction, however, you definitely should place some idea into it since it is perused via web crawler clients. Consider what duplicate would help pull in more guests and increment click-throughs.

H1 Headings in Source Code

H1 headings convey a little on-page SEO weight, so it’s a smart thought to check your pages to ensure you are utilizing them appropriately. For each page on your site, investigate the source code to check whether you recognize this tag:

h1 heading source code

You don’t need more than one bunch of H1 labels showing up on some random page. At the end of the day, don’t attempt to deliberately support your SEO by including different H1s. In the event that you over-streamline your site, it will hurt you over the long haul.

Utilize your H1s for how they’ve affected: the greatest heading on the page. On your landing page, this may be your offer.

Nofollows in Source Code

Assuming you take part in third-party referencing, checking your backlinks to check whether they are nofollowed is an unquestionable requirement.

Yet, before I go further, I need to speak a little about what “interface juice” is.

In the realm of SEO, getting another site to connect to your site is an extraordinary accomplishment. That connection is seen via web crawlers as an underwriting. Web search tools factor in the number of connections that highlight your webpage when they are positioning your website in their motors. “Connection Juice” is a non-logical term for the alleged force that the connection gives your site or page being referred to.

Nofollows are a quality that can be coded into a connect to prevent the connection juice from streaming to a site. This is an extremely normal thing you will find in the connections present in the remark part of web journals.

To see whether your backlinks are passing connection juice, you should verify whether the connections have nofollow ascribes inside them. In the event that they do, the connection you endeavored to get isn’t doing much for you since the nofollow characteristic fundamentally advises Google to disregard your website page.

The Nofollow Attribute in source code

In the image above, rel=’external nofollow’ is in the anchor interface. Despite the fact that an individual can navigate on the connection, no connection juice is being passed.

A few groups believe that Google really checks some connection juice from nofollows, yet to be a traditionalist in your backlink tallying, you ought to expect nothing is getting passed.

Then again, you may need to “page shape” a portion of your own website pages. Some SEOs trust it’s a smart thought to restrict what pages you send your interior connection juice to so more significant website pages get most of the web page’s general connection juice. You can do this by nofollowing a portion of your interior site joins. For instance, you may need to nofollow the entirety of the connections to your protection strategy or other exhausting/tedious pages.

Google will advise you to disregard this training, and I fairly concur. It’s sort of a dreary, pointless undertaking, and your energy is better spent on making extraordinary substance all things being equal.

Picture Alt Tags in Source Code

Void picture alt labels are basic SEO mistakes. Picture alt labels portray what your pictures are to automated web search tools.

In the event that you run a web-based business site, you certainly need to ensure your alt labels are rounded out. A smart thought is to ensure that the item brand name and chronic number are in the alt label depiction.

picture alt tag in source code

Above is a screen capture of a picture tag with the alt label covered inside it.


If you would like to speak to an expert on Reading Source Code, then don’t hesitate to get in touch with Mobloggy. Their friendly and professional team will be more than happy to help.

Rebecca Ruck founded Mobloggy® in 2009 to help small businesses get found online.
Mobloggy® offers a holistic approach to digital marketing and web design, utilizing industry tools and its many strategic layers.