What’s the value of Page Source, and how do you find it?
What is a Page Source?
Through Page Source, you can identify key HTML factors of your website which can significantly help you improve your SEO and user experience. Some information of the HTML is not revealed like password generators, security information, and such forth which is operated externally and uploaded to the website.
How do you open a Page Source?
Chrome: Ctrl + U
Internet Explorer: Ctrl + U or Right Click and select “View Source”
Firefox: Ctrl + U
Safari: Option + Command + U or Right Click and select “Show Page Source”
Firefox: Command + U
Chrome: Option + Command + U
What are HTML Resources?
Resources come in three major forms:
Other forms include:
How do you read a Page Resource?
Page Source: Resources needs to be broken down into pieces.
There are 8 important factors that can be identified in the image above:
- Total Payload
- SEO Title
- SEO Description
- Opening Tag
- Image Resources
- JS Resources
- CSS Resources
Opening and closing tags are important for the basic structure of HTML, and identification of scripts, information and where they are on a page!
<head></head> tags mostly contain scripts that run in the back of the website. No information in the <head> tag is displayed directly on your website and is important for identifying meta information, and SEO tactics.
<body></body> tags contain all of the information that is displayed on the website from navigation, to links to text!
<footer></footer> tags are important for local SEO. <footer>’s mostly contain important links, key resources, and contact information. Putting in addresses, and other contact information could lead to rich snippets,
Page Source: Resource
There are 8 sources of information that can be found under Page Source.
- Elements refers to the visible elements on screen
- Network relates to the travel path of the data from server –> Client
- Debugger displays the exception rules and parsing failures
- Resources contains all of the resources called to display the website which are housed on servers
- Timelines is the progression of the website loading from first request to final parsing
- Storage contains both local storage, session storage, and cookies on the website
- Canvas is a special context created by scripts or CSS
- Console displays detailed information about errors or warnings that occur in the web-load.
The HTML <title> is what is displayed in the tab of the browser. This is also what’s displayed on a SERP (Search Engine Results Page) when your website comes up for a query. This is a super important indicator for Search Engines and users in determining which website to choose for a result. Make sure this is optimised for your keywords and your site function!
HTML <meta content> is important for what’s displayed under the SEO title in a Search Engine Results Page. This is most important for query matching! It’s best to configure this according to what your ideal customers would be searching. If they use specific keywords, or word structures, make sure to write your description in a way that matches that format.
CSS are the design aspects of the website, Your HTML comes out as raw text, images, and grids that is then styled and correctly designed by your Cascading Style Sheets (CSS). Colours, fonts, box outlines, all of the design aspects are under here. Sometimes there are .tff (text files) that are called through CSS which have errors.
Images are also located on servers the same way as all other resources are. Images are often a source of large payloads and data delivery. Here all images can be viewed along with their location in the overall directory. No information is presented on their file size as this can be found under Page Source: Timelines.