How to set dynamic Meta Tags and Open Graph tags in polymer?

|▌冷眼眸甩不掉的悲伤 提交于 2019-11-30 03:22:54

问题


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.


回答1:


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:

  • https://stackoverflow.com/a/16485238/570016
  • https://stackoverflow.com/a/25421037/570016

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




回答2:


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.



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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!