[Solved] Dynamically setting Twitter meta tag using DocHead does not work


#1

Hi, I am dynamically setting <meta> tag in my <head> for Twitter card. The following sets the meta tag when I inspect the <head> on my Chrome:

  FlowRouter.route('/', {
    name: 'home',
    action() {
      let title = 'my app';
      DocHead.setTitle(title);

      DocHead.removeDocHeadAddedTags();
      DocHead.addMeta({name: 'twitter:card', content: 'summary'});
      DocHead.addMeta({name: 'twitter:site', content: '@myapp'});
      DocHead.addMeta({name: 'twitter:title', content: 'my app title'});
      DocHead.addMeta({name: 'twitter:description', content: 'my app desc'});
      DocHead.addMeta({name: 'twitter:image', content: 'logourl'});

      mount(MainLayoutCtx, {
        content: () => (<Home />)
      });
    }
  });

But when I debug it using tools such as social debug, I always get that no meta tag was found for Twitter. What gives? I am using spiderable in my app. This also happens on production.


#2

The issue happens because crawlers only see meta tags rendered by the server, and crawlers are not awere of manipulating meta tags using JavaScript after the page is rendered. Resolved by implementing server side rendering.


#3

Hi @sungwoncho, been looking for a solution for twitter cards, Please can i see some codes :grin: :blush:

Thanks in advance.


#4

@kenshinman The solution is as simple as using https://github.com/kadirahq/flow-router/tree/ssr.

See my open source version of RemoteBase for example: https://github.com/remotebase/remotebase-mantra/tree/b20d7b1ec6b1d7ee8a966a238acfc4e485b4fe61.


#5

Hmm, Thanks. But I’m already using Iron-router. Will this work?


#6

His method will only work with FlowRouter. This looks like a package that should work: https://github.com/VeliovGroup/Meteor-iron-router-meta

However I would advise moving to FlowRouter if you can.