Wrong SEO on posts, but have a good prerender values | Nuxt | Page 1

frosty tree Jul 5, 2023, 8:53 PM

#

About the code

I using

const SEOTitle = ref("Light Novel France");
const SEODesc = ref("Le 1er site Français dédié au Light Novel ! Actus, infos, dossiers, critiques et + encore ! Qu'est ce qu'un Light Novel ? On vous dit tout sur l'univers du LN.");
const SEOUrl = ref("https://www.lightnovelfrance.com");
const SEOFollow = ref("index, follow");

useSeoMeta({
  description: SEODesc,
  canonical: SEOUrl,
  ogTitle: SEOTitle,
  ogDescription: SEODesc,
  ogImage: `https://www.lightnovelfrance.com/favicon.png`,
  ogCanonical: SEOUrl,
  ogUrl: SEOUrl,
  twitterCard: "summary",
  twitterTitle: SEOTitle,
  twitterDescription: SEODesc,
  twitterImage: `https://www.lightnovelfrance.com/favicon.png`,
  twitterCanonical: SEOUrl,
});
useHead({
  title: SEOTitle,
  description: SEODesc,
  meta: [
    {name: "robots", content: SEOFollow},
    {name: "googlebot", content: SEOFollow},
  ],
});

And if the post was founded on the API, I return that

  SEODesc.value = truncate(descPostTransformed, 160 - 3); 
  // And some others stuff with the truncate ofc
  SEOUrl.value = `https://www.lightnovelfrance.com/articles/${article.urlSlug}`;
  SEOTitle.value = `${article.title} - Light Novel France`;
  SEOFollow.value = "index, follow";

#

Dependencies

"devDependencies": {
    "@nuxt/devtools": "^0.6.1",
    "nuxt": "3.6.1",
    "nuxt-icon": "^0.4.2",
    "sass": "^1.60.0"
  },
  "dependencies": {
    "@nuxt/image": "^0.7.1",
    "@vueuse/core": "^10.1.2"
  }

vital roost Jul 5, 2023, 11:20 PM

#

do you use ssr?

#

maybe its the cache from the social network or something

#

they have debug tools to check also i know facebook have it

frosty tree Jul 5, 2023, 11:23 PM

#

vital roost do you use ssr?

Hello! Yes sorry I didn't tell how I deploy the website.

ssr is on true,
And deploy with yarn run build (nuxt build)

frosty tree Jul 5, 2023, 11:23 PM

#

vital roost they have debug tools to check also i know facebook have it

I tested with others links, and with any options like ?v=24, but nothing is displayed

vital roost Jul 5, 2023, 11:25 PM

#

do you handle this links?

#

queries

#

i have no idea about v=24 query

#

maybe its takes some time to index

#

where did you put the code

#

when you open the source code do you see it in the head in dev

frosty tree Jul 5, 2023, 11:27 PM

#

I test to share on Discord, and the query v={number} is for avoid the CF cache.

This is a production link https://www.lightnovelfrance.com/articles/16-histoire-de-sol-press-partie-1?v=3049

Light Novel France

Le 1er site Français dédié au Light Novel ! Actus, infos, dossiers, critiques et + encore ! Qu'est ce qu'un Light Novel ? On vous dit tout sur l'univers du LN.

vital roost Jul 5, 2023, 11:28 PM

#

seems fine

frosty tree Jul 5, 2023, 11:28 PM

#

The path of a post is /articleS/{id}-{titleSlug}

#

And i don't have the good title and description, just the default values :/

vital roost Jul 5, 2023, 11:28 PM

#

ah

#

wait

frosty tree Jul 5, 2023, 11:29 PM

#

it's a simple check, if the post is here, ok go put to href of SEO like title, description, follow and url to the defaults values

#

If the post is not present, return a simple 404 error. All works with an API

vital roost Jul 5, 2023, 11:30 PM

#

where do you set it

#

the dynamic one

frosty tree Jul 5, 2023, 11:31 PM

#

all this script is in the same file [id]-[titleSlug].vue

#

with script setup ofc

vital roost Jul 5, 2023, 11:31 PM

#

show whole source

#

how do you fetch

#

and what ever and you set it inside [id]-[titleSlug].vue

frosty tree Jul 5, 2023, 11:32 PM

#

With $fetch

vital roost Jul 5, 2023, 11:32 PM

#

yea

#

why

#

its a page

#

show code

#

i cannot help other way you show how you assigne variables

#

from what

#

its async

frosty tree Jul 5, 2023, 11:34 PM

#

This is all the file https://gist.github.com/thomasbnt/6efa483e1227fbad3f94ac49323ad44a

Gist

[id]-[titleSlug].vue

GitHub Gist: instantly share code, notes, and snippets.

vital roost Jul 5, 2023, 11:36 PM

#

oh lala

frosty tree Jul 5, 2023, 11:36 PM

#

Sorry for the unoptimized code, we're working on it to make it cleaner xd

vital roost Jul 5, 2023, 11:37 PM

#

await setArticle();

#

why

#

ITS a page

#

you make the request directly inside setup

#

onmounted its only clientside called

frosty tree Jul 5, 2023, 11:38 PM

#

oh and can't pregenerate the content with onmounted?

vital roost Jul 5, 2023, 11:39 PM

#

what

#

i am not sure about this one

#

but try to move the call directly

#

inside setup without calling it inside

#

onMounted

#

its very hard to read that stuff

frosty tree Jul 5, 2023, 11:40 PM

#

yeah sorry ^^

vital roost Jul 5, 2023, 11:40 PM

#

the problem

#

// SEO
const SEOTitle = ref("Light Novel France");
const SEODesc = ref("Le 1er site Français dédié au Light Novel ! Actus, infos, dossiers, critiques et + encore ! Qu'est ce qu'un Light Novel ? On vous dit tout sur l'univers du LN.");
const SEOUrl = ref("https://www.lightnovelfrance.com");
const SEOFollow = ref("index, follow");
when you comment this is out

#

will it work ?

frosty tree Jul 5, 2023, 11:41 PM

#

Nope, I've got an error

#

https://i.thomasbnt.dev/i/1nyd5.png

vital roost Jul 5, 2023, 11:47 PM

#

ok

#

useSeoMeta({
description: SEODesc,
canonical: SEOUrl,
ogTitle: SEOTitle,
ogDescription: SEODesc,
ogImage: https://www.lightnovelfrance.com/favicon.png,
ogCanonical: SEOUrl,
ogUrl: SEOUrl,
twitterCard: "summary",
twitterTitle: SEOTitle,
twitterDescription: SEODesc,
twitterImage: https://www.lightnovelfrance.com/favicon.png,
twitterCanonical: SEOUrl,
}); comment this part out

frosty tree Jul 5, 2023, 11:47 PM

#

i moved

await setArticle();
if (article.hasLightNovel) {
  await setLightNovel();
}
await setArticle();

outside of OnMounted, I've all, but no the content of the post, only the title, tags, author, date

vital roost Jul 5, 2023, 11:47 PM

#

the problem is

#

i tried to read

#

one second

vital roost Jul 5, 2023, 11:49 PM

#

frosty tree https://i.thomasbnt.dev/i/1nyd5.png

what calls the console

frosty tree Jul 5, 2023, 11:50 PM

#

No more information in the console about that

#

Just

GET http://localhost:3000/articles/26-le-bleu-du-ciel-dans-ses-yeux 500 (Internal Server Error)

#

And on server side, no logs

vital roost Jul 5, 2023, 11:52 PM

#

why are using fetch

#

not useFetch

#

its a bunch of stuff you have to refactor

#

give me full access with env stuff i try? cant promise anything

#

but you should never trust a random guy in internet xD

frosty tree Jul 5, 2023, 11:54 PM

#

xD

vital roost Jul 5, 2023, 11:55 PM

#

but not today its late

frosty tree Jul 5, 2023, 11:55 PM

#

I try some stuff, I know it's a weird file

vital roost Jul 5, 2023, 11:55 PM

#

yea and go with useFetch

frosty tree Jul 5, 2023, 11:55 PM

#

And what is the benefit to use useFetch ?

vital roost Jul 5, 2023, 11:55 PM

#

it comes from nuxt and will handle some stuff in background

#

what ever it handles when you wiill go plain use asycnData

#

but you have to return a $fetch function

#

depends on the usecase

#

with useFetch it gives you{data,errors,refresh} cache and more

#

$fetch is the one you use in a function inside read here

#

https://discord.com/channels/473401852243869706/1075465297974263868

#

i think it has something todo with the data is not correctly loaded but it should also work with fetch

#

to much top level await maybe

#

https://vuejs.org/api/sfc-script-setup.html#top-level-await

Vue.js - The Progressive JavaScript Framework

#

try to refactor step by step

#

and just load the title and set it

#

for testing

frosty tree Jul 6, 2023, 12:03 AM

#

I'm a bit lost with useFetch and stuff, but I'll read this and find out more about it
And refacto this part of code, is very strange, I took over someone's code, and I didn't think he'd do it like that, I was just thinking of try catches and putting everything in order, and now it's dirty.

vital roost Jul 6, 2023, 12:04 AM

#

in the old nuxt you had to give a return object

#

wait

#

let me refactor one part

frosty tree Jul 6, 2023, 12:04 AM

#

I broke everything ahahahaha

vital roost Jul 6, 2023, 12:05 AM

#

useSeoMeta({
description: SEODesc.value,

});

#

no it think useSeoMeta will handle internal

#

try it just for the description

#

nvm you did it already

frosty tree Jul 6, 2023, 12:06 AM

#

yeah that's what I was going to say

#

At

SEODesc.value = truncate(descPostTransformed, 160 - 3);
SEOUrl.value = https://www.lightnovelfrance.com/articles/${article.urlSlug};
SEOTitle.value = ${article.title} - Light Novel France;
SEOFollow.value = "index, follow";

vital roost Jul 6, 2023, 12:07 AM

#

wait

#

i found something

#

useHead({
title: 'helloworld'

#

can you try

#

this will change or not

frosty tree Jul 6, 2023, 12:10 AM

#

So weird, when I put

await setArticle();
if (article.hasLightNovel) {
  await setLightNovel();
}
await setArticle();

outside the onmounted, the content of the post, others posts don't display, but in my article i've got the content. https://i.thomasbnt.dev/i/jgkqv.png

frosty tree Jul 6, 2023, 12:10 AM

#

vital roost useHead({ title: 'helloworld'

oh ???

#

I've got 'helloworld' in title

#

nvm is normal

vital roost Jul 6, 2023, 12:11 AM

#

now try title: computed(() => SEOTitle.value)

frosty tree Jul 6, 2023, 12:12 AM

#

vital roost now try title: computed(() => SEOTitle.value)

return to the default title

#

not the title of the post

#

oh okay it's work now

#

but it's the same issue no?

vital roost Jul 6, 2023, 12:14 AM

#

which one

#

i trought it works xD

#

check the sourcode

#

not the inspector tool

#

#

the last one

frosty tree Jul 6, 2023, 12:15 AM

#

yep

#

title = default title

vital roost Jul 6, 2023, 12:15 AM

#

omg

#

fiuewnbfwe

frosty tree Jul 6, 2023, 12:16 AM

#

aha xD

#

I also freaked out when I saw that when I shared a post, it didn't display the title or description, but when it rendered, it displayed everything just as it should.

vital roost Jul 6, 2023, 12:17 AM

#

where you shared

#

they have cache

frosty tree Jul 6, 2023, 12:18 AM

#

Here for example, but I force to don't have a cache with the query

#

It's work on Discord, this is the cache of CloudFlare.

#

Oh and also on Twitter, no embed or just the default title I think

#

yeeep https://i.thomasbnt.dev/i/tkez9.png

vital roost Jul 6, 2023, 12:19 AM

#

did you push every change`?

frosty tree Jul 6, 2023, 12:20 AM

#

on production no for the moment

#

When I edit to put outside onMounted, I don't have some elements and the content of the post

#

And if I pass on useFetch, I think to refacto all, and it's very late here (france) xD

vital roost Jul 6, 2023, 12:26 AM

#

i come from germany

#

same

#

try to refactor

frosty tree Jul 6, 2023, 12:27 AM

#

yeah seems the best solution xD

vital roost Jul 6, 2023, 12:27 AM

#

i know that json comes from the server

#

but try to change only the title

#

and then step by step

#

and try to use useFetch inside the setup function

frosty tree Jul 6, 2023, 12:29 AM

#

Owh I just seen ... await getArticle() is requested two times

#

one like that for check if is public and show the content, and the other in setLightNovel() to link the datas.... not really optimized

#Wrong SEO on posts, but have a good prerender values

About the code

Dependencies