Does rendered HTML from an angular app need to be styled and pretty when shown just to search engine bots?

Question

I have an angular app, and while google does index those now, many other sites do not.

I have built some middleware that intercepts requests from crawlers and serves static HTML pages that those crawlers can use for indexing.

My question is this: Since humans wont see these pages, do I still need to make them pretty with CSS and follow the same theme as my site, or can I just use basic HTML to get the content that I need out there. Will basic HTML affect SEO at all?

The main page in question is jobs that our company posts on a jobs page. We want those jobs to be indexed, so can I just have a basic HTML page with all the job details?

Answer 1

You should show Google what an end-user would see.

Check the Google Webmaster Guidelines

Basic principles

• Make pages primarily for users, not for search engines.
• Don't deceive your users.
• Avoid tricks intended to improve search engine rankings. A good rule of thumb is whether you'd feel comfortable explaining what you've done to a website that competes with you, or to a Google employee. Another useful test is to ask, "Does this help my users? Would I do this if search engines didn't exist?"
• Think about what makes your website unique, valuable, or engaging. Make your website stand out from others in your field.

If you still want to show a different version to crawlers, make it as user-friendly as possible, as (at least Google) search engines do take the responsiveness and usability of your page into account when calculating your score

Answer 2

Google reads CSS so in short. Yes. The overall page will be rendered by Google and used to determine if mobile friendly etc. If you aren't serving media queries in your CSS that will be a problem. Theres lots of best practice reading around that. E.g this page exists for a reason.

https://search.google.com/test/mobile-friendly

It's also likely that Google weights aesthetics, particularly by manual raters read their guidelines here:

https://static.googleusercontent.com/media/www.google.com/en//insidesearch/howsearchworks/assets/searchqualityevaluatorguidelines.pdf

In short, serve the entire user experience to Google as not doing so is seen as cloaking. In addition, Googles algorithms use the Css to make page quality decisions.

Cloaking refers to the practice of presenting different content or URLs to human users and search engines. Cloaking is considered a violation of Google’s Webmaster Guidelines because it provides our users with different results than they expected.

Whilst Google can read JS it's also worth knowing some of this stuff:

https://developers.google.com/search/docs/guides/javascript-seo-basics

alternatively, use server side rendering of your Javascript to output your HTML.

Answer 3

"The main page in question is jobs that our company posts on a jobs page. We want those jobs to be indexed, so can I just have a basic HTML page with all the job details?"

According to the SEO Black Book, by R.L. Adams (pg.90):

"Search engines really don't like to see a lot of code mixed in with text these days, which is why CSS is so important for separating your coding structure from the site text & content. Search engines expect a clean site with the proper elements addressed when it comes to On-Site SEO ..."

Based on that, if what you want is static data that only the crawlers can access, I would spend the time to make sure that you code "semantically correct HMTL" for maximum benefits. However, if I was developing this site, I would: use those bare bones job detail "pages" as modules to insert into one template so that each one is available for crawlers and site visitors alike.

• create a page template (header, main, footer) styled to your site specifications,

• the "main" section would include code which determines what is displayed for the site visitor. If you do this dynamically, then the links pull the module based on which job is clicked on. example:

if (job1) { ...insert job1.file... 
} elseif (job2) {  ...insert job2.file... 
} else {  ...insert joblist.file... 

• you could also create separate pages, copying the template and inserting the job data as needed.

Go for the best overall solution that requires the least amount of resources (time, money, etc.) and delivers the best outcome.