The OG does not work when shared on social networks.

thomasbnt commented 1 year ago

Environment

Node >18

"dependencies": {
    "lucide-vue-next": "^0.104.0",
    "unhead": "^1.1.22",
    "vue": "^3.2.47",
    "vue-router": "^4.1.6"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "@vue/eslint-config-prettier": "^7.1.0",
    "eslint": "^8.35.0",
    "eslint-plugin-vue": "^9.9.0",
    "prettier": "^2.8.4",
    "sass": "^1.58.3",
    "vite": "^4.1.4"
  }

Reproduction

I created a GitHub Template with Vue 3 and Vite and some cools packages, and this one for SEO part.

https://github.com/thomasbnt/vuejs3-sass-lucide-starter-kit

Describe the bug

The SEO OG does not work when shared on social networks.

Additional context

When the website is deployed, theses meta are correctly written :

<meta property="og:title" content="Example title" />
<meta property="og:description" content="Woah such a good description" />
<meta property="og:image" content="http://example.com/banner_seo.png" />
<meta property="og:url" content="http://example.com" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:image" content="http://example.com/banner_seo.png" />
<meta property="twitter:url" content="http://example.com" />
<meta property="twitter:title" content="Example title" />
<meta property="twitter:description" content="Woah such a good description" />
<meta name="description" content="Woah such a good description" />
<meta name="robots" content="index, follow" />
<meta name="googlebot" content="index, follow" />
<meta name="canonical" content="http://example.com" />

Fields was remplaced for this example

Logs

No errors on the console when we deploy like on Cloudflare Pages.

harlan-zw commented 1 year ago

Hey, can you share a live example?

Some notes:

One clear issue though is the HTML you provided, the twitter fields should use name instead of property. There's a composable exposed to get around this nuances useSeoMeta.
If you intend to allow users to useHead reactiviely, you should import @unhead/vue instead of unhead
Are you using SSR? Meta tags aren't going to work if not

thomasbnt commented 1 year ago

One clear issue though is the HTML you provided, the twitter fields should use name instead of property. There's a composable exposed to get around this nuances useSeoMeta.

✅ Edited.

If you intend to allow users to useHead reactiviely, you should import @unhead/vue instead of unhead

Hello @harlan-zw, I switched to an composable API, and using now @unhead/vue.

This is my head of my page with examples inputs

<meta name="description" content="Woah such a good description">
<meta name="robots" content="index, follow">
<meta name="googlebot" content="index, follow">
<meta name="canonical" content="https://domain.fr">
<meta property="og:title" content="A title page">
<meta property="og:description" content="Woah such a good description">
<meta property="og:image" content="https://domain.fr/banner_seo.png">
<meta property="og:url" content="https://domain.fr/">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://domain.fr/banner_seo.png">
<meta name="twitter:url" content="https://domain.fr">
<meta name="twitter:title" content="A title page">
<meta name="twitter:description" content="Woah such a good description">
<meta name="twitter:image:alt" content="Alt twitter">

This is my code

import { useHead, useSeoMeta } from "@unhead/vue"

useSeoMeta({
  title: "A title page",
  description:
    "Woah such a good description",
  robots: "index, follow",
  googlebot: "index, follow",
  canonical: "https://domain.fr",
  ogTitle: "A title page",
  ogDescription:
    "Woah such a good description.",
  ogImage: "https://domain.fr/banner_seo.png",
  ogUrl: "https://domain.fr/",
  twitterCard: "summary_large_image",
  twitterImage: "https://domain.fr/banner_seo.png",
  twitterUrl: "https://domain.fr",
  twitterTitle: "A title page",
  twitterDescription:
    "Woah such a good description",
  twitterImageAlt: "Alt twitter",
})
useHead({
  title: "A title page",
})
</script>

Seems a better code. I deployed the website, and checking the SEO when I share it to social networks, and no data is returned like title, description, alt img and banner :c

thomasbnt commented 1 year ago

An example of this code : https://github.com/thomasbnt/example-seo-unhead

harlan-zw commented 1 year ago

The main question is, are you SSR? I can't see any evidence of it in the repo.

If not, then you will need to modify the SPA template using Unhead, but even that can only give you static tags for all SPA pages

thomasbnt commented 1 year ago

The main question is, are you SSR? I can't see any evidence of it in the repo. If not, then you will need to modify the SPA template using Unhead, but even that can only give you static tags for all SPA pages

Sorry for the vagueness of my texts, I still find it difficult to distinguish between SSR and SSG. I'm using Vite without configs, and I just read that about vite build.

And by default CF pages deploys pages in SSG.

I think I'm basically on SPA. But at the moment, when I wanted to deploy it as in prod with the same GitHub repository on Cloudflare Pages (https://example-seo-unhead.pages.dev/), I still have an error. 😆

The error if you want see that (no relative of this issue ofc)

``` Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../" ```

thomasbnt commented 1 year ago

Okay after deployed on Netlify, the project work without the error of importing vue.js. Weird. But also anoother error, when we reload any other page than /,we've got 404 err 😡

BUT we have the render of SEO tags :

https://example-seo-unhead.netlify.app/

Logs: https://app.netlify.com/sites/example-seo-unhead/deploys/641604badf97a60b7c2dfb33

You can see the SEO doesn't show on social networks :/

harlan-zw commented 1 year ago

I'd recommend you use vite-ssg , if you need an idea of how to use it with Unhead, you can see how https://github.com/antfu/vitesse works (it uses @vueuse/head but the API is the same)

thomasbnt commented 1 year ago

Yeah I seen this repository, cool project ! But I would like to create my self my template with vue router, unhead and SASS (with my styles). I close this ticket, maybe Nuxt with this package will be a better road!

unjs / unhead