It is not just geek stuff: the source code is the representation of the HTML code of a website written in this programming language, that a machine (like the browser) reads and compiles in the image and functions and that we users can view in a simple way.

It is, then, the real framework of the pages of our sites, which contains all the information that transmit to the browser, users and even to Google crawlers: we understand, therefore, that knowing the source code can be important for SEO, too, since it determines the correct execution of a web page and provides information on the optimization potential.

What is the source code

When it comes to computer programming or software, the source code is the code used to create the program.

Similarly, in reference to a website, the source code,or HTML source code is the HTML or other code used to generate a web page on a browser, which can be viewed by anyone visiting the site (unless it is server-side code).

The source code is therefore the textual representation of the programming behind any web page or software; it therefore contains all the HTML programming that allows the browser to organize the texts, the links and images of a document and the instructions to make all these elements appear on the user’s screen.

In the case of websites, this code can be viewed by anyone using various tools, and more simply through the web browser itself.

Visually, usually the web source code is distributed across multiple lines and in the eyes of the less experienced it can scare this set of strings and characters: in fact, it is simply the code that web browsers “read” to understand how to view the contents of a web page, and that is also read by Google and other search engines to find out what our site is about.

In summary, search robots see the code, they read it, they determine how to classify the site, where it’s listed in search results and what’s published on the site.

How to view the source code of a Web page

Users do not directly display the source code, but only the final result of the instructions and commands entered. Yet, all of us can see the source code of any web page we are browsing, simply using a simple feature present in the most popular browsers.

To enable the display of the source code of a website using browsers such as Google Chrome, Firefox or Edge just open a browser window, reach the page we are interested in and use one of the following ways (which may have slightly different names, but with the same result):

  • Right-click on a white part of the page and select View Source Page from the pop-up menu that appears (option that is not present for all pages, for example those that block the right mouse button features).
  • Click the keyboard keys Ctrl+U (Windows environment) or ⌘-Option-U (Mac environment).
  • Enter in the browser’s address bar the string “view-source:” followed by the full page URL (for example, view-source:https://www.example.com/), which also works on mobile devices.

Confronto tra sorgente pagina e pagina visualizzata nel browser

Regardless of the method, it will open a new tab that contains a screen similar to the one at the top in the photo, which reports all the HTML code behind the web page that we usually see (at the bottom of the image).

Tools to inspect the page

If we want to learn more about our analysis and we are not afraid of strings of code, we can use another function integrated in the browsers, which allows us to view the source code and other functions of the page itself.

Launching this analysis tool – often also used by web design professionals to check the appearance of sites or to verify the impact of some changes – is very easy: simply open in a browser the page that interests us and

  • Right-click and select “Inspect” (on Chrome), “Analyze” (on Firefox) or Inspect item (Safari).
  • Search for the item from the browser’s advanced settings menu.
  • Simply click on the F12 key on the keyboard.

It opens an internal window that gives us the possibility to use various development tools, thus extending the possibilities of intervention. An interesting (and useful) aspect is that we can directly verify the items on page we are interested in (a portion of text, a link or an image) by clicking with the arrow, or on the contrary browsing the source code (with page highlighting of the selection portion): in practice, in this way we can know in real time to which part of a line of code corresponds each element of the web page.

Source code and SEO: which info we can find

We cannot control Google, but we can control what happens on our site: this maximum applies in every field of SEO and helps us to understand why it is important to know how to find and read the source code of our pages – to the point that source code optimization is considered a part of the technical SEO.

Sometimes, in fact, the things we see published online and what instead see Google and Googlebot differ, and therefore the page may not meet the standards required by search engine crawlers. Therefore, in some SEO processes you must necessarily be able to read the code, so that you can quickly find the elements that you can detect critical and that are not immediately visible to regular users.

In the source code of the page we can detect and correct some SEO errors, first, but we can also find additional information on a website (including those of competitors): for example, analyzing the source code we can find hidden links, or discover the attribute set for external links; in addition, the source code contains important information about the CMS used, markup or metadata as meta description or meta title, and still indicates canonical tags, the content of a website and the monitoring codes for marketing purposes.

What to check inside the source code for the SEO

The analysis of the source code of a website allows us to manually check various aspects related to SEO.

Among the most common applications are:

  • Verify the presence of H1 tags

The SEO best practices suggest to set only one H1 tag per page: to check if the page respects the indication you just need to view the HTML source code and search for <h1> to find out if the title has been entered and only one appears.

  • Check the presence of meta description

If we want to make sure that we have inserted the meta description for the page, or if we want to “study” the description of the page of another site, maybe of a direct competitor, just the source page and look for the field meta name=”description”.

  • Verify the attributes of outbounding links

Through the page source we can also find out if outbounding links are marked with particular attributes – that is if they are follow or nofollow links, or if they still use the other UGC and sponsored rels. Again, just view the HTML code of the page and check the occurrence of the word “nofollow” (or UGC or sponsored) within the element <a></a>.

  • Verify the Tag Robots

The instructions meta tag robots are used to give guidance to search engine crawlers on how to scan and index the page: through the source code we can find out, therefore, if the page indexing is blocked (noindex), if there are limitations for preview snippets (nosnippet), if links are not to be followed (nofollow). By checking the presence of these commands in the page source we can avoid accidental errors that can negatively affect the performance of the page and site.

  • Verify page attributes

Always with the visualization of the source code and a simple search in page we can verify other attributes tied to the page. In particular, we can analyze the rel canonical – which communicates to Google that the page in question is canonical and priority, while any other pages are “copies” – and the hreflang attribute, useful if the website is available in multiple languages.

  • Verify Alt Tags of images

Among the information present in the source code there are also those related to the images, and in particular the alt text that we have set; or, frequent case, we can find that the image does not have a related alternative text, an error that can affect the usability of the page. To check the presence of the alt text we have to look for the occurrences of “alt=”.

  • Verify connection with Google Analytics

Another useful check is to check that every page of the site is connected to Google Analytics. To find out, we need to look for “UA” in the source page followed by a 7-digit code, which confirms that Google Analytics is installed on the page.

The source code can also serve another SEO task, which is to optimize the speed of the website: in principle, a defective source code may result in a reduced functionality of the page (which in turn may negatively impact the ranking), and verifying the text-to-code ratio is useful for reducing the loading time of a website.

In general, the simpler the source code of a website, the faster bots can scan the page, finding and indexing the content faster.

As a starting point, we can view the HTML of a page and try to identify the elements (including JS and CSS files) that can be removed without compromising functionality, to reduce the page size and speed up the download; so with the help of other tools (such as Google’s Pagespeed Insights), we can continue to further optimize the code.

Why to read the source code

In conclusion, visualizing the source code of a page is a very simple operation and within the reach of all users, and learning to read it will help us to quickly verify a number of important SEO elements, such as the presence of an optimized title, of link or meta-tag attributes used on our pages or on those of competitors on their pages.

You don’t need to have developer skills to detect obvious problems that can slow down or destroy our optimization efforts, because you only need a few controls to uncover and resolve some common SEO errors that can cause huge damage.