How to View Website Source Code and Make Sure It’s Properly SEO-ed
Behind any site and its function lies source code that turns the browser into a convenient and intuitive user interface.
Any code used to be seen as a dark and scary wormhole that can only be understood by an experienced professional with considerable technical experience.
HTML is not that complex and scary, site owners and SEO specialists can benefit greatly from reading it, since there are not that many elements that are needed and you can learn to find them quickly.
Search robots see the code, read it, determine how to rank the site, where it is listed in the search results, and what is posted on the site. Often the things that we see and Google sees differ, which is why some SEO processes require you to be able to read code.
In this article, I will discuss how to view the source code on different operating services and browsers, how this can come in handy with SEO, and why it is useful.
How to read source code
The ways to view the source code are different depending on your operating system and browser. Below, I will explain how to view the code on Windows and Mac, and it the end, I will discuss viewing it on a phone or tablet.
How to view the source code on Windows
How do you view the source code on Chrome and other browsers? You can view the code on Chrome, Firefox, Internet Explorer, Opera, Edge by hitting “CTRL + U”, another way is to right-click anywhere and select the “View Page Source”.
There are alternative methods, in Chrome settings, you can find the “Advanced Tools” tab and then by clicking on “Developer Tools”, you can see the code.
I see no reason to describe all the methods, the two aforementioned methods for Windows are more than enough.
How to view the source code on Mac
The keyboard shortcuts are a bit different here, but in any browser, you can right-click and hit “View Page Source”.
More on the keyboard shortcuts in each browser:
- Chrome- Option + Command +U
- Firefox — Command + U
- Safari — Option + Command + U
How do you view a Chrome page’s source code on a mobile device
You can also view the code on any operating system or browser with a cell phone. For example, view source Chrome (Android). To do this you need to open the site of interest and type “view-source” in the search bar to the left of the site address.
After opening the source code, you do not have to manually search for the appropriate information. Use the “CTRL + F” shortcut, it will open a search window and use it to search for the necessary elements and phrases.
This can be done on a mobile device by opening Settings and selecting “Find on Page”.
How to find SEO elements in the source code
The Title
This tag is one of the most important SEO elements, it is the title that you see when you Google something. The Google search robots pay the most attention to this tag when doing the rankings.
To find this tag, find the <title> attribute in the code source page.
It usually follows the <head>.
When ranking according to keywords, Google not only takes into account the tile, but the search engine considers this tag to be a key one. This is why it is worthwhile to approach it carefully. It should contain the correct keywords while remaining organic.
It is also worth remembering that like any other with content, the title should not be duplicated on different pages, and there should be one on the page.
Firstly, duplication loses important resources in terms of the number of keywords searches that can be put on different pages. Secondly, Google cannot understand which page on your site should be issued for a specific keyword search.
You can read more about cannibalization here.
I recommend that you audit and check that this tag is duplicated on your site. If the site is not big (up to 30 pages) it can be done manually. If you have more pages, it is better to use a special tool, for example, “ubersuggest”.
The Descriptions
Google uses this tag like a snippet, i.e, the text that users see at the bottom of the page.
If this tag is not prescribed, Google will extract a piece of text from the page at its discretion.
Although this tag does not directly affect the keyword ranking, it is a marketing error to ignore it, just like duplicating descriptions.
The optimization of descriptions allows you to experiment with and increase the conversion rate for page clicks. Google itself forms a snippet but it can also take your prescribed description so you need to optimize it so that search bots consider it to be the most relevant for this purpose.
If you see that the site has a low conversion rate from the search results to a page, you should experiment with descriptions.
The h1
This is the main title on a page, it has an impact on the ranking and is usually an important element of the UI. Most often, h1 thing that enters the user sees on the site and it should be a good response to the user’s request.
In this example the h1 contains the desired keywords and remains organic, meaning it responds to the user’s request. It is usually 20-70 characters, but you should not dwell on this because its length is not the main thing.
Most often, this is the most noticeable thing on a page; additionally, Google counts the h1 as one of the most important ranking factors.
Given that Google wants to rely more on user experience when ranking, the title becomes an even more important element of optimization.
Many things are changing in SEO, they are no longer affecting the ranking or carry less weight, but the h1 header is consistently an extremely important element of optimization.
There should only be one h1 heading on a page, by using several you are making the task less effective.
When you duplicate the h1 header, you lose the ability to use more keywords and phrases on your site and, most likely, lose the opportunity to make the site more user-friendly.
Link Attributes
Let’s touch on link building. The goal of link building is getting backlinks from other resources on your site, the more authoritative the resource, the better.
For Google, links from one source to another signifies some approval. If you are linked to, you gain credibility. The system is very similar scientific work, in that scientists reference one another, and the person referred to very often becomes and authority (except when it is a negative reference).
In SEO, the authority that is transferred from one site to another is called “weight”. If you need to put a link on your source, but you do not want to share this weight for some reason, you write the “rel= ‘nofollow’” tag.
To Google, this means that the link must be ignored. Some believe that at least a small weight is passed, even with the “nofollow” attribute, but we will not discuss this here and for this article, we will accept that no weight at all is transferred.
Getting good links is a complicated process and is extremely unpleasant if you have been working a long time to get the right link and it ends up having the “nofollow” tag. I recommend checking your backlinks for this tag so this does not happen.
Some professionals recommend limiting the transmitted weight within the site, for example, prescribe “nofollow” to links to the privacy policy or to other pages that are not interesting for users.
Google does not recommend doing this, and judging from personal experience, it is better to spend time doing something more useful.
Relatively recently, Google released an update regarding the “nofollow” attribute. Some hints that can help the search engine to better understand what the link is.
These are the attributes:
-
Sponsored is an attribute that is assigned to “nofollow” if this link is an ad. For example, let’s take the scenario where seoquake places an ad link for SEMrush. Here is what it should look like for Google according to the new rules:
<a href=”https://www.seoquake.com/” rel=”sponsored”>SEMrush</a> - UGS is an attribute that is needed when you post a link to user-created content. I.e. guest posts, comments, forum topics, etc. Suppose a user leaves a link in the comments to this article, it should look like this:
<a href=”http://facebook.com/fedotovrf” rel=”ugc”>Facebook</a>
Alt and Title tags for images
Alt-tags, are alternative texts for images, a description for the search engine of what is shown in the image. This can help attract traffic from image searches.
The topic of optimizing images and the alt and title attributes is a lengthy one, here you will find some brief information.
Users will only be able to see alt tags if they look at the source code or disable the manual upload of images.
You should not prescribe alt for decorative images since you can be punished by Google for over-optimization. Make sure to optimize these images:
- Screenshots
- Infographics
- A team photo
- Pictures of goods
- The company’s logo
Remember, well-optimized alt-tags can bring traffic from an image search, so do not neglect this. For product photos, online stores most often write the product name and serial number in the alt tags.
The title is displayed when you hover over the image.
This attribute does not affect the ranking. Some experts say that a well-optimized title positively affects the behavioral factors and improves the user experience on the site, which is certainly good for SEO.
Others say that it is not necessary that optimization and prescribing the title to images since it brings next to no benefits. On this controversial issue, I recommend that you assign titles to the images where you think it would make the site more convenient and be useful for users.
Connected Analytics
Make sure every page of your site is connected to Google Analytics. Searching the source page for “UA” should help you approximately find the next picture on the page.
The UA must be followed by a 7-digit code, this confirms that Google Analytics is installed on the page. Sometimes this code is added several times, if you find this, you should remove the extras.
To install analytics or another tool to your site, you need to add the code of these tools to your site code. This can be very difficult for a person without relevant experience.
That is why Google has a tool that partially solves this problem. Google Tag Manager- можно убрать ссылку is a tool that allows you to add the necessary scripts to the site within the interface of the tool itself.
With it, you can add analytics to the site, place remarketing tags, integrate a custom script, and quickly make changes to existing tags.
A major drawback of installing a tag manager is that it is not the easiest task. You can read more about this in Google’s Official Guide – можно убрать.
Tag Robots
The robots instruct the search robot if it is necessary to index the page and whether to take into account and follow the links indicated in the content. This tag is useful if you want to close the page from indexing.
Of course, it is extremely unlikely that your page will be accidentally closed from indexing, but if you encounter a problem when your page is not indexed, it is worth checking to see whether this is written there:
content =”noindex, nofollow” or content = “none”
If the Google robot comes across these tags in you your page’s code, it will not index it because you told it not to.
If a product is available in different colors, on your site, this is most likely posted on different links that are exact copies of the original page (except for the language and/or color of the product).
The “canonical” tag will come in handy for you. This tag will help the search engine understand which of the pages is the original. By prescribing “canonical”, you are telling Google that this page is canonical and the rest are copies.
The canonical page will be browsed much more often, also Google will not have to choose the canonical page on its own (which can have unpleasant consequences) or it might even consider the pages to be equal.
The “hreflang” attribute is useful if the website is available in several languages. It will help the search engine determine which language to display to users in different regions. Google can do this itself, but it is better to help identify which pages are made for which regions so that there are no misunderstandings.
Why read source code
As you may have noticed, there is nothing complicated or intimidating about reading your site’s source code. HTML is quite logical and you can quickly find the information you are interested in here and double-check the completed work without having to submit your site to some service for auditing.
If you have a large site with a lot of pages, it would be more efficient to use services for a holistic audit (SEMrush, Moz, Screaming Frog, etc.). An online store with more than 300 pages would be very difficult to check manually.
Modern tools quickly and efficiently check sites and provide mostly useful information for optimization, saving you time and energy.
Reading code will help you when you need to quickly check which meta-tags are used by competitors on their pages. By conducting audits based on target parameters, you will be protected from many common SEO errors.
You do not have to be a developer to detect obvious errors that can slow down or destroy your optimization efforts.
Do not be afraid of code, check your backlinks, analyze your competitors, conduct audits, and most importantly never stop learning.
