How to find and use the source code of every Web page
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 and which is transformed from an unprocessed text format, somewhat Matrix-like, into images, text, links and everything else that constitutes the visual and interactive experience of a website. So that is why 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).
We can call it the hidden language behind every Web page we visit, expressed through a series of instructions written in programming languages that browsers interpret to present content and design to users.
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.
Take technical control of your site
To summarize, search crawlers see the code, read it, determine how to rank the site, where it is listed in search results, and what is published on the site.
It follows that for SEO and digital marketing experts, source code can be a relevant document for analyzing and optimizing a site, offering direct insight into how search engines see and interpret the content on a page.
How to view the source code of a Web page
We have called it “hidden text,” and in fact regular visitors to a site do not view the source code directly, but only the end result of the instructions and commands entered. Yet, we can all see the source code of any web page we are browsing, without installing special tools or possessing advanced computer skills, by using a simple feature found in most popular browsers that allows us to view the source code in a few simple steps.
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 an empty part of the page and select “View Page Source” from the pop-up menu that appears (an option that is not present for all pages, such as those that block right-click functionality).
- Use keyboard shortcuts, which may vary depending on the operating system. For example, click the Ctrl+U keys on the keyboard (Windows environment) or ⌘-Option-U (the Cmd key in a Mac environment), which is quick and works in most browsers, such as Chrome, Firefox, and Edge.
- Enter in the browser address bar the string “view-source:” followed by the full URL of the page (e.g., view-source:https://www.example.com/), which also works from mobile devices.
Regardless of the chosen method, the action will open a new tab or window showing the full HTML code of the page, along with embedded or linked CSS and JavaScript. Specifically, something similar to the one shown at the top of the picture will appear, showing all the HTML code behind the web page we usually see (see picture below).
Advanced 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.
Developers and advanced users may in fact prefer to use the development and analysis tools built into browsers, commonly known as “DevTools,” which offer a more detailed and interactive view of the code, allowing not only to view but also to temporarily manipulate source code to test changes in real time-for example, web design professionals use them to check the appearance of sites or to preview the impact of changes they plan to make.
To open “developer tools,” we always start by opening the page we are interested in in a browser and then right-click to select “Inspect,” or alternatively use the key combination Ctrl+Shift+I on Windows or Cmd+Option+I on macOS. To be precise:
- 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
Analyzing the source code of a Web site allows us to manually check various aspects related to SEO, and in particular we can find out how a site communicates with search engines and identify areas for improvement.
Among the most common applications are:
- Verify the semantic structure of the page
One of the first aspects we can examine is the semantic structure of the page: that is, checking the correct use of header tags, such as <h1> for the main title, followed by <h2>, <h3> etc. for subtitles and secondary titles, which help search engines understand the hierarchy and importance of the content. SEO best practices suggest setting only one H1 tag per page: to check whether the page complies, simply view the HTML source code and search for <h1> to first find out if the title has been entered and if 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=”.
- Check the use of schema markup at Schema.org
We can also analyze the implementation of schema markup, a code that helps search engines interpret page content in more detail, generating structured data that increases the likelihood that the page will be displayed as an enhanced multimedia result or rich snippet.
- 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 search the page source for terms such as “Google Analytics,” “ga.js,” “analytics.js,” or “gtag.js,” which are the names of the JavaScript libraries used by Google Analytics. If we find one of these code snippets, or something similar, then the page has Google Analytics installed; if not, it is possible that the page is not using Google Analytics or is using a different method of implementation, such as through a tag manager like Google Tag Manager.
- Monitor page loading speed
Source code also allows us to monitor the speed of the website, specifically looking at how external scripts and resources are loaded. In general, faulty source code can result in reduced page functionality (which in turn can negatively impact ranking), and checking the text-to-code ratio is useful for reducing the loading time of a website. In addition, JavaScript and CSS that block rendering can slow down the display of content, negatively affecting user experience and search engine rankings. In general, the simpler a website’s source code is, the faster bots can crawl the page, finding and indexing content more quickly. 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 size of the page and speed up the download; then, 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. For those with a more trained eye, reading source code gives the ability to identify and fix coding errors that could negatively affect page load speed, or even to better understand how content is actually structured and presented.
In addition, reading the source code also allows us to go beyond “classic” SEO by, for example, assessing the usability and accessibility of the site-for example, checking whether images have descriptive alt attributes, which are important both for users using screen readers and for search engines trying to interpret the content of the images.
Ultimately, viewing a site’s source code can be a useful skill for anyone who is serious about working with SEO and digital marketing because it provides an in-depth view of how a site is built and functions, enabling informed decisions to be made to improve visibility and effectiveness on Google.
