Login/Register
How to set dynamic Meta Tags and Open Graph tags in polymer?
Asked Answered
javascriptjquerypolymerpolymer-1.0
I

2

9

I have a polymer node site that I've been working on and can't figure out how to include dynamic meta tags and Open Graph tags. Jquery won't work and neither will using the polymer api to add a node because it will add all the tags after the page loads and facebook won't be able to read the tags. Google crawlers do render the page but it would be best if I could set the description in the header.

<html>
  <head>
    <meta name="description" content="description goes here" />
    <meta property="og:title" content="title"/>
  </head>
  <body>
    <group-pages id="grouppages" is="dom-bind"></group-pages>
  </body>
</html>

grouppages sets the data and uses a services to populate the page based off the url but what I can't find out is how to change the meta tags depending on the page.

Anyone have any ideas?

One thought was get information server side and send it in to polymer but I'm still not sure if that's possible between node and polymer.

Intension answered 7/12, 2015 at 21:36 Comment(2)
This answer was the best I found! – Runkel
It's been awhile but I think @jFathi's answer is best for polymer. – Veriee
S
3

It's definitely an open issue, and it concerns any way to generate meta tags on the client side, whether it's Polymer or any other front-end code.

It can be overcome only if the crawlers execute JS. On May 2014 Google started doing so. On the other hand, as far as I know Facebook has not moved in this direction yet.

You might want to check out these other two answers to get a complete picture:

As of today, the only 100% reliable way is for the server to intercept crawlers and specifically render content for them before sending the response. This is also knwon as isomorphic JavaScript. There already are some useful tools out there to support such tasks, like Prerender.

Hope this helps! Cheers

Schumann answered 30/12, 2015 at 3:34 Comment(0)
L
3

If you host your Polymer app with Firebase, you can prerender the index.html file with a Firebase http trigger function.

exports.host = functions.https.onRequest((req, res) => {
  // replace og-tags in the index.html file and return it
});

See this post for more info.

Loop answered 22/1, 2018 at 9:18 Comment(3)
Really nice tutorial, I'm trying to implement it. Just one problem, I keep getting "access-Control-Allow-Origin" error when trying to serve my updated index.html. I know what the error is from but not sure how to solve it. I've tried cors but cant get it resolved. Would appreciate it if you can either comment or answer my question. https://mcmap.net/q/1318360/-access-control-allow-origin-error-when-trying-to-add-open-graph-meta-tags-dynamically-via-firebase-functions/5601401 – Veriee
Done. Did you add the rewrite to your firebase.json file? – Loop
Yes, I did but I still don't see the function being called. I added some more info to my question. Appreciate any help. – Veriee

© 2022 - 2024 — McMap. All rights reserved.