Menu
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.
520
Just go to Page Settings > Social Image > Upload. If you need to add other OG tags and customize the default settings, go to Page Settings > Advanced > Page Header Code Injection. Read the following section on adding the tags manually and copy-paste the code there.
The four basic open graph tags that are required for each page are og:title , og:type , og:image , and og:url . These tags should be unique for each page you serve, meaning your homepage's tags should all be different from your blog post article's page.
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
62
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.
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
