We've got a VueJS web app which shows a map location with assets super imposed on the map.

The URL structure is htts://example.app/#/MapInfoAsALongHashString

If an URL is shared the HashString is processed & the location of the map/ assets are generated accordingly.

So far, so good - but when people share the URL we want the page metadata/ OpenGraph information to reflect the map location. For example the Page Title might include the name of the map's location, or information about the assets being displayed.

This is so when the URL is shared any automatically generated preview (i.e. Slack, Facebook Messenger, Twitter etc.) gives enough useful context to accurately describe the link.

The issue we're running into is the app needs to make a number of API calls (i.e. getting the name of the location from lat/long co-ordinates) & by the time this is done the preview has been generated, leaving out the dynamic information.

For reference we're using this service to test the previews: https://metatags.io/

Is there anyway to hold off the generation of the preview until the relevant information is returned?

So far it looks like link previews only use the initial HTML loaded as the app container. Even dynamically changing the page title in the VueJS app without any API calls isn't being picked up by: https://metatags.io/

What is the best way to display dynamic metadata/ OpenGraph information via a VueJS for link previews?

CodePudding user response：

You're correct in your guesses. Most previews use only the initial HTML. One of SPA's bigger downsides.

Ultimately, it's a server side problem. You need to detect if the request was made by a bot (thankfully, they are not hiding it) and include opengraph meta tags in the response somehow.

It can be done separately from the vue application (no need to render the body after all, but you still need to implement data aggregation from your services) or you can use server side rendering with head altering logic in vue router/page component hooks.