How to add dynamic meta tags in Polymer?

Support
#1

How do I add dynamic meta tags in Polymer client page. I want to add page title, description and image meta tags so that if page link is shared on Facebook, the tag contents are displayed. Values of these tags is contained in a ‘NewsPage’ entity which I load using web element.

#2

Hi,

Please see the following example: https://github.com/Polymer/pwa-helpers/blob/master/metadata.js

#3

I’m trying to follow this but I’m failing to make it work. I tried adding the following code to index.html and to the specific element (news-item.html) but it doesn’t seem to work.

<script type="module">
      import { updateMetadata } from 'bower_components/pwa-helpers/metadata.js';
      updateMetadata({
          title: 'This is my test news title',
          description: 'This is my test news Description',
          url: document.location.href,
          image: '../../images/arrow_blue.jpg'
      });    
  </script>
#4

Try to add the bower_components/pwa-helpers/metadata.js script to extraDependencies in polymer.json. However, beware that <script type="module"> has limited support nowadays, so maybe it worth just copy-paste the functions from pwa-helpers into one of your components.

#5

I have managed to get the meta tags dynamically being set per page. However I notice that, I can only see the new meta tag values when I use the ‘Inspect Element’ feature of Chrome browser, but when I use ‘View Source’ of Chrome, the meta tags are not set. I’m suspecting that is the reason why the Facebook share crawler is not able to pick the dynamically set meta tags on my pages. How can I make sure they source is also changed when I dynamically change the meta tags?

#6

With View Source you only see initial static html, you won’t be able to see any dynamic changes. I’m not sure how Facebook crawler works but you might need to feed rendered page to it (the technique you mentioned in this topic.

#7

Thank you. I will try the pre-rendering option.