It’s becoming a norm for entire websites to be built using popular JS frameworks like React or Angular. These frameworks are used to power mobile and web apps since they can build both single-page and multiple-page web applications.
A more popular term for the Google-website interaction is crawling. Google doesn’t interact with your content as a user will. It has its unique way of going through your website. Here are a couple of things you need to know about the Google-website interaction:
- If a part of your website content is only visible when a user interacts with it (collapsible buttons, etc.), Google won’t be able to view it.
- If your content is not initially available in the page source code or DOM, Google won’t see that either.
- If you’ve hidden your content behind endless scrolls, Google won’t be able to view it
This means that the only content Googlebot can see is the content available in rendered HTML. Here’s what Googlebot does:
After Googlebot scans each URL in its queue, the crawler executes a GET request using a mobile user-agent, which returns the HTML document. That’s how Google determines what resources are needed to render the page’s core content. This usually indicates that only the static HTML, not any connected CSS or JS files, gets crawled.
It would help to consider the primary content rules associated with meta tags, title tags, image alt attributes, etc.
It would help if you made sure that the titles and descriptions aren’t reused and that the image alt attributes are set (a point that’s often ignored)
You should never block access to resources or .js files. To allow the resources, you want to be indexed to be crawled first, add the following to your robots.txt file:
Don’t forget to link to internal pages using the HREF attribute:
<a href=”content-link”>Anchor text</a>
This will help Google to easily find the links and follow them. Don’t use the following for internal links on your website:
Note: Always use static links to help Googlebot discover your web pages.
So, there’s a possibility that the following may exist:
Choose one version you want to be indexed and set canonical tags.
Redirects and Error pages
- Add a no-index tag to pages displaying a “404 Page Not Found” error.
To ensure that the images you have added within your content or on your website, link the image from the ‘src’ HTML tag:
<img src=”link-to-image.png” />
Lazy loading is handled by various modules, Lazy and Suspense being the most popular ones. When implementing these, you need to beware that you only lazy load images and not the content. If you have implemented lazy loading libraries, you might notice that it uses a ‘data-src’ attribute to store the real image URL and any additional image information, e.g.,
<img data-src=”link-to-image.png” class=”inline lazyloaded” src=”placeholder-imge.gif”></div>
This will help you enhance your page load speed. You can also exchange the placeholder image for the target image so that <img src> shows the path to the target image.
Rendered HTML Has All the Main Information
Ensure that the rendered HTML has all the information you want Google to read.
- Copy on the page
- Structured data
- Title & meta description
- Canonical tag
- Meta robots tag
- Any other important tags
Google Must Render Your Web Pages Using GSC
Use the Search Console URL inspection tool to check whether Google can render your web pages or not.
Enter the URL of a page you want to test. Click on the ‘TEST LIVE URL’ button on the top right of your screen.
You will soon see a ‘live test’ tab appear, and when you click ‘view tested page,’ you’ll see a screenshot of the page that shows how Google renders it. You can also view the rendered code within the HTML tab.
Once your web page is rendering correctly, the next step is to determine whether or not it’s being indexed. You can check it on Google as well as on Google Search Console.
If you’re checking it on Google, type site: domain-name.com/page-URL to see whether your web page is in the index.
If the page is indexed, you’ll see it in the result.
If the URL isn’t there, the page isn’t indexed.
You can also use the Search Console URL inspection tool to check the same.
Click the ‘view tested page’ button and view the indexed page’s HTML source code.