Many of the other articles on this subject answer very general questions:
- Will a Search Engine respect a JS based title tag or meta data?
- How content? Will the Google’s be able to index a h1, <p> or any other type of information based HTML tag?
The answer is yes and there are plenty of case studies to prove it.
However, the question basically no one answers.
This is the question everyone should be asking, who cares if you index your site if no one visits it.
Yes they do, however it’s not always the best approach to rely on rendering content in the DOM.
Its a multi step process, here is a screenshot of Google Crawler Dynamic Rendering Example, with some of our own editing:
You have to right click, select network, then change the user-agent to Googlebot. Remember to reload the page when these settings are done.
Here is the settings and what you have to look for:
When you enable your site to crawl as Googlebot, you can clearly see how the page is being rendered after being crawled by Google:
Without GoogleBot Enabled
With GoogleBot Enabled
Google (kinda) Cannot Crawl The Inner Pages Of the Menu
Given the size of the website in the photo above, we can’t say ‘why’ they choose to make this technical choices for Search Engines. After all they have millions if not billions of pages.
However, for the average website this is less than idea. Google cannot crawl all the extra menu options, simply because they are not in the code that is being served when Googlebot crawls the website.
In the past, we’ve had developers tank organic search from changing the menu in this matter.
According to our SEO testing, if Page 1 links to Page 2, Page 2 will not benefit as much. Whereas with serverside rendering, page 2 benefits dramatically more.
SEOs refer to this as “link juice.” It’s a rather tacky term that means authoritative term transfer from one page to another.
You do not have an Authoritative Website
As a disclaimer, we do not know the overall search engine strategy large scale websites such as eBay are using. For example, it might be beneficial for them to limit their menu item links for reasons we didn’t take into account.
That said, you are not comparing apples to apples, eBay is a super authoritative website. At the time we wrote this article, they have a aHrefs Domain Rating of 93, where as our average client ranges anywhere from DR10-DR70 (we work on a few above that, but you get the idea.)
Are There any other ways to render as Google?
Yes. You can use Search Console, generally we’ll use both the method above with Google Chrome and Search Console.
Follow the steps below in Search console, Enter the url, click live test and ‘view tested page.’
Search Console will also give you a number of ideas, for example if their are any other errors, likely they will show up here.
Including, but not limited to:
- React JS
- Vue JS
- Any framework that renders in the DOM
Should you avoid these frameworks altogether?
No, that would be ridiculous and not realistic in modern web development.
Rather they should be used strategically. Anything search engine facing should ideally render server side. For example Node or other frameworks such as Next Js or Gatsby.
In the case of react, Vue, etc, if there is no server side rendering alternative, you them for marketing elements that do not directly impact search engine traffic. For example, we have a client who uses a ‘follow you around’ style bar on the top of their website that feeds directly in to the CRM.
Generally we recommend trying to create a 1:1 ratio with HTML. Meaning, any code you want search engines to crawl, ideally you want it to perform the same as HTML.
Common Questions we couldn’t quite fit into this article:
Some common questions we get, but couldn’t quite figure out how to lump it in…
What about Prerendering?
This is certainly an alternative. Generally we recommending prerendering middleware such as Puppeteer, Prender.io or Rendertron.
Our opinion is basically its a good option if you’ve already created a JS based website. However, from out tests to-date it doesn’t perform as well as standard HTML. Pretty much, it’s worth testing, but we often prefer to use it other strategies.
Is structured data important for your web page and Google?
As far as our testing goes, Search engines, such as Googe, have no issues crawling structured data.
In short, Server-side rendering and client side rendering are two different things.
How doe Search Engines view Client-side Rendering? (In the DOM)
How doe Search Engines view Server side Rendering? (Not In the DOM)
To give an easy example, platforms like WordPress render server-side.
In this use case, there are no extra steps, Googlebot comes to your website, crawls it, and reads everything as plan HTML.
This is the advantage. You have a very clear picture of how Search Engines are crawling your web page.
- Use Google Chrome & Search Console to troubleshoot any crawling issues or search engine roadblocks.
Still stuck? Reach out to us for help.