Meteor: change og meta tags dynamically


#1

please how to change this meta tags dynamically and when i share the link in facebook or twitter i got the right infos

<meta property="og:description" content="..." /> 
<meta property="og:site_name" content=".." />
<meta property="og:image" content=".." />
<meta property="og:url" content="..." />
<meta property="og:type" content="website" />
<meta property="og:title" content="..." />
<meta property="fb:app_id" content=".." />

Thanks a lot


#2

Helmet is a great solution


#3

I’m using blaze not react


#4

did you search the forums?


#5

yes i didn’t find solution that works with facebook debugger


#6

maybe https://github.com/VeliovGroup/Meteor-iron-router-meta ?


#7

I’m using the flowrouter


#8

probably good to explain more context like that in your original post! There are many different ways to use Meteor.


#9

i want when i share a link from my blog(meteor-blaze based) in facebook the image of the blog post apear and the title of the post apear instead of the whole website image and title
example:

my blog name ‘neutron blog’ and the image is 'x’
the post title ‘meteor’ and the title 'y’
when i share the post link in facebook
i got the name ‘neutron blog’ and the thumbnail 'x’
but what i want that the title is of the post and the thumbnail is the ‘y’


#10

i mean you should update your question to say:

how to change head elements like meta og:title for different routes. I’m using Meteor + Blaze + Flowrouter.


#11

have you already tried this?


#12

yes i tested it but no result


#13

Are you sure you’ve asked FB to scrape the URL again after changes?


#14

Are you sure you’ve asked FB to scrape the URL again after changes?

yes i’m sure you can test the link http://studioklub.com/studio/Dirty84697262


#15

Have you tried package kadira:dochead


#16

yes but no result it does’nt work


#17

Looks like FB isn’t running any of the JS so the og tags for your page aren’t being rendered by the scraper :disappointed:

You may need some server-side-rendering of header tags to make this work. IIRC it is possible to get Blaze to SSR some content


#18

You’ll need to server-render the <head> or use something like prerender.io.

Prerender allows you to set up your own server so you don’t necessarily need to pay for it or use their service. It’s pretty easy to get up and running too.


#19

If you plan on using a service I recommend https://ostr.io/. The team behind it support many Meteor packages including flow-router-extra, Meteor-Files (ostrio:files) and many others


#20

The last few posts are the correct way to do this. Here is a basic implementation we have been using to target bots:

// server.js
import { WebApp } from 'meteor/webapp';

const serverRendering = (req, res, next) => {
  try {
    const ua = req.headers['user-agent'];

    if (/bot|facebook|twitter|pinterest|google|baidu|bing|msn|duckduckgo|teoma|slurp|yandex/i.test(ua)) {

      // Send any non matches forward
      if (!pathName.includes('/target-url')) {
        next();
      }

      // Fetch the data you need to build your tags (and htmlContent)
      // then construct your response:
      const html = `
        <!html>
        <head>
          <title>${title}</title>
          <meta name="description" content="${description}" />
          <meta property="og:type" content="website"/>
          <meta property="og:title" content="${title}"/>
          <meta property="og:description" content="${description}"/>
          <meta property="og:site_name" content="Your Site"/>
          <meta property="og:url" content="${rootUrl}"/>
          <meta property="og:image" content="${image}"/>
        </head>
        <body>
          ${htmlContent}
        </body>
      `;
      res.statusCode = 200;
      res.setHeader('Content-Type', 'text/html');
      res.end(html);
      }

    } else {
      next();
    }
  } catch (err) {
    console.log(err);
  }
};

// attach the handler to webapp
WebApp.connectHandlers.use(serverRendering);