1

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.

Improve this question

1 Answer 1

Reset to default
0

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:

  • NuxtJS, still the best way to go as of today
  • Quasar
  • prerender.io
  • any other homemade middleman that would render your code on the server
Improve this answer
3
  • But aren't my og tags all static contents which placed inside <head> in my index.html, where the JS should only render contents into <div class="app" />?
    – Oliver Mak
    Commented May 7 at 9:50
  • And I also tried to disable the JS on my browser. Although it shows blank page with no content in the HTML, the og tags are still all inside the <head>
    – Oliver Mak
    Commented May 7 at 9:52
  • @OliverMak no, you are supposed to have OG tags for each one of your pages. This is how you can create custom thumbnails for each blog article for example. Each page is supposed to have its own head from a simple HTML site too, not only in a context SPA but this is what the crawler wants. It shows the content on another path like about? I just don't see why an OG at / or /about would be the same, doesn't make sense.
    – kissu
    Commented May 7 at 9:53

Not the answer you're looking for? Browse other questions tagged or ask your own question.