#opengraph-image.alt.txt does not add in og:image:alt

1 messages · Page 1 of 1 (latest)

magic depot
#

opengraph-image.alt.txt does not add in og:image:alt

This applies to twitter-image.alt.txt as well.

atomic zealotBOT
#

Hi @magic depot. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

In Next.js, you can add an accompanying opengraph-image.alt.txt or twitter-image.alt.txt file in the same route segment as the opengraph-image.(jpg|jpeg|png|gif) or twitter-image.(jpg|jpeg|png|gif) image file respectively. This file is used to provide the alt text for the image.

Here's an example of how you can do this:

For opengraph-image.alt.txt:

About Acme

This will generate the following <head> output:

<meta property="og:image:alt" content="About Acme" />

Similarly, for twitter-image.alt.txt:

About Acme

This will also generate the same <head> output:

<meta property="og:image:alt" content="About Acme" />

If you're still having trouble, make sure that the .alt.txt file is in the same route segment as the image file it's providing alt text for. If they're not in the same route segment, Next.js won't be able to associate the alt text with the image.

For more information, you can refer to the Next.js documentation on Open Graph Images (https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@magic depot kapa.ai is still learning and improving, please let us know how it did by reacting below

magic depot
#

@atomic zealot I already placed the txt file in the same location, still doesn't work.

atomic zealotBOT
#

Let me check the knowledge base for you. One moment! :books:

#

I'm sorry to hear that you're having trouble with this. Based on the information provided in the extracts, here are a few things you could check:

  1. Make sure the .alt.txt file is correctly named and placed in the same route segment as the image file. For example, if your image file is named opengraph-image.jpg, the alt text file should be named opengraph-image.alt.txt.

  2. Ensure that the content of the .alt.txt file is a plain text string. For example:

About Acme
  1. Check that your Next.js application is correctly configured to use the opengraph-image and twitter-image file conventions. These should be placed in the same route segment as the image file.

If you've checked all of these and it's still not working, it might be a good idea to look for help in the Next.js community or check the Next.js documentation (https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image) for any updates or changes that might affect this feature.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: