Today you will learn or perfect a new skill — how to read the source code. This is important for every publisher and online entrepreneur who runs their website, blog and wants to make it profitable.
What can you use the ability to read your website code for?
After viewing the source code, you can:
- analyze the meta tags of your site and determine whether its source code is optimized for SEO promotion, and make certain adjustments if necessary;
- see the absence of the necessary elements on the site: counters, forms, scripts, and so on;
- optimize various elements on the site: sizes, colors, fonts;
- check the path to images, forms, infographics, tables and other elements on the page;
- check the outbound links of your page;
- detect code problems that interfere with the site promotion and monetization process in search engines: optional scripts, invalid code, and so on.
Content
- What is the source code of a web page?
- How to read the source code of a web page?
- SEO elements in the source code: the basic set
- How reading the source code helps webmasters
- Conclusion
What is the source code of a web page?
When a user enters an URL in the address bar, clicks on a link, or fills out and submits a form, the user makes a request to the target web server this way. In response, the web server sends the requested page to the user’s browser in the form of a set of HTML tags and text.
This set includes:
- HTML markup;
- style sheet or link to a CSS file;
- scripts written on JavaScript.
This collection of HTML, CSS and JavaScript is the source code of the site.
Then the browser processes this information. And, finally, the user enjoys a site with familiar text blocks, images, videos, buttons, subscription forms, navigation and so on.
Google and other search engines analyze the source code along with other parameters, and then determine the website’s place in search results. Successful SEO promotion largely depends on the source code of your web page.
How to read the source code of a web page?
Let’s learn the new skill by doing — viewing and understanding what’s behind the visual display of the website.
How to view the web page’s source code on Windows
For Windows, the source code of a site can be viewed by pressing CTRL + U. This method is suitable for all browsers.
Google Chrome: you can view the source code in another way by right-clicking on the page and selecting the “View page source” option in the pop-up menu.
Mozilla Firefox: you can also right-click on the page and select the “View page source” option in the window that opens.
Microsoft Edge/Internet Explorer: this option will be called “View HTML code”, and for Opera — “View source text”.
Read the website code on Mac
In the Safari browser, using the keyboard shortcut Option + Command + U. Or you can, similar to Windows, right-click on the page and select the option “Show Page Source”.
In Google Chrome, the keyboard shortcut Option + Command + U. Or the “View page code” option.
In Mozilla Firefox, you can use the Command + U keyboard shortcut, or the “Page source Code” option.
View the HTML code on Android phone or tablet using Chrome
Open a web page. Click on the address bar once and move the cursor to the beginning of the URL. Then type “view-source:” At the end, press Enter or Go. For example, to view the code of your page, you must enter “view-source:https://domen.com”
Using Safari on iPhone or iPad to get the source code
To view the source code, create a bookmark. Click on the More icon. In the menu that opens, tap the “Add bookmark” option.
Clear the bookmarks field. Next, enter “View web page source code”. Save the bookmark name. To access your bookmarks, tap the bookmarks icon at the bottom of the screen.
Then click on the bookmark, a menu will open at the bottom of the screen. Click “Edit”.
In the “Edit bookmark” field, remove the URL, and insert this code instead:
javascript:(function(){var a=window.open('about:blank').document;a.write('Source code of '+location.href);a.close();var b=a.body.appendChild(a.createElement('pre'));b.style.overflow='auto';b.style.whiteSpace='pre-wrap';b.appendChild(a.createTextNode(document.documentElement.innerHTML))})();
Click “Done”. Next, use the created bookmark to view the source code of the page.
Special tools and services
There are special services where you can quickly view your page code. You just need to enter the URL. For example, “https://codebeautify.org/source-code-viewer”
SEO elements in the source code: the basic set
The source code of your site is an HTML document. Each HTML document includes the basic elements of the structure. They are needed by the browser for the correct display of information, and by search engines for the correct ranking of your site.
The basic structure of an HTML document consists of 5 elements:
- <!DOCTYPE>
- <html></html>
- <head></head>
- <title></title>
- <body></ body>
DOCTYPE element
The DOCTYPE element is always at the beginning of the HTML document. It is not displayed on the page and is not the same as tags. DOCTYPE tells the browser which HTML standard is used in the document.
Note: Tags are labels, words that can be used to quickly find the necessary information in the page code.
HTML tag
The tag is the basic element. Thanks to it, the browser understands where the content that needs to be processed as an HTML document begins and where it ends. An important part of the html tag is the presence of the lang attribute. It is indicated in the language in which the web page is displayed. For example, for English — en.
Note: HTML document tags have attributes. These are additional values that allow you to customize the elements of an HTML document to meet the criteria of users.
HEAD tag
It will be useful to you when you are looking for a place to put popunder ads, because you need to put the code just before the closing tag
Inside the head tag is the tag, it is displayed in the title bar of the web browser.
Meta tags
In addition, the HEAD tag contains meta tags.
When indexing, search engines check web pages for the presence of meta tags with various attributes, read the meta information and, based on a variety of algorithms, determine the site’s place in search results. Preference is given to a resource with correctly written tags.
So, why do we need meta tags?:
1. They pass service information to search engines. This helps to promote the site for specific target queries. In addition, the presence of meta tags with attributes is taken into account by search engines when evaluating the quality of pages.
2. Also, they help to correctly display content in different browsers and on different devices. That is, the attributes of the tag ─ an instruction on how to show the site to users.
Elements of the “<head></head>” tag can be divided into 2 groups: for search engine SEO promotion and for technical optimization of the resource.
Code elements that affect SEO promotion of the site
Title
The Title tag is an important HTML component of the site. It affects the site’s ranking in search engines and CTR (clickability).
The Title tag is responsible for the site page title and, at the same time, is the snippet title-link. Do not confuse it with the H1 header that is displayed on the site.
For example, we will search “buy iphone 11” on Google. Let’s turn to the search results.
A snippet will appear in the search results ─ the business card of the site page in the search results. The Google search engine formed it using meta information that it read from the source code of the site. Title ─ is the snippet title.
If we look at the source code of the page, we will see the title tag. This is where the title got into the snippet.
Title will also be displayed in the title bar of the web browser.
The Title tag functions
- sends information to search engines about search queries that are relevant to the content of the page;
- takes part in the formation of the snippet and tells users what information they will find on the page by clicking on the link;
- tells the user the name of the open page in the browser ─ when the cursor hovers over the tab, a window with the page name appears;
- appears as the name of an HTML document saved in bookmarks or on a computer.
Why is it important to always fill in the Title in the site code
- It clarifies the content of the page, since it contains the main key.
- An informative and clear Title motivates users to visit the site more actively. This increases the CTR.
- If there is no Title tag in the code, the search engine will start pulling up H2 H3 headers that are not always relevant enough to the content of the page for the title in the snippet, which will negatively affect the promotion of your site.
What to consider when writing a Title
- Fill in the Title tag for all pages of the site.
- The title must be unique for each page.
- The first 3-4 words of the title should contain the main key in the direct links.
- The title should reflect the content of the page and make sense. Not just a set of words.
- The optimal length of the title is 55-60 characters, the maximum is 70 (12 words). A long phrase simply won’t fit in the snippet.
- The Title tag and H1 must be different.
- Do not copy the titles of competitors.
- The title should attract attention and motivate people to visit the site.
Description
A brief description of the content of the page, a preview. The optimal length of the meta tag is 160 characters. There are several keywords in the description.
This description text for the snippet was pulled by Google from the source code of the page.
What to consider when writing a Description
- There should be a separate description for each page of the site. Each page of the site must have its own keys. It’s great when a descripion includes keywords.
- Make the description unique for each page. An easy way is to add the company name.
- If the tag is empty, the search engine will create a description for the snippet automatically.
- It is better to start sentences in the description with keywords.
- It is good to include persuasive words in the description: “Order now”, “Buy now”.
- Include information about promotions, discounts, and gifts in the description.
- Use emoticons. But they must match the subject.
Code elements for technical optimization of a website
ROBOTS meta tag
The Robots meta tag shows the search robot which pages should be included in the index and which should not.
Robots tag has additional attributes:
- index/noindex ─ can/can’t be indexed;
- follow/nofollow ─ follow/ignore hyperlinks;
- all/none (open/close the page and hyperlinks for indexing).
BODY tag
The “<body></body>” tag is virtually the body of your site. Let’s examine its core elements.
The H1 tag
The H1 tag is the main heading of your site, page or article. Its task is to show the reader that the page contains exactly the information he or she was looking for. There should be only one H1 tag on a page. It should not duplicate the Title.
Scripts
The SCRIPT tag connects scripts to an HTML document. The SCRIPT tag is intended for describing scripts, it can contain a link to the program or its text in a certain language. Scripts can be located in an external file and linked to any HTML document.
Alt and Title tags for images
The ALT attribute for images is the text describing the image in the html tag. It becomes visible if an image doesn’t load. The text will appear in place of theimage (if you filled the ALT attribute). The ALT attribute makes it possible to find out what the image is about when the user cannot see it. In addition, search robots take into account the ALT texts when indexing the site. Finally, optimizing image names and ALT attributes in the tag makes it easier to search for the images in Google Images.
How to create ALT attributes for images correctly
- The optimal number of words is 3-4, but the length of the tag text is no more than 75 characters.
- Using key words.
- It is necessary that ALT belongs to the text of the page and describes the meaning of the picture.
In addition to the ALT attribute, you should also write the text in the Title attribute. This parameter gives additional information about the image when the user hovers the cursor over the image.
How to correctly write the Title for images
- The Title attribute must match the image.
- Use a short Title.
- Add keywords to the Title.
The interactive source code of a site: one more tool to help the publisher
So far, we have analyzed the source code of your site with the “View page code” option. This option is useful for analyzing individual code elements.
But you can also get the interactive source code of your site. To do this, you can use the hot keys CTRL + SHIFT + I or using developer tools.
Click on the menu icon in the browser. Most often, it is located on the right and represented with three dots or stripes. In the more tools section, select “Developer Tools”. The menu that opens has several tabs.
Elements tab
The Elements tab displays the entire HTML code of the page. CTRL + search by key or domain. This tab displays the active status of the code. When you click on the markup, you see the element style next to it, and the selected blocks will be highlighted on the page.
Console tab
Console displays information about errors in the code. If there is an error in the HTML code or JavaScript, the browser will certainly write about it here. The example shows that a browser blocked a number of scripts. You can also enter a command in the tab to execute a command. If fonts, images, or styles are not loaded on the page, then you get the error messages here. Warning icons which will open the console window will appear in the upper right corner of DevTools. The Console also disolays all errors (like those with ad codes placement.)
Source tab
It shows all the resources connected to the page. In the Source tab, you can view the contents of some files: scripts, fonts, images.
Network tab
You can use it to find out how long a page took to load, which resources connect to the page, and much more. The first time you open the tab, it may be empty — just reload the page. After reloading, a table of all the resources connected to the page and data about them will appear at the bottom.
How reading the source code helps webmasters
With the source code, you can check whether you have placed native banners, popunders, Social Bar, display banners or VAST ads correctly. When you get the Adsterra codes, you always get a short insctruction on where to put it. Now you can make sure that you placed ads according to those instructions.
See also articles Adding Ads to a Static HTML Site and Installing the Ads to WordPress in our Helpcenter.
Check every page of your site and make sure:
⦁ Your page displays correctly in search.
⦁ There are no empty titles and descriptions.
⦁ Titles and descriptions match, for better ranking in the search results.
⦁ Custom codes and scripts are working as they should.
⦁ All analytics counters are placed according to instructions.
⦁ Your website layout is mobile-friendly.
Conclusion
Now you’re ready to actively contribute to the effective SEO promotion of your site, which will guarantee it a higher place in search results. This means that more customers will visit your site and accomplish the expected target action. As a result, you will get more money.
