Understanding Source HTML vs. Rendered HTML: A Marketer's Guide
Most often marketers and web developers have miscommunication for adding meta tags for SEO. Marketers, who don't understand web development, got some code on the web and wants web developers to add into the web pages. Developers, who don't understand the full require of SEO, adds meta tags with JavaScript on the client-side, which the tags do appear correctly. However, Google still cannot find the tags nor the canonical link. This guide aims to marketers in regards to the two critical concepts in web development: source HTML and rendered HTML, and explain their relevance to Google's indexing process.
The Basics: Source HTML vs. Rendered HTML
Source HTML refers to the initial HTML code that a web server sends to a browser. This code includes the structure of the webpage, such as headers, paragraphs, links, and other elements. It's the raw blueprint that tells a browser what content exists on the page.
Rendered HTML, on the other hand, is the final output that users see on their browsers. This version of HTML is generated after the browser has processed the source HTML, applied CSS (Cascading Style Sheets) for styling, and executed JavaScript for dynamic interactions. Rendered HTML is essentially the product of the browser's interpretation of the source code, along with any modifications made by client-side scripts.
How Browsers See Your Website
When a browser receives source HTML, it begins a complex process of parsing and rendering. The browser first builds the DOM (Document Object Model), which is a tree-like structure representing the content of the page. Then, it integrates styling information from CSS to form the CSSOM (CSS Object Model). Combining the DOM and CSSOM, the browser can calculate the layout of the page and paint it on the screen, allowing users to see and interact with the content.
JavaScript plays a pivotal role in this process by dynamically altering the DOM and, consequently, the rendered HTML. This means that parts of your webpage can change or load content after the initial page load, affecting what the user sees.
What Google Sees: The SEO Perspective
From an SEO perspective, understanding the difference between source and rendered HTML is crucial. Google's crawlers index web content based on the rendered HTML. Historically, challenges arose when content dynamically generated by JavaScript wasn't fully indexed because Google's crawlers would only see the source HTML. Advancements in Google's indexing capabilities now allow it to execute JavaScript and index dynamically generated content. However, most often web pages with JS generated meta tags and no traffic or click get de-indexed due to low quality posts. To more about how to publish and rank up your bulk content, please subscribe or contact us directly.
For marketers who want to make sure Google crawled your meta tags correctly, there are multiple ways to check that. If you are not the website owner, you can check using dev tool. Just right-click anywhere on the page and select “View Page Source.” A new tab will open in Chrome and the source HTML will appear. The part at the top, or “head” of the page, is where the meta tags would be. Use ctrl F to find "canonical url", "title", "description", and "keywords" etc. Note that if you select inspect the page instead of viewing Page Source, the HTML you see is just the client rendered page by your browser. Its not the source HTML from the server.
If you are the website owner, you can use Google Search Console to inspect the meta tags.
- Go to Google Search Console
- Go to Pages under Indexing on the left or search a specific URL you have on hand
- Click "TEST LIVE URL" on the right.
- In the first tab of the results, select VIEW TESTED PAGE, which should appear on the right.
- Select magnifying glass to search for meta tags.
The meta tags should be similar to the following:
<link href="https://www.aiyahub.com/" rel="canonical" />
<title>Marketing agency with AI solutions - Fastest Growth Strategy</title>
<meta content="Grow business with automation, generative content, SEO/ SEM, AI tools and optimize internal systems. Guarantee 300% growth. FREE site and technical audit." name="description"/>
Meta keywords are often disregarded by modern search engines like Google due to advancements in natural language processing (NLP) and other sophisticated algorithms. However, in regions such as China, where search engines like Baidu may have less advanced NLP technologies, meta tags still hold significant weight in determining search rankings. Therefore, for digital marketers targeting countries like China, Russia, and others where Google and Bing may be blocked or less dominant, it is advisable to optimize meta tags extensively.
