How to set dynamic Meta Tags and Open Graph tags i

2019-02-12 18:18发布

站内文章 / JavaScript
21 0 0

问题:

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.



标签： javascript jquery polymer polymer-1.0
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~