For example, in server-side rendering, the server contains the website’s contents. Upon a request, the browser receives the fully-rendered HTML.
The third option for rendering is dynamic rendering, where content rendered at the client-side goes to the browser, whereas the content rendered at the server-side goes to the search engine(s).
The rendering techniques affect how JS is rendered and hence the page rankings.
- Fetches a URL from the crawling queue via the HTTP request
- Checks the robots.txt file for URLs that the site does not allow for crawling
- Skips the ‘disallowed’ URLs, parses the response for other URLs, and adds them to the crawl queue
- Queues the pages for rendering, except those that are marked to be not indexed
- Parses the rendered HTML again for links
- Queues the URLs for crawling
|On-page element||Potential SEO issue||Possible SEO solution|
|Metadata||Unless the site uses Node.js packages like vue-meta, search engines may be crawling the same or, worse, no metadata for each view or page.||Use Node.js packages like react-helmet, vue-meta, react-meta-tags|
|Lazy-loaded images||Search engine crawler does not pick any content that’s marked for lazy-loading. The search engine cannot scroll for content, and hence some content may never be rendered.||Use the IntersectionObserver API, which understands the visibility and position of DOM elements once they are available. You can also use the native lazy-loading feature of the browser (Chrome).|
By following some of the best practices, we can get search engines to crawl and render the pages better:
Add links and images as per defined web standards
Add all the links using the
ahreftag rather than
window.location.href='/page-url. Google can easily crawl the links and follow them.
<a href=”http://geekflare.com”>Welcome to Geek world</a>
Same way, add images using the
img src tag and not the
img data-src tag:
<img src=”myimg.png” />
Prefer server-side rendering
Make sure your website content is available on the server apart from the user browser.
Ensure your rendered HTML has all the important content you want to show
The rendered HTML should have the correct title, meta robots, meta descriptions, images, structured data, and canonical tags.
- Check if Googlebot gets all the important content and tags: You can use the Google mobile-friendly test tool or the rich results test tool to check how Googlebot uses the raw HTML to render content.
- You can check for the important tags (title, meta description, etc.) on the rendered HTML using the SEO Pro Chrome extension.
You may also check some of the best ways to decrease website loading time.