Meteor: change og meta tags dynamically

help
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 Likes
2

Helmet is a great solution

3

I’m using blaze not react

1 Like
4

did you search the forums?

5

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

1 Like
6

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

1 Like
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.

2 Likes
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?

2 Likes
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

1 Like
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

1 Like
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

1 Like
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);
8 Likes