Custom page preview for each content

Hi everybody,

I have a couple of websites made with meteor + vue.js. I am trying to change the title, description, and page image for the given content (from the URL). So when people share the link on social media, the post (or link on slack for example) will show details of the content, not the default page title and description.

Currently, the page title is being updated in the router (in afterEach) but, this is too late for page preview generators. Links still show the base title.

Another approach came to my mind is overriding the content of “main.html” in “WebApp.connectHandlers”. But, it is not possible with the current meteor setup. We can’t continue with the default meteor flow after handling a request.

Any idea? how can we achieve this?

Page preview is very important to increase the retention of web apps. It would be nice to find a way to support page-preview.

Thanks in advance.

Research about SSR

e.g. Meteor project

Hi rjdavid, thanks for the hint. This looks like what I am looking for. It requires some refactoring though. I will skip this option for now.

Any other idea to manipulate main.html? before serving

There’s dynamic templates in Blaze.

Is there something like that in Vue?

Alternatively if the page slug is a query string parameter, not ideal I know, couldn’t you dynamically drive what is displayed for that route?

I use Helmet for React. I see there is a (older) version for Vue. This would be useful for changes in your meta tags but I guess you would still need to pre-render or SSR your pages for scrappers that don’t interpret JS. https://www.npmjs.com/package/vue-helmet