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
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.
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:
before any URL you want to read the source code, for instance:
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.
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.
A basic nerdy thing you should know is that what is visualized on a web page is mainly made with these programming languages:
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:
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 </>.
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).
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:
- length: 50–60 characters max.
- unique: you need to put only one title tag per page and you must not have duplicate titles among pages.
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:
- length: 120 to 158 characters max.
- unique: you need to put only one meta description per page and you must not have duplicate meta description among pages.
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:
- length: it is recommended that the total length of the URL domain + Slug < 115 characters,
- you should divide the words with dashes only (–),
- it is recommended to remove numbers, capital letters, special characters,
- the slug should reflect the topic of the page
- it must be unique among all the pages
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.
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.
The Head Tags
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.
The Body Tags
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.
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.
The Scripts Tags
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.
The H Tags
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.
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.
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.
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:
- 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.
<img alt="make extra money" src="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.
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.
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:
after the domain,
or on WordPress, if you are using Yoast SEO:
You can check out this article about the best sitemap generators as well to understand it better.
The robots.txt File
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:
If you are on WordPress this can be managed with plugins etc…
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:
You should set up your FTP client to open any file that is code with a coding 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:
visual on the 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:
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.
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:
- 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.
- to edit source code it is recommended to use a coding editor like brackets.io and access the raw files via FTP.
- reading your source code can help you make your on-page SEO outstanding.
- 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.
- if you want to view the source code from a mobile you can just add
view-source:before any URL. i.e.:
This is just an introduction and yet some concept are very powerful and you should research the topics even more.
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:
- SEO(Search Engine Optimization).
- Affiliate Marketing.
- Free and Paid traffic hacks.
- Coding and WordPress
- 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,