SEO Guidance and/or Solution?

[jmlivingston]

What is the recommendation for implementing SEO within an angular-cli site?

Current Problem

Implementing a SEO friendly solution for a SPA application typically requires server side rendering or possible pre-building static HTML files. This ensures the meta tags are populated when crawled by by search engines like Google, Bing, and Yahoo and when shared with social media sites like Facebook, LinkedIn, and Google+.

Note: There are some trends of search engines being more forgiving of SPA applications, but this is not true of all of them. Anecdotally, I have found Google and Facebook very tolerant, but LinkedIn to be terribly intolerant.

Possible Solutions?

- Angular Universal + angular-cli - Ultimately this marriage would be ideal, though it’s not clear when this will happen.
- Host using a different technology - For example, for a .NET application, we could use an index.aspx and server side data-binding to add the meta tags based on the initial server request. The one drawback is this data would need to come from somewhere and match the routing table of our client side code.
- Use Existing Solution - This would be ideal as we don't have to rely on 3rd parties. Since angular-cli is already using Express and Handlebars (what?), we could use server side rendering to generate the index.html based on some pre-determined data. This data can come from a configuration file which mimics the client side routing (probably not ideal), or reads existing Angular routing classes that have been decorated with SEO properties. While we could create a standard for this, perhaps some kind of hook that would allow an angular-cli middleware plug-in would be ideal.

Sample SEO Tags
title tag: Example: <title>New York Times - Cooking</title>

meta tag names: Example:

• meta:title
• meta:description
• meta:keywords
• meta:author
• meta:og:type
• meta:og:site_name
• meta:og:url
• meta:og:title
• meta:og:description
• meta:og:image
• meta:twitter:card
• meta:twitter:url
• meta:twitter:title
• meta:twitter:description
• meta:twitter:image:src

[mozqt]

I'm not sure what you mean by a hook that would allow an angular-cli middleware plug-in or how you would conditionally select between the pre-determined meta tags. This doesn't sound very much plausible nor different than setting the tags programmatically from a component or service, similarly from pre-determined router data. Could you try to explain how it should work a little bit more, in-detail?

This looks pretty ok for now though: https://github.com/vinaygopinath/ng2-meta

Not sure about LinkedIn, no issues with Google/Facebook/Twitter.
Do you have any data to show as a result of testings, perhaps?

[jmlivingston]

It's very widely documented in many other places that SEO does not always work in client side Javascript applications (see References below). It is easy enough to tweak meta tags client-side, but many search engines social media sites will never see the rendered markup. Even the link you provided had this to say:

While Google executes Javascript and extracts meta tags set by ng2-meta, many bots (like Facebook and Twitter) do not execute Javascript. Consider defining fallback meta tags in your HTML for such bots. The fallback content is overridden by ng2-meta in Javascript-enabled environments.

The hook
As far as a hook is concerned, angular-cli is already using this approach with the --proxy-config parameter which used in conjunction with a proxy.conf.json file. This is relayed to webpack which then uses the http-proxy-middleware.

angular-cli - proxy-to-backend
https://github.com/angular/angular-cli#proxy-to-backend

For SEO, we could take a similar approach. For example, we could have an --seo parameter which points to a configuration file (or routing configuration) which is then used by a webpack plugin. For example, the popular html-webpack-plugin can serve an index.html file based on some code and templating logic.

html-webpack-plugin
https://www.npmjs.com/package/html-webpack-plugin

References
SEO for JavaScript applications, 2016 edition
http://mono.software/2016/02/18/SEO-for-javascript-applications/

How to make your JavaScript apps SEO-friendly
http://odino.org/how-to-make-your-javascript-apps-seo-friendly/

"Precomposing" a SPA may become the Holy Grail to SEO
http://www.analog-ni.co/precomposing-a-spa-may-become-the-holy-grail-to-seo

[clydin]

The only serving the CLI does is for development purposes. The output of the CLI needs to be hosted and served by a third party.

[jmlivingston]

Hosting requires a 3rd party, but the code for serving is generated by angular-cli. This is output into the dist directory and is generated by angular-cli, which in turn uses Webpack and several dozen Webpack plugins.

I understand this is still in beta, but SEO is a common requirement on any public facing site. While I agree this is not a high priority issue, it should be considered at some point in the future.

[clydin]

The output of the CLI is a handful of static files that must then be served by the user's preferred server or hosting platform.

[jmlivingston]

Exactly! Those static files include the server files for serving via node. This is where code for handling SEO would need to happen, if not at a higher level.

BTW: ember-cli (on which angular-cli is based) is looking into using fastboot as a solution for SEO.
ember-cli/ember-cli#6350

[clydin]

I think you are mistaken. No server code is generated.

[jmlivingston]

This discussion is clearly not going anywhere. I will look into another solution.

[filipesilva]

As @clydin said, no server files are generated. The dist/ dir generated via ng build contains only static files, that can be served in whatever setup one has. We do not recommend that ng serve is used to serve files in production, that's a very bad idea. One should use a static server instead.

It is true that SEO concerns are important and that the CLI should facilitate it if possible, but bear in mind that dynamically composing an index.html file with extra meta tags (or whatever else is needed) is something that happens on the server, before serving a request.

That is why it is hard to have a simple solution to the SEO problem from the CLI side: it requires server actions and the CLI doesn't do anything related to your server.

Thus the solution isn't as simple as changing something on the generated app... in fact, the built app is almost irrelevant for SEO optimization, since the server does all the work.

I'd like to keep this issue open though because it's a very relevant discussion.

[jmlivingston]

@Filipe Silva - Bravo and thanks. ;) I'm certainly not advocating a specific solution here, but this is clearly a common problem. Given SEO is synonymous with what Google is and does and Angular is managed and promoted by Google, I would think this should warrant some minimal consideration. ;)

[filipesilva]

There's also some alternate solutions using protractor to crawl your site page by page and outputting the rendered html. @jeffbcross could discuss more about it.

Personally I really like that one because it makes very little assumptions about the server, and still allows you to serve a fully static site.