How to Read Your Website Source Code and Why Its Important

How to Read Your Website Source Code and Why It’s Important Many online business owners and online marketers know the importance of SEO in driving traffic to your site. What many do not know however, is the link between SEO and your website’s source code.It does not matter how many SEO tools and plugins you have, at some point, you will need to look into your website’s source code, either to perform a comprehensive SEO audit, or to check individual items that have an impact on your website’s SEO.Are you wondering what exactly a site’s source code is and what it does?Normally, when you open a webpage, you see the perfect typography, beautiful images, various elements that add to the functionality, perfectly placed calls to action, and so on.Underneath these visible elements lies your website’s source code, which is what determines how everything appears on your website.Basically, the source code powers your entire site and is responsible for the site’s look, feel, functionality, and user experience.Aside from powering your site, th e source code is what search engines such as Google read to determine whether and how your web pages should be indexed and how they should appear in search results.This means that your source code plays a very crucial role in your site’s SEO.If you have errors in your source code, this could result in inaccurate SEO data, leading to poor search rankings.Therefore, it is important to periodically review your website’s source code and ensure that everything looks okay.Question is, how do you view your source code, and what exactly should you be on the lookout for when reviewing your source code?HOW TO READ YOUR WEBSITE SOURCE CODEWhile viewing your website’s source code is pretty easy, different browsers have different commands for viewing the source code.In addition, the commands are different for PC and Mac.Below are the commands for viewing your website source code depending on your operating system and browser.PC Firefox: To view the source code on Firefox on a PC, press and hold down the CTRL key and then press the “U” key while holding down CTRL. You can also view the page source code by clicking on the Firefox menu, selecting the “Web Developer” option, and the clicking on “Page Source.” Alternatively, you can right-click on the webpage and click on “View Page Source.”Microsoft Edge: To view the page source code on Microsoft edge, hold down the CTRL key and press “U,” or right-click on the webpage and click on “View Source.” The same works for Internet Explorer.Google Chrome: Hold down on the CTRL key and press “U.” Alternatively, click on the three horizontal lines in the upper right hand corner to bring up the Chrome menu, select “Tools” and then click on “View Source.”Opera: Hold down the CTRL key and press “U,” or right-click on the webpage and click on “View Page Source.”MacSafari: To view the page source code on Safari, hold down the “Option” and “Command” keys and press the “U” key. Alte rnatively, right click on the webpage and click on “Show Page Source.”Firefox: You can view the page source code by holding the “Command” key and pressing U. Alternatively, go to the Firefox menu, select “Developer” and then click on “View Page Source” or right click on the webpage and click on “Page Source.”Chrome: Press and hold the “Option” and “Command” keys and then hit “U.” Alternatively, head over to the Chrome menu, click on “More Tools,” and select “Developer tools.” You can also view the source code by right clicking on the page and selecting “View Source.”WHY IT IS IMPORTANT TO READ YOUR WEBSITE SOURCE CODELike I mentioned earlier, your website source code has a huge impact on your website’s SEO.Viewing your source code is an easy way to check whether various aspects of your site’s SEO are set up correctly.In addition, checking your competitor’s source code allows you to see what they are doing on their websites.You can re verse engineer what is on their source code to achieve similar results on your website.Below are some reasons why you should read your source code.It’s Useful for Checking for Title TagsThe title tag is one of the most important elements for your on-page SEO, and is therefore the most important thing you should check for when reviewing your source code.Whenever you search for something on Google, all the results you are derived from the title tags of the various webpages that the results are pointing to.This means that, without title tags on your website, your website cannot be found on any search engine.To understand the importance of the title tag, I’ll use an illustration. When you search for the name “Cleverism”, this is what comes up. The part highlighted in red has been directly derived from our title tag. When you go ahead and open our website and view the source code, this is what you’ll see. The highlighted part, which appears between the opening title tag and the closing /title tag is what is referred to as the title tag.As you can see, it is exactly similar to what appears on search results when you search for the term “Cleverism.”When reading your website source code, the first thing you need to make sure is that each of your webpages has a title tag. It is not surprising to find webpages that do not have title tags.Remember, if your website does not have title tags, it will never appear on search results. You should also make sure that your title tag is located in the head section of your web page.Aside from being necessary for your website to appear in search engine results pages, your title tag also influences how you appear in search results. Google and other search engines look at the keywords on your title tag to determine what your website or web page is about.For instance, in our example above, if someone searches for the phrase “get your dream job,” t hey might come across our website, because we have the same phrase in our title tag.Therefore, if you want your page to rank for a particular topic, you should make sure that the title tag for this page includes words that are related to that topic. You can check out this post to learn more about title tag optimization.Other important things to keep in mind when it comes to title tags is that you should only have a single title tag for every webpage, and that each title tag on your site should be unique.In addition, you should ensure that there is a title tag for every page on your website.Helps Your Countercheck Your Meta DescriptionsAnother thing you should check out for when reviewing your website source code is your meta descriptions.Just like the title tags, meta descriptions are also found in the head section of your website HTML. The metal description is basically a short (160 characters) description of what a web page is about.When your webpage comes up in search engine resu lts pages, the meta description appears just below the title tag.Once again, let’s perform a search of the term “Cleverism” to understand what role the meta description plays.When you search for the name “Cleverism”, this is what comes up. The part highlighted in red is what is contained in the meta description. When you go back to our website source code, this is what you’ll see. The highlighted part is what is referred to as the meta description.As you can see, it is exactly similar to what appears on search results below the title tag when you search for the term “Cleverism.Since people can read your meta description without having to open your website, the meta description acts as free advertising copy that helps potential visitors determine whether they will find what they are looking for on your website.A surprisingly high number of website owners and developers forget about the meta description, but you should not ignore it.Check and make sure that each page on your website has its meta description, and at the same time ensure that you do not have multiple meta descriptions.Sometimes, you might have two different plugins that could result in your meta description being duplicated.You should also make sure that the meta description is unique for every page. Resist the temptation to duplicate the same meta description on each page.In addition, make sure that the meta descriptions are located in the head section of your HTML.Finally, since the meta description is basically free advertising that determines whether people click-through to your website, take a moment to craft great copy that will help increase your click-throughs and drive more visitors to your site.It’s Useful for Counterchecking Your Heading TagsThe next thing you need to check when reviewing your source code is whether you are using heading tags correctly, since they also have an impact on your on-page SEO.There are different levels of heading tags, with the most common being H1, H2, and H3 tags.The first thing to do when checking your heading tags is to ensure that you do not have more than one H1 tag on a single page.Sometimes, depending on your CMS, WordPress theme, or installed plugins, you might find multiple H1 tags on a single webpage.The problem with this is that most search engines interpret it as over-optimization, which is not a good idea for your SEO. Therefore, make sure there is only one H1 tag per webpage, and this should be used to give visitors a clear idea of what to expect on the page.You should also check whether you have H2 and H3 tags on your webpages.These are used to break up content to improve readability.You can also include secondary keywords in the H2 and H3 tags to complement your main keywords.Countercheck Your ScriptsScripts are great for your website. They are useful for adding functionality to your site. The most commonly used scripts are JavaScript.Despite their usefulness, scripts can be detrimental to your site’s SEO and user experience. First, having too many scripts slows down your loading time.In addition, a lot of developers load the scripts near the head of the content.The idea behind this is that it allows the scripts to load early on when a visitor opens the page.The problem with this, however, is that having your scripts load early means that your site takes significantly longer to load.So, why i s this a problem? Internet users have very little patience.For every second that your visitors wait for your page to load, you might experience as much as a 7% decrease in conversion as visitors abandon your site.This can have a significant impact on your site’s revenue.This is why it is very important to countercheck your scripts.The first thing you need to do here is to check the number of scripts on your site.How many are they? Do you actually need all these scripts?Sometimes, you might discover that some scripts are still active on your website even if they are no longer necessary.Not only do such scripts slow down your load time, they can also lead to additional errors.The other thing you should do is to move the scripts to the bottom of the page. Place them just before the closing body tag in your site’s HTML.Alternatively, you can create one JavaScript file containing all your scripts and then link to this file at the bottom of your HTML.Either of these two approaches mea ns that the scripts do not have to load before the rest of the site, thereby leading to a significant increase in your site’s loading speed.When counterchecking your scripts, you should also check whether any installed tracking codes, such as Facebook tracking code or Google Analytics, are installed correctly.If these tracking codes are not correctly installed, there’s a chance that you might not be collecting any relevant data.Finally, counterchecking your scripts allows you to discover if your site has been hacked. As you go through the installed scripts, confirm that all the active scripts have been authorized by you.If you find a script you do not recognize or did not authorize, there is a chance that it could have been injected there by a hacker.Viewing your source code is the only way to get complete visibility of all the scripts that have been installed on your site.Check for NoFollow LinksAs a website owner or an internet marketer, you probably know how important link bu ilding is for your SEO efforts.However, all your backlinks might be serving no actual purpose if they are nofollowed.To understand what exactly nofollows are and why it is important to check for them, I need to talk about something known as “link juice.”While indexing websites, search engines interpret links to your site as endorsements from other websites. If someone has chosen to link to your content, then this means that the content on your site is relevant and valuable.The more external sites you have linking to your site, the more authoritative your site is perceived to be by search engines, which increases the likelihood of your site being ranked higher by the search engines.The influence of such links to your search rankings is what is referred to in non-scientific terms as link juice.Sometimes, you can code an attribute into links to prevent the link juice from passing to the linked site. These attributes are known as nofollows.Basically, the nofollow attribute tells sea rch engine robots crawling through a site to ignore that link.If a website linking to your site has nofollowed the link, then the link is not passing any link juice and does not contribute to your search rankings.This is why it is important to go through your source code and check for any external links that have the nofollow attribute even if they shouldn’t.Check for Image OptimizationDid you know that the images on your site also contribute to your site’s SEO?The key to using images for SEO purposes is to ensure that your images have title and alt tags.Search engine robots crawling through websites do not have the ability to view what is contained in images.With title and image alt tags, you provide a way for these robots to understand what your image is all about.The image title tag gives the image a title, while the image alt tag contains a short description of the image.Using title and alt tags for your images is especially important if you are using the images to sell prod ucts on an ecommerce site.When using images for ecommerce, you should include the product’s brand name and a brief description as part of your image alt tag.Other images that need to have alt tags include logos, infographics, explainer diagrams, team photos, and so on.However, it is not necessary to include alt tags for decorative images, such as those that appear in the image carousel at the top of your page.When writing the description for your image alt tags, avoid stuffing too many keywords, since this could result in your site being penalized.When reviewing your page source, you can view images either by looking for the img tag or by navigating to the “elements” panel after you open the source code.In the elements panel, you can check the size of the images to see if they increasing your load time.You can also check their responsiveness to see if they are optimized for viewing on different screens.Countercheck Meta Robots TagsThis is another common thing that a lot of mar keters and website owners either forget or choose to ignore.The meta robots tags give search engine robots instructions on whether specific pages should be indexed or not, whether links within the content should be followed or not, and so on.Here’s why it is very important to countercheck your meta robot tags.If the content in your meta robot tags is incorrect, it will give the wrong instructions to the search engine robots, which means you will be sabotaging your own SEO efforts by preventing these robots from indexing your content.If you read the page source of this article on our website, you will notice it has a meta robot tag, which is highlighted in the image below. This meta tag lets crawlers know that this page should be indexed and that the links on the page should be followed.Confirm That Google Analytics is Properly InstalledAs a webmaster or online marketer, you are probably already using Google Analytics to monitor and track various statistics on your website.However, there is a chance that Analytics is not installed on every page, in which case you might not be monitoring some important statistics.Fortunately, you can check whether Analytics is properly installed through your website source code.To check for Google Analytics installation, simply open your website source code and search for “UA.” For instance, if we open the source code of the article we used in the example above, you will notice that Google Analytics is installed on the page. If you come across the letters UA followed by a 7 or 8 digit code, this shows that Google Analytics is installed on that page (not the entire website).You should also check to make sure that the tracking code does not appear more than once on a single page.Repeat this procedure on every page to make sure that Analytics is installed on the rest of the pages.If you come across a page that does not have a tracking code, this means you are not getting any analytics from that page.If you have a huge site such that you cannot manually check for the analytics tracking code on every single page, you can use a tool like xml-sitemaps.com to make the work easier for you.WRAPPING UPYou might not have considered it, but viewing your website source code can be a great way of performing an SEO audit on your site and confirming that everything on your site is okay.The best part about it is that you do not need to be a web developer or to have lots of technical expertise in order to pick through your website source code.Next time you need to find out whether there are some errors inhibiting your SEO efforts, instead of having to hire someone to do it for you, why not do it yourself by checking your site’s source code?In addition, checking your competitor’s source code will allow you to see what they are doing on their websites.