CODEWITHSUNDEEP
vue.jsfacebook-opengraphserver-side-renderingshare-open-graphnuxt.js
Antonio Martin
Antonio Martin

Reputation: 531

Nuxt.js preview on Facebook/Twitter doesn't work: 404 error

I have a site implemented with Nuxt.js and want to share the pages on Facebook, Twitter and WhatsApp. I have to use the metatags opengraph, so I've included them. When I try to share a page into a social network, I can't see the content of the metatags. I can't see the image either, the title and description.

In my case the metatags opengraph are well suited and filled in the page. I've read how to do it in several resources, so that's not the problem. They are located in the <head> tag.

But the problem is when you use the Facebook debugger tool to see your page preview, or the https://metatags.io/ tool. When I wrote the url of my page, a 404 is returned for these tools. For the same url in a browser, you can see properly the page how it is. If you inspect the page, you can see the meta tags. I think the problem is Twitter or Facebook are doing a GET call to my url, but the result of this call, in my understanding, is a Nuxt.js pre-render page for being executed in the browser. In the browser the JS sources are executed at the moment of the page loading, so it can inject all the metatags and many other things. I think this is how Nuxt.js SSR is working. hydratation process?

So my point is how to send the complete HTML when a GET is done, or a workaround to show my preview page in Facebook or Twitter.

Btw, I have deployed my site in Netlify, I don't know if it matters. My nuxtjs app is working on universal mode.

Any idea to resolve the problem with the crawlers and robots? any prerender option?

Upvotes: 2

Views: 3050

Answers (1)

Antonio Martin
Antonio Martin

Reputation: 531

I was researching and finally I've realized what was my real problem. The main problem is I'm deploying the Nuxt app into netlify. This platform only allows you to deploy the Nuxt app as static resources (Static Generated Deployment, Pre-rendered). I mean, there are three ways to deploy a Nuxt app: universal, spa and universal as static mode (Static Generated Deployment, Pre-rendered). The third case is a special case, in which you have to create all the static resources as html pages in deploy time. For doing that you have to use the "npm run generate" command. In my case, I have some dynamic routes and I have to do some rest queries in order to achieve the data in every case. I don't have all the db rows to generate all the html pages at the build time. It's really expensive for me. So Nuxt at the end, for the case of dynamic routes, it's generating only a html page, but including the js part which is the client to the data. So when Facebook or google is calling to the url, they are getting the html with the js, but nothing of the data, because the js is only executed in the browser, and it's there, when the page gets the data via rest. So Facebook, Twitter of WhatsApp can't get the metadata of something that is missing. Additionally these services are getting a 404 http error code when they are calling to my urls, instead of a 200 http code. So it's impossible to share the url into these social services. The solution: or generate all the html pages for every resource in the build time (case 3) or moving to another provider as firebase in order to deploy as universal app (case 1) with an express server. I think I´ll move it to firebase to achieve a good SEO and social media features.

for the other hand I've changed my head method to accomplish with the open graph metadata:

  head() {
return {
  title: `${MyStringHandler.truncate(defaultTitle, 65)}`,
  description: defaultDescription,
  link: [
    {
      rel: 'canonical',
      href: `${routePath}`
    }
  ],
  htmlAttrs: {
    lang: `${language}`
  },
  meta: [
    {
      charset: 'utf-8'
    },
    {
      hid: 'title',
      name: 'title',
      content: `${MyStringHandler.truncate(defaultTitle, 65)}`
    },
    {
      hid: 'description',
      name: 'description',
      content: `${MyStringHandler.truncate(overviewDefault, 155)}`
    },
    {
      hid: 'og:type',
      property: 'og:type',
      content: 'website'
    },
    {
      hid: 'og:title',
      property: 'og:title',
      content: `${MyStringHandler.truncate(defaultTitle, 35)}`
    },
    {
      hid: 'og:description',
      property: 'og:description',
      content: `${MyStringHandler.truncate(overviewDefault, 65)}`
    },
    {
      hid: 'og:image',
      property: 'og:image',
      content: URLHelper.get2XURL(path) // the size has to be more 200px at least 
    },
    {
      hid: 'og:url',
      property: 'og:url',
      content: `www.mydomain.com${routePath}`
    },
    {
      hid: 'og:site_name',
      property: 'og:site_name',
      content: `mydomain.com`
    },
    {
      hid: 'og:locale',
      property: 'og:locale',
      content: `es`
    },
    {
      hid: 'og:image:type',
      property: 'og:image:type',
      content: 'image/jpeg'
    },
    {
      hid: 'twitter:card',
      property: 'twitter:card',
      content: `${MyStringHandler.truncate(overviewDefault, 65)}`
    },
    {
      hid: 'twitter:site',
      property: 'twitter:site',
      content: 'mydomain'
    },
    {
      hid: 'twitter:title',
      name: 'twitter:title',
      content: `${MyStringHandler.truncate(defaultTitle, 35)}`
    },
    {
      hid: 'twitter:description',
      name: 'twitter:description',
      content: `${MyStringHandler.truncate(overviewDefault, 65)}`
    },
    {
      hid: 'twitter:creator',
      property: 'twitter:creator',
      content: 'mydomain'
    },
    {
      hid: 'twitter:image:src',
      property: 'twitter:image:src',
      content: URLHelper.getImageURL(path)
    },
    {
      hid: 'twitter:domain',
      property: 'twitter:domain',
      content: 'mydomain.com'
    },
    {
      hid: 'twitter:image',
      name: 'twitter:image',
      content: URLHelper.getImageURL(path)
    },
    {
      hid: 'twitter:url',
      name: 'twitter:url',
      content: `www.mydomain.com${routePath}`
    }
  ]
}

}

You can test the metadata into the next pages:

update: nuxt can generate your static resources in deploy time using npm run generate, and these resources are SEO-ables. The metatags are working well.

Upvotes: 1

Related Questions