SEO-Friendly, Internationalized Polymer.dart

Question

I am displaying internationalized strings within a Polymer element as follows:

<div>
  <span class="content">{{myContent}}</span>
</div>

... and have the following dart code:

@observable String myContent;

//...

void onUpdateLocale(_locale) {
  myContent = getMyContent();
}

//...

getMyContent() => Intl.message('All my content ...', name:'myContent',
    desc: 'This is my content',
    args: [],
    examples: {'None' : 0});

However; when Google crawls the app, it only pulls "{{myContent}}" and not its interpolated value, the actual internationalized content. Is there a way to work around this and make an internationalized Polymer.dart app that is also SEO-friendly?

Answer 1

Its not really clear. Although recently Google announced that they are evaluating Javascript to index the page, I've not seen any deep evaluation of how this compares to the server rendered pages approach.

And then there is the issue of non Google search engines like Bing.

Polymer as it stands today doesn't really do server side rendering and as far as I can tell the team doesn't have plans to offer than in the near future.

If your project/business depends on SEO I would not risk using polymer.

You have two options to address this issue:

1. Use phantom.js to render the page on server side whenever a crawler is requesting the page.

2. Use a third party service like ajaxsnapshots.

3. Forget polymer and use react.js component framework. React has a way to render the virtual DOM on the server side. This will work seamlessly if you are using node.js frameworks. It should be possible with JVM frameworks as well as Java 6+ ships with a Javascript engine (vastly improved in Java 8. Google "nashhorn").

Answer 2

Google have a spec that lets you serve snapshots of your page's HTML after all necessary Javascript (or Dart) has run to search engines: https://developers.google.com/webmasters/ajax-crawling/

The basic idea is to render the pages on the server side and then follow a set of URL conventions that lets you serve search engines the pre-generated HTML in a way that they wont confuse with cloaking.

Google, Bing, Yandex and some social bots support this spec.

You can implement this spec yourself or use a service that does it for you (I work for one of these: https://ajaxsnapshots.com) The solution is typically plugged in at web server level so you don't need to make any changes to your app.

Answer 3

So, I don't know much about Polymer, aside from the documentation on databinding I just viewed. It seems fairly similar to AngularJS by Google, in that it is using JavaScript in a declarative way to render data into an HTML document. That being the case, the browser is still fundamentally seeing the underlying calls to {{something}} as just a raw string. The JS libraries are then what change that data into text on the screen.

That being the case, you might consider handling SEO like Angular developers do. Here is the definitive resource on the subject: http://www.yearofmoo.com/2012/11/angularjs-and-seo.html