Polymer: Dynamic HTML meta tags

[pensierinmusica]

Any idea how this could be done?

http://stackoverflow.com/questions/34143688/how-to-set-dynamic-meta-tags-and-open-graph-tags-in-polymer

Is there any way to do it on the front-end with Polymer, such that it would work with Google and Facebook crawlers?

Thanks, cheers!

[ebidel]

This isn't polymer related. Most sharing sites (e.g. Facebook/G+) require meta information to be in the page when when they crawl/scrap the content. That means that in most cases, meta tags need to be rendered by the server.

[pensierinmusica]

Thanks @ebidel, I figured the only way is probably to use something like prerender until Facebook crawlers can parse JavaScript.

Cheers

[oneezy]

@ebidel @pensierinmusica @frankiefu
I'm still a bit confused on properly doing this.. I've seen the articles on how to set prerender.io up, but my question is more around setting up data binding to elements in the < head >.

How did you guys do it with the polymer website?

[pensierinmusica]

This is an example of what I do for the <title> tag:

Polymer({
  is: 'app-layout',
  genTitle: function (path) {
    var title = 'Type your title here';
    if (path === '/') {
      document.title = title;
    } else {
      path = path.slice(1).split('-');
      path[0] = path[0][0].toUpperCase() + path[0].slice(1);
      document.title = title + ' | ' + path.join(' ');
    }
  },
  attached: function () {
    var self = this;
    this.genTitle(document.location.pathname);
    window.onpopstate = function () {
      self.genTitle(document.location.pathname);
    };
  }
});

Obviously the <app-layout> element (or whatever name you want to give to it) needs to be always present for this to work.

[oneezy]

Thanks for your reply @pensierinmusica

Have you had positive results in search engines with this approach or have you used services like prerender to handle this?

Also, are you using this for OG meta data for social platforms with any luck?

I wish the answer to this would be something like...

"SEO?...There's an element for that!"

[pensierinmusica]

Hi @oneezy for now you need to pre-render. At least until Facebook crawling engine will support JS. On the other hand, Google might be already able to read this. Hope this helps, cheers!

[oneezy]

Thanks! If Google is able to do this, I wonder if it'd be possible to use the goo.gl url shortener to have it automagically create these links..that'd be sweet.

Thanks again

[AndreasGalster]

@ebidel To get back on this. Yes, you need to render this on the server but if we would have an element that defines meta-tags dynamically then a service like prerender should be able to set the meta tag as expected, shouldn't it?

If yes, then it's time that we write an element for that :).

[ebidel]

No. For the reasons mentioned above you need to server side render the meta tags. FB and others won't see the results from a client side solution.

[kevin-wise]

@ebidel I believe @AndreasGalster is asking for an element that could be used for server side rendering. Seems reasonable. In our project we're using a behavior to set the meta tags.

Separate question: I accept that some sites like FB don't support client-side solutions. My question is-- are there any sites which do support client-side solutions? Googlebots, for example?

[ebidel]

an element that could be used for server side rendering

What would that look like? It might be nice if this was a feature of app-route. Suggest you file a FR over on that repo. https://github.com/PolymerElements/app-route/issues

IIRC, G+ does a good job of picking up dynamic changes to page metadata.

[oneezy]

@ebidel , could you see a service like goo.gl URL shortener achieving this? I imagine if it were possible it'd look something like:

1. Pass the URL of your website over
2. Google crawler does it's usual indexing
3. Google snapshot of SEO friendly webpage is created
4. Outputs a shortened URL for you to pass around

I could see a custom element going in and pulling the fragment pages to "SEO snap" in the polymer.json. That might look something like:

<app-seo src="polymer.json">
    <business-app></business-app>
</app-seo>

[ebidel]

I think we're going down a bit of a rabbit hole here. The original bug report was about creating a solution that dynamically updates <meta> for social sharing.

Generally the more magic you hide in JS the worse SEO will be...especially for crawlers that don't run client-side JS.Best practices like meta data, using anchors, proper semantics, etc. are the key to SEO.

[ebidel]

Related: https://github.com/PolymerElements/app-route/issues/119

[JaySunSyn]

If you are hosting on Firebase, see how to create dynamic OG-Tags with Firebase hosting