All pages of a website are text files in HTML format placed on a server. Browsers convert them to the user’s screen in a format the user is accustomed to. HTML documents may contain links to other resources and additional files.
Also, the website’s HTML code is a source of information for search engine crawlers. Based on the content of the page, the crawler understands whether it needs to be indexed, its content is relevant to the user requests, and what the level of its optimization is. Working with HTML elements helps adapt the site to the search engine recommendations and increases search engine optimization and ranking.
Let’s understand the different elements of a website source code.
What Are Tags And What Does An HTML Document Look Like?
A web page includes:
- HTML markup (tags)
- CSS styles, which are responsible for the appearance of the page
- Interactive JavaScript elements
What Are Tags?
Each HTML document is divided into building blocks called tags, which perform a certain function. HTML tags have opening and closing parts with content between them. A simple example of a tag responsible for the text on a page is:
<p>Text on page</p>
Also, a tag may have attributes – additional parameters specified in quotes. For example, the alt attribute in an IMG tag contains information about what’s shown in the picture:
<img src=”URL” alt=” what is shown in the picture “>
Structure Of An HTML Document
A web document typically contains basic tags: the <head> header, the <body> main body, and the <footer> footer. The main tags may have many inner tags. The main rule for the successful operation of an HTML file is the correct structure of tags and the presence of opening and closing elements. The content of a tag may be both visible to users and intended solely for browsers, crawlers, etc.
A simple structure of an HTML file looks like this:
<!DOCTYPE html>
<html>
<head>……….. </head>
<body>……………</body>
<footer>……….. </footer>
</html>
Tags In Source Code And Their Impact On SEO
Let’s take a look at the elements of web pages that are important to search engines. For convenience, let’s divide the components of an HTML document into:
- Basic HTML
- meta tags
- language attributes
- CSS and JavaScript elements
Related: Google Alternative Search Engines
Search engines take many criteria into account when ranking a website to determine a website’s visibility – how often its pages appear in search results and what positions they hold. Some site quality parameters are described in Help and Advice from search engines and added to optimization reports. Let’s take a look at the main ones:
- Content relevance of certain tags to user requests
- page loading speed
- mobile optimization (page display on different types of devices)
- presence of URLs in the index
Now, let’s examine how HTML code snippets affect critical optimization criteria.
Basic HTML
Let’s review tags and attributes that not only make up the structure of an HTML page but are also crucial for website optimization.
1- Title
The <title> tag is the page’s title displayed in search results (snippet). Also, it may contain keywords used by a crawler to determine the relevance of a page to the query.
Example: <title>Page title</title>
Impact On SEO:
Each page on the site should have a unique <title> tag. It is not recommended to leave the title tag empty or create more than one title on a page, duplicate the title text of other pages, or fill it with too short or too long text.
2- H1 Headings In The Text
The H1 header and H2-Hn sub-header tags form the structure of the text on the page. The presence of H tags in the correct order is a sign of the quality of the text. The H1 tag defines the page’s topic, and it is the second most important tag after Title. Keywords placed within H tags have more weight than those in the text itself.
Example: <h1>Title of the text</h1>
Related: Headline Writing Tips For Beginners
Impact On SEO:
Every page on the site should have a unique H1 header that briefly describes the page’s content. Among common mistakes is the identical content of Title and H1 tags. During optimization, it is useful to add different text to the tags, thus using more keywords.
The heading number indicates the size of the text on the user’s screen and forms the section’s structure. H1 is the largest title, e.g., the topic of the article; H2s are the titles of the article sections; H3s are the titles of subsections, and so on. The page may have one H1 heading and several H2-Hn headings. If possible, it is worth using subheadings as an additional source of information for search engines. Also, when editing text in the admin panel of the site, it is necessary to arrange their order properly.
3- Images
Tags <img> are responsible for visual files in the text. Such tags contain:
- a link to the image, which is displayed by the browser;
- additional attributes such as width and height of the image in the text;
- alt attribute, an alternative text for the image that affects its visibility in the Images section of search engines.
Example: <img src=”images/my-picture.png” width=”600″ height=”400″ alt=”sunset-in-tokyo”>
Related: Best WordPress Plugins For Image Optimization
Impact on SEO:
Filling alt attributes helps to provide more information about the file and use keywords. This way, search engines will better understand what the picture depicts and show it to the target audience in search results more often. A correct alt attribute is a short text with keywords, which describes the content of the picture.
Images also affect the speed at which pages are displayed. Loading a large photo takes more time, and if there are several such files, page performance can decrease significantly. Optimizing images implies working with their sizes and compressing them.
4- Text On The Page
The text on the page, which will be visible to users, consists of fragments placed in <p> tags. As a rule, the page is filled with content via the CMS admin panel, and then, tags with content appear in the HTML code.
<h1>Title of the article</h1>
<p>Text</p>
<h2>Article subheading</h2>.
<p>Text</p>
Impact On SEO:
Texts are important not only for users but also for search engines. Here are the indicators of optimized content:
- Keywords. Many keywords can be added to the text, thus increasing the site’s visibility for important queries. To do this, perform keyword research, correctly choose and use them: analyze the statistics of search queries in the subject and add promising phrases to the text to look natural and organic.
Related: SEO Keyword Research Guide
- Uniqueness. If a site has information that others do not, this indicates the potential value of content to search engines. A page with copied text will have a lower position than the original. In addition, it is necessary to eliminate duplicate content within a resource.
- Word count. Another important criterion is the volume of the text. To make the page comprehensive, when covering the topic or describing a product, the number of words should be sufficient.
- Size. In some cases, text content can slow down the page load. An HTTP Content-Encoding header to encode the text can help speed up the display.
Related: Best Ways To Increase Site Speed
5- Links
Links in an HTML document can upload important files. As a result, they form the final display of the page on the screen. Another type of URL is hyperlinks in the form of text, which lead to other pages. To create a hyperlink, the <a> tag with an href attribute is used.
Related: Best Dofollow Links To Acquire
Example: <a href=”URL”>anchor</a>
Impact On SEO:
Inner linking creates user-friendly website navigation and helps crawlers better understand the structure of the resource, discover and index the URLs. Adding internal links allows for the correct distribution of link juice between pages. Anchor links in a brief form provide information about the URL’s content and increase the site’s visibility for similar queries.
To avoid making a page look spammy, there should not be too many links on it. Also, make sure that the rel=”nofollow” attribute does not block crawlers from accessing important content.
Meta Tags
Meta tags are elements of HTML code that provide structured information about a page. They contain the meta element and are usually found in the <head> header. Meta tags contain data for search crawlers, browsers, third-party crawler software.
1- Description
Initially, the text within a meta tag formed the description for a page in search results under the Title header. Today, search engines rarely display the meta description and, instead, generate a unique description for a page depending on the user’s query.
Example: <meta name=”Description” content=”Brief page description”/>
Impact On SEO:
The <description> tag should be filled out when optimizing pages because it may contain additional information for a crawler – keywords that will help identify the page topic and its relevance to queries.
Recommendations for its configuration are similar to <Title>: the page should have only one <description> tag filled with unique text. Unlike the title, the description of the page can contain more text.
Related: Plagiarism Free Content
2- Robots
It provides information for search engine crawlers. It’s often used to control how a page gets indexed, i.e., displayed in search results. For example, adding noindex to the robots meta tag prevents crawlers from indexing a page and all of its content. A nofollow value prohibits crawlers from linking to other pages.
Example: <meta name=”robots” content=”noindex” />
Impact On SEO:
There are several ways to disable Noindex indexing or Nofollow linking in an HTML document. However, only one of them must be applied. If the restriction is specified in <head> of the page, there should be no similar settings in the X-Robots-Tag HTTP header.
3- ViewPort
The <viewport> tag helps adapt the site to the screens of devices of various sizes. It should be placed in the <head> header of pages that should be optimized for smartphones. If the tag is not adjusted for the device-width value, problems may arise with the content display. For example, when some text is hidden, the user has to scroll to the bottom of the page to see it.
Example: <meta name=’viewport’ content=’width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no’ />
Related: Fundamentals of UX Design That Impact SEO
Impact On SEO:
Mobile website optimization is one of the ranking factors on Google. For example, Google now indexes the mobile version of a resource first (Mobile-First index). Webmaster tools provide reports on the adaptability of pages, including checking <viewport> tags.
4- Content-Language
This tag is placed in the page header <head>, defining the language of the whole document. Initially, the meta tag looked like this:
<meta http-equiv=”content-language” content=”en” /> and then was shortened to <html lang=”en”>.
Related: How To Find Duplicate Content?
Impact On SEO:
Although Google no longer takes HTML lang into account, it should be set up for other search engines and programs for which the language of the content in the document matters. If the page has the language attribute hreflang, one of them must match the HTML lang.
5- Language Attribute
Sites that have language versions use the <link> tag with the hreflang attribute. In the header of the web document, hreflang attributes, which contain links to similar pages in other languages, are placed. This way, the search engine sees that the URL has alternatives and shows the version of the page that matches the user’s language in search results.
Example: <link rel=”alternate” hreflang=”en” href=”another language version URL”/>
Impact On SEO:
Pages translated into other languages provide an opportunity to reach many more users and increase site traffic. Thanks to the hreflang attribute, the target audience sees the right language versions.
It is important to follow certain rules for search engines to process the hreflang attribute successfully:
- adding links to all versions of the page,
- including its URL,
- correctly coding the language (en for the English version, de for German, es for Spanish, etc.),
- directing links to priority (canonical) URLs,
- making sure that versions of the page with hreflang link to each other.
Also, add an X-default value to the hreflang attribute to provide search engines with a generic version of a page that can be used if the language desired by the user is not available on the site, e.g., the English version.
CSS And Javascript Elements
CSS and JavaScript are responsible for the visual design of the page. CSS elements are used to define the background, colors, types of fonts, placement of certain blocks, etc. JS scripts create dynamic elements on the page.
1- CSS Files
CSS (Cascading Style Sheets) are style sheets that describe the appearance of a document or its individual components. There are two common ways to incorporate CSS into an HTML file.
1) To specify styles in the <head> header of the document using the <style> element;
<style>
body {
color: green;
}
</style>
2) Write the styles in a separate file and include it in the HTML document using the <link> element in the <head> header.
<link rel=”stylesheet” href=”/css/blog/reset.css” type=”text/css”
Related: How Website Usability Affects Business Growth
Impact On SEO:
CSS style files can increase the overall size of a page and slow down page loading. Since content display speed is a ranking factor, it is necessary to optimize the CSS files on the site: adjust the compression so that their total size does not exceed 150 KB.
When each CSS file is loaded, the browser sends a request to the server. For the site to work faster, the page should not contain many links to such documents. If you set up CSS caching, the browser will store copies of the files without downloading them again each time.
Another way to optimize CSS is to minify files, i.e., delete unnecessary elements (comments, line breaks, etc.) from the source code.
2- JavaScript files
The JavaScript language is based on scripts, which are code elements similar to tags. They contain scripts – descriptions of certain actions for the browser, which make the page interactive and attractive. They are also embedded either in the page code or as a link to a separate file.
Related: Website Speed Test Tools
Impact On SEO:
JS files are usually large, and they may substantially slow down the loading of a page, which, in turn, negatively affects its ranking in search results. As with CSS, optimizing JavaScript implies a set of actions to reduce the load on the server and speed up the display of content in the browser: reducing the total number of JS files and their size, compression, setting up HTTP-headers caching, and removing unnecessary code is fundamental to speeding up the site’s load time.
How To Analyze The Source Code?
To adapt the site for search engines, it is necessary to audit all its pages: check the loading speed, mobile optimization, and the presence and content of important tags. Here are some code analysis tools that can help you assess the current level of optimization.
Google Search Console
It is a service for web admins with reports on a site’s performance in Google search results and internal optimization.
Related: Page Experience Report In Google Search Console
Search Console page code information:
- List of indexed pages (Coverage report)
- Mobile optimization and the presence of the viewport meta tag (Mobile Friendliness report)
- LCP, FID, CLS metrics, which are responsible for page loading speed and display on the screen (Key Internet Indicators report)
- Internal links and popular anchors (Links report)
Related: Core Web Vitals For Google SEO
PageSpeed Insights
It is a tool for analyzing page speed and identifying reasons for slow loading on different devices. You can check only separate URLs.
Information about page code in PageSpeed Insights:
- Images to be compressed
- CSS and JavaScript code to remove
- CSS and JS files processing time
- LCP, FID, CLS values, which are part of Page Experience Update
Related: How To Fix LCP Issue
Platforms For SEO-Specialists
As a rule, platforms combine data from different sources. As a result, you can get a detailed report on the page’s code, its impact on the site’s speed, the display of pages on different screens, as well as the presence of important tags, the uniqueness of the content, and other aspects. Let’s review what site analysis involves using the SE Ranking service as an example.
Related: SE Ranking Review: Most Underrated SEO Tool
Information on page code in SE Ranking:
- Title and Description (uniqueness, length, keywords, duplicates)
- Image analysis (alt attribute, file size, uniqueness)
- Pages with noindex and nofollow meta tags, which limit indexation and clicks on links
- Mobile optimization and the presence of the meta tag viewport
- Checking the hreflang attribute and HTML lang for a multilingual site
- Content analysis (uniqueness, length, keywords, tags)
- Internal links and anchors
- The amount of CSS and JavaScript and their influence on page load speed
- “Cleanliness” of the code and search for pages – code that should be shortened
- Load speed (load time, speed score, page size)
Related: SE Ranking vs. SEMrush
Conclusion
Each page of the site is an HTML document, which consists of a set of complementary tags. Internal code affects the appearance of the page on the user’s screen, the speed of its loading in the browser and informs search engine crawlers whether the technical optimization of the site meets the recommendations of search engines.
To adapt your website properly and increase its ranking positions, you need to know which tags and files are important for SEO and how to work with them. Before you can optimize your site, you need to audit it and identify any problems with the code.
