I'm trying to figure out how Reddit manages to generate such impressive Open Graph (OG) images for their posts in Arabic. For my website, I want to display an OG image that summarizes the page content. I'm currently using Nuxt3 with a module called Nuxt OG Image that utilizes Satori. However, Satori struggles with Arabic text and doesn't handle right-to-left (RTL) layouts well. I noticed that Reddit's OG images, like the one from a Saudi Professionals post, are really well done. Can anyone share insights or techniques they think Reddit might use to create these images? I'm flexible with backend solutions if there's a better way to achieve this.
4 Answers
I think Reddit's success with Arabic OG images might come down to their use of a well-suited typeface that supports Arabic characters better than typical system fonts. You could try inspecting network requests on Reddit while toggling between Arabic and English to see if there are differences in font loading or rendering.
Quick question: What exactly is an OG image?
In this context, OG most likely refers to Open Graph, which is a protocol that defines how webpages are represented on social media. It uses the `og:image` meta tag for generating preview thumbnails.
OG images are what you see pop up when you share a link on social media, like WhatsApp or Twitter. They’re created dynamically based on the content linked and include meta tags that's structured like this:
```html
```
Normally, to make an OG image service, you build an HTML element and then take a screenshot of that. I've seen folks use Puppeteer, which operates through Chrome; it handles the rendering, including RTL text, pretty well.
Yeah, but the images from Reddit look generated rather than just screenshots. Maybe they work with SVG for layout creation and then convert to JPEG?
You can download the OG image from a Reddit post using a simple command. Check this out:
```bash
curl 'https://share.redd.it/preview/post/1lxhyq9' -H "User-Agent: facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)" -o out.jpeg
```
After experimenting, it seems like you can create good OG images using SVG templates and libraries like Sharp for conversion to JPEG. My Copilot generated a sample code that handles image rendering, but I'd be careful about performance when scaling up like Reddit does.
That’s an interesting point! I noticed that some browsers do a poor job of rendering Arabic in situations where they don’t offer proper support.