how to view source code

How To View Source Code Of Any Website And Why

Do you have an idea about how to view the source code of any website and why it can be a good idea if you start reading it?

Most of the people don’t know it, but you can look at the source code of any website very easily.

I am here to tell you how to do it, why you should do it and I am going to teach you how to do it.

All the stuff that you see rendered on browsers comes from thousands of lines of codes. Generally speaking, these lines of code make not a lot of sense to a simple human.

Google can see your website only through the code that you write for your sites. If you write bad code and your website looks beautiful Google and search engines won’t know it.

If you are making mistakes behind the scenes, you will be sooner or later penalized and you will not rank.

how to view source code

This is why I am here today to teach you how to view source code and how to understand some basic concept and things that need to be done to have an SEO friendly site.

 

How To View Source Code

There are a lot of ways you can use to view the source code of any website. But generally speaking, if you are a newbie you might want to start with the source code of a website on a browser.

Here on this table, I will show you the shortcuts you can use on a PC and on A Mac depending on the browser you are using.

 

MAC PC
Chrome OPTION+COMMAND+U
or
Mouse Right Click & View Page Source
CTRL+U
or
Mouse Right Click & View Page Source
Firefox COMMAND+U
or
Mouse Right Click & View Page Source
CTRL+U
or
Mouse Right Click & View Page Source
Opera COMMAND+U
or
Mouse Right Click & Page Source
CTRL+U
or
Mouse Right Click & View Page Source
Vivaldi COMMAND+U
or
Mouse Right Click & View Page Source
CTRL+U
or
Mouse Right Click & View Page Source
Safari OPTION+COMMAND+U
or
Mouse Right Click & View Page Source
Internet Explorer CTRL+U
or
Mouse Right Click & View Page Source

 

All you have to do is to go to any website and use the shortcuts in the table above, depending on the browser you are using.

 

If all of this is not enough, you can geek around and just add this code:

view-source:

before any URL you want to read the source code, for instance:

view-source:https://marcodiversi.com

 

This trick can be used for instance to view a website source code on mobile.

Then I suggest you to learn to code a little bit with freecodecamp.org. Complete at least the front end developers section.

 

LEARN TO CODE FOR FREE

 

If you are lazy to learn to code, I am going to tell you how to move around the page for the basic things.

 

How To Search For Things In The Source Code

Once you are on the website source code page, you can finally search for things and SEO stuff.

The easiest way to find stuff is by using the CMD+F or CTRL+F function of any browser which will allow you to find text within the page.

find on a browser

A basic nerdy thing you should know is that what is visualized on a web page is mainly made with these programming languages:

  1. HTML
  2. CSS
  3. JS

1. The HTML is usually the code you are able to see using the view source code methods on the table above.

The HTML code is the structure of the website, it’s the easiest language to understand and probably the only one that you need to understand when it comes to SEO.

2. A webpage with no CSS will look like a list of words with no sense and style, the CSS code is the one that gives your page style.

You can find the CSS code of any page if you do a CMD+F search for:

.css

You will then land on some links you can click; if you click them you will get the CSS code of that page. There are usually several CSS links.

3. The JS code instead is something you should slightly understand as well. It is usually used to create special effects and or to add scripts to your websites that are doing a specific job.

For instance, if you are familiar with Google analytics, when you make a Google Analytics account, Google will tell you to add a JS script on all the pages where you want to Google analytics to track.

 

What To Search On The Website Source Code?

If you own the website you can search for things, bugs and not SEO friendly stuff so that you can modify it and improve it.

If you are looking at somebody else website you can just try to spy and look how their code looks like. You can improve your sites based on the info you gathered.

All of the HTML code is made of tags, there is always an opening tag <> and a closing tag </>.

Super Simple!

For instance, if you want to create a title for your site, the stuff between the tags will be what you see into the browser, while the tags tell search engines who is the title, i.e.:

<title>This Is The Title Of My Awesome Page</title>

If you have done freecodecamp a bit your life will be easier. If not, speaking about SEO here are the things you can check.

The title tag, for instance, is very important, this is what will appear on search engine result pages (SERP).

title and meta description on the serp

Meta tags instead are invisible on the webpage but they will help search engines to get precious info. For instance:

 

<meta content="This is The Search Engine Snippet Description" property="description">

 

Although Google might change this to whatever suits him better, theoretically this is what you want Google to show on the SERP.

This will not be on your webpage, but these are info that you will give to crawlers.

There are a ton of these tags, and here I am going to list some of the most important for SEO.

 

The Title Tag

<title>This is a Title</title>

The title tag is one of the most important tags speaking about SEO, you should have one on any page.

There are certain rules to respect when it comes to the title tag,  here the 2 most important ones:

  1. length50–60 characters max.
  2. unique: you need to put only one title tag per page and you must not have duplicate titles among pages.

 

title on serp

 

The Meta Description Tags

<meta content="My cool SERP description goes here" name="description">

There are a lot of meta tags, and even the ‘meta description’ tag has its own variations. For instance, the property="og:description" is the description for the social networks preview.

But for now we don’t care, it is essential that you put a unique meta description tag like for the titles.

This will tell Google what to visualize in the snippet. There are some best practices to follow, and here are the 2 most important:

  1. length: 120 to 158 characters max.
  2. unique: you need to put only one meta description per page and you must not have duplicate meta description among pages.

 

how to view source code 1

 

The Slug

https://marcodiversi.com/blog/semrush-competitive-intelligence/

The slug is the part after the domain name of any of your web pages. This can be seen on the source code and it’s recommended to add a canonical attribute to any of your unique pages.

<link href="https://yourwebsite.com" rel="canonical">

The slug is something that engines need to understand your page.

It is very similar to the title tag and also very important. There are certain rules you should respect when writing effective slugs:

  1. length: it is recommended that the total length of the URL domain + Slug < 115 characters,
  2. you should divide the words with dashes only (),
  3. it is recommended to remove numbers, capital letters, special characters,
  4. the slug should reflect the topic of the page
  5. it must be unique among all the pages

the slug

 

The Meta Verification Tags

<meta name="google-site-verification" content="btigtf1LVTbcEpzZvBYFKmbuPrMkbyT27lgfPDcknZY" />

Search engines need to verify that you are the owner of a specific website. You can start your verification procedure from the webmaster’s tools of any search engine.

The one you need to use for Google, for instance, is this one.

The easiest way to verify the property is by adding a verification metatag to your site.

These tags are given from the webmaster tools and will not be shown on your site.

 

verification meta tags

 

The Link Tags

<link href="css/bootstrap.min.css" rel="stylesheet">

The link tags are usually tags that are telling search engines to look also for external files to render that specific page.

It is always recommended for instance to always use the link tags to connect your CSS code to a specific page.

Everything static that needs to go on a specific page and that it’s not HTML code needs to have a link tag and link to an external file.

 

link tags

 

The Head Tags

  1. <head> 
  2. .
  3. .
  4. </head>

All of the stuff above does not get rendered in your browser page. This needs to be wrapped in between the head tag.

Usually, the stuff in the head is used by engines to pick up precious information. Users are not able to see them unless they view the source code of a page.

html page example

 

The Body Tags

  1. <body> 
  2. .
  3. .
  4. </body>

The stuff that gets rendered in the browser is usually wrapped in between the body tags.

These tags are telling browsers that the things in it need to show up when a user visits a website.

The few tags listed below are going to be included in the body tag.

Note that if you are using Wordpress all of this will be automatically generated. But, sometimes depending on the kind of website you have, WordPress makes mistakes and you will need to fix these errors.

 

The Footer Tags

  1. <footer> 
  2. .
  3. .
  4. </footer>

Same applies for the footer tag, this is positioned at the end of your webpage code. As you can tell this will include information about the footer of your site and in most of the cases, the stuff in it will be rendered.

It is recommended to put certain scripts just after the footer tag since scripts are usually slowing down your website rendering.

If you put EXTRA scripts at the end after the footer these will be loaded later and you could improve the user experience.

marco diversi footer

 

The Scripts Tags

  1. <script> 
  2. .
  3. .
  4. </script>

Scripts are usually made of javascript code (JS). For instance, if you look at my website there is a chat support on your bottom left, in order for you to see that you need to install a script.

This will be given by the provider of the service you are trying to use.

It is recommended to put the extra scripts just after the footer tag. (extra = not the files that are needed to render your page).

If you have many scripts on top of your page or inside the head tags just move it after the footer tag.

 

scripts at the end of the code

 

The H Tags

<h1>Heading 1</h1>

The H tags are also very important. These are the headings of your pages, and they tell search engines what are the main topics of your page.

H tags have different weight:

  • <h1>Most Important, try to use just one per page</h1>
  • <h2>Less Important than h1, use no more than 2-3</h2>
  • <h3>Less Important than h2, use no more than 6-9</h3>
  • <h4>Less Important than h3, no restrictions but not too many</h4>
  • <h5>Less Important than h4, no restrictions but not too many</h5>
  • <h6>Less Important than h5, no restrictions but not too many</h6>

Try to use these tags in a smart way to highlight topics in your page and as for titles of your paragraphs.

h tags on the table of content

H Tags On The Table Of Content

 

The P Tags

<p>these are paragraphs</p>

Most of your web pages will be made of paragraphs. If you are a WordPress user you can see all of these tags from your editor bar.

h tags on wordpress

 

You can use the paragraph tag as many times as you want too. You should use it to write the content of your web pages.

 

a paragraph

A paragraph example

 

The Rel Attribute

<a href='https://awebsite.com' rel='nofollow'>this is a link</a>

Any tag can have a rel attribute, this information is usually precious when it comes to rankings.

There are many rel attributes:

  • alternate
  • next
  • nofollow
  • noopener
  • prev
  • etc.. etc..

The one you should be familiar with the most is the nofollow attribute.

By default, if you don’t add a rel="nofollow" attribute your links or whatever else stuff will be dofollow.

A nofollow attribute means that you don’t want search engines to pass link juice and value to the link you are linking.

You need to use the nofollow link in a smart way and this is a separate topic you should check out here for instance.

 

nofollow attribute on source code

 

ALT Tag

<img alt="make extra moneysrc="img/money.jpg">

The alt attribute should be always added to any of your images. If you are on WordPress you will have a place where you can add this with ease.

alt attribute on wordpress

The ALT attribute purpose is basically to tell Google what your image is about.

They have sophisticated algorithms to figure out what’s the image about. But if you also describe the image, put the right keywords in it etc… This will help your SEO strategy.

alt attribute

 

The Sitemap

https://yourwebsite.com/sitemap.xml

The sitemap is also another important part of your website that you don’t see but that will help with SEO.

To see the sitemap of your site in most of the cases you just need to add:

/sitemap.xml

after the domain,

or on WordPress, if you are using Yoast SEO:

/sitemap_index.xml

You can check out this article about the best sitemap generators as well to understand it better.

 

marco diversi sitemap

 

The robots.txt File

https://yourwebsite.com/robots.txt

The robots.txt is another file you need to have in your source code. This will tell engines what to crawl and what not to crawl.

There are a lot of uses of this file and you should check out this article if you are interested in this.

All you have to do is to drop the file into your root folder and call it:

robots.txt

If you are on WordPress this can be managed with plugins etc…

 

robots txt

 

How To Edit The Source Code

Now that you are able to view the source code you might want to be able to edit it and make modifications.

The easiest way to do that is by logging into your hosting via FTP. You should read this tutorial about how to set up a FTP access.

 

You should never edit code with TextEdit/Notepad or a regular text editor.

 

There are coding editors specifically designed to deal with code and programming languages.

These editors will help you find out where the code is not going to work; if you have closed the tags correctly and even to launch your sites in preview mode on your machine.

My top advice for coding editors are:

  1. brackets.io
  2. atom.io
  3. sublimetext.com

You should set up your FTP client to open any file that is code with a coding editor.

My favorite FTP client is FileZilla, even though it looks outdated, it’s the best, the easier to use and the most efficient and fast.

brackets io editor

 

How To Edit Source Code With WordPress

It is recommended to edit the source code of your WordPress sites via FTP as well.

All you have to do before editing code is to make a backup. You can use updraftplus to do awesome backups.

WARNING: If you mess up with the code, your site might no longer work and it can be impossible to go back.

Play with code only if you know what you are doing.

Changing the WordPress code is a very cool thing to do, for instance, you can modify themes and plugins and so much more.

If you are writing an article the most straight forward coding editor you will find is the one under the option:

text

next to visual on the editor.

html code on wordpress editor

The visual tab is the easy way to write articles while the text tab is the HTML code that will go onto your webpage so that the browser can understand it.

You can modify the HTML code of your article from the text tab.

If you want instead dig deeper and edit HTML in WordPress you will need to go to the WordPress HTML editor here:

appearance > editor

This will bring a list of files, you can for instance in most of the cases spot the:

  1. header.php
  2. footer.php
  3. style.css
  4. etc…

If you know how to code a bit you can make great things modifying the code there.

You can use this editor to add additional scripts for instance to the footer.php file.

For more complex operations, try to use brackets.io and an FTP client to access the raw files.

header on the wordpress editor

 

ALWAYS BACKUP BEFORE MAKING ANY MODIFICATIONS #wpproblems #backup #smartidea Click To Tweet

 

Conclusions

I hope that now you know how to view the source code of any website and why this is important!

If you start learning to code a bit, you will soon find out that you can do a lot of stuff spying on your competitor’s source code.

This guide was just an introduction and we have discovered that:

  1. to read and view the source code of any websites, you just need to use a browser and in most of the cases press, CTRL + U or right click and view source code.
  2. to edit source code it is recommended to use a coding editor like brackets.io and access the raw files via FTP.
  3. reading your source code can help you make your on-page SEO outstanding.
  4. what you see on a webpage is not necessarily what a search engine crawler sees. You need to have a perfect and clean code to stand out of the crowd.
  5. if you want to view the source code from a mobile you can just add view-source:before any URL. i.e.: view-source:https://marcodiversi.com

 

semrush ton of data

 

This is just an introduction and yet some concept are very powerful and you should research the topics even more.

 

It is recommended and absolutely awesome learn to code a bit, you can use #freecodecamp to learn to code like a king for free. Click To Tweet

 

marco diversi eagle

What You Will Learn On This Blog! 

Stay tuned and subscribe to my blog so you will get notifications on new posts. I will slowly break down these topics:

  1. SEO(Search Engine Optimization).
  2. Affiliate Marketing.
  3. Free and Paid traffic hacks.
  4. Coding and WordPress
  5. Make money with a computer and an internet connection even while you sleep.

Follow me on social media, you’ve got all the links on the right bottom side of this blog, also comment and contact me if you need help.

Here are my top resources I always use to become a great affiliate, take a look here!

Do you want to be a free man or woman? Jump in the crew then!

Much Love and Peace Out,

Marco Diversi.

Last Update:

Cool?
Article Value / Product Value
Summary

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *