OGImage not showing
I am trying to display a dynamic image for SEO based on the page being viewed. The page loads a different item image accordingly. To achieve this, I am using the useSeoMeta composable and setting the URL to the image with a computed property or a ref. It shows the correct URL in the HTML inspector, but it does not load, for example, in Discord
40 Replies
Be aware, that most platforms, including Discord are caching the og:images heavily. Thus unless the url of the image changes, you have to wait.
I assume your url changes with every image. Have you tried to test with https://opengraph.dev ?
opengraph
OpenGraph - Preview Images and Generate Open Graph Meta Tags
OpenGraph.Dev: Generate and preview Open Graph meta tags for images, titles, and more, ensuring optimal display on Facebook, Twitter, LinkedIn, WhatsApp...
ow for real?
damn works with this preview
Thanks!!
Append a ?timestamp=Date.now() and you might be good
wow you are the best!
will try
ow let me test first 😛 because it tried with a hardcoded image url now
😛
where do i add a timestamp?
@Single just somewhere in the description?
In your computed:
oke will try
thanks i'll let you know once the test env is published
because i cannot test it locally right?
This would be a more readable solution, using template literals
nope sorry! with the computed prop the image is undefined
damn
@Single
so it works with a hardcoded url but not with a compuited
Can you check for typos? I had to write the text according to your image
indeed let me recheck it all
Test locally if the url is correct before you deploy
it has the correct url in the hteml head
so after fully loading the page it has the correct url
Good
And does it work in opengraph.dev?
nope
still undefined 😛 could it be the computed stuff loading to slow
Does the url work in your local browser?
yeah
Ok, so its not my change but a different problem
Does the page need authentication by any chance?
nope
Do you use ssr?
Don't know how do i check this 😛
If you did not disable it by adding ssr: false to your nuxt config it should be enabled
ssr would be better?
Depends on the page but the general idea is yes
oke
well if by default it is enabled
If you hardcode the url, its working i guess?
yeah
I assume the page meta is generated at buildtime, not at runtime. I am not entirely sure here.
Let me make a test and get back to you later.
Seems like is working
Is item.value?.icon undefined maybe?
in the seo preview it is
but in the html view not
but item.value is also loaded after mounted
in onMounted
That might be too late
yeah mhh
let me check if there is another way :p
ow it is in the onbeforeMounted
@Single Cool did a total rewrite and moved the init item outside the mounted function. Now it seems to work 💪
Nice! Glad you made it!
I thing we were talking next to each other earlier. If you image url DOES change, there is no need to use ?timestamp=... You would only want to append this in case your url stays the same but the image being served has different content.
Oke cool! will try
thanks for your help
How did u achive this? I am working on a similar problem
Did something like this
“
const config = useRuntimeConfig();
// data
const item = ref<Equipment | null>(null);
useSeoMeta({
ogTitle: () =>
${item.value?.name} - Luckys crafting site,
ogImage: () => ${config.public.BASEURI}/Icons/${item.value?.icon} + "?timestamp=" + Date.now(),
ogDescription: () => {
var string = "";
item.value?.materials.forEach(i => {
string += ${i.amount}x ${i.name},
})
return string;
},
ogImageWidth: 80,
ogImageHeight: 80
})”
And in the nuxt config
“runtimeConfig: {
public: {
DEBUG: process.env.DEBUG,
ENCODERSTRING: process.env.ENCODERSTRING,
ENCODERNUMBER: process.env.ENCODERNUMBER,
BASEURI: process.env.NUXT_PUBLIC_BASEURI
},”Thx , but how do you fetching the data for the seo? With asyncData?
With useFetch in the setup so the created