vue.jsvue-routerfacebook-opengraph

(Vue 3) Open graph works only on homepage but not other routes

I have a VueJS website deployed to github page with below open graph setting place in the <head> section inside /index.html:

<head>
  <meta name="description" content="My description">
 
  <meta property="og:title" content="My Title" />
  <meta property="og:description" content="My description" />
  <meta property="og:url" content="https://demo.github.io/path/" />
  <meta property="og:type" content="website" />

  <title>My Title</title>
</head>

So, if I share my homepage https://demo.github.io/path/ like via Discord, the related infomation are shown.

However, If I am sharing other pages like https://demo.github.io/path/about, there would be no info shown.

Am I missed anything, or SSR (i.e. nuxt) is needed instead?

I expect when I share any page under https://demo.github.io/path/ the open graph info should be correctly shown up.

Solution

  • You indeed need SSR for such things. Your first initial page is indeed viewed because it contains some HTML head with the OG tags but the rest of your pages are generated from the SPA. This means that you do not have anything crawled by Platforms bot (they could parse JS but generally will not).

    You can double-check that easily by accessing View Page source on your browser or better, disable JS temporarily. If you see a blank page and no content in the HTML, then you need SSR (can be SSR or SSG tbh).

    You could use the following to solve your issue: