Generating Localised Open Graph Images per Language at Build Time

When a multilingual webpage is shared on social media platforms like LinkedIn, WhatsApp, or Slack, the preview image that appears typically defaults to the English version, regardless of whether the page is in Japanese or German. This can appear unprofessional and negatively impact click-through rates from social shares. Generating localized Open Graph images during the build process using a template and a simple script is a straightforward solution to this issue.

Start with a single SVG template file that contains placeholders for both the page title and a concise tagline. For each page and language version, fill in the appropriate translated strings, convert the SVG to a PNG image sized at 1200×630 pixels, and reference that image in the page's meta tags. The provided example code demonstrates how to accomplish this using Node.js, the 'fs' library for file system operations, the 'sharp' library for image processing, and the 'pages.json' configuration file that specifies each page's locales and their respective title and tagline.

The script iterates through each page and its language locales, replaces the placeholder title and tagline in the SVG template with the actual translated strings, creates a directory for each locale if it doesn't exist, and saves the resulting PNG image to the appropriate location. Ensuring that the fonts used in the SVG rendering are explicitly installed for the specific languages being supported is crucial, as the rendering engine relies on the fonts present on the build machine.

For languages like Chinese, Japanese, Korean, Arabic, and Thai, additional explicit font files such as Noto fonts need to be included in the CI environment, and a suitable font-family stack should be defined in the template that covers all scripts used across the site. When working with right-to-left languages like Arabic and Hebrew, separate testing and potentially mirrored layouts may be necessary.

Additionally, German titles can become quite lengthy, while CJK (Chinese, Japanese, Korean) titles often lack spacing between characters, both of which require special handling, such as adjusting font sizes for larger titles or breaking lines at a certain character count. After generating the localized images, it's essential to reference each image in the page's meta tags and specify the locale using appropriate properties like "og:image", "og:locale", and "og:locale:alternate".

Additionally, ensure that hreflang and canonical tags are consistent with these URLs to avoid any potential ranking issues due to inconsistent locale signals. Social media platforms cache preview images aggressively, so adding a content hash to the image filename whenever the title changes can help prevent using stale previews. Finally, considering a multilingual WordPress site, the article also suggests referring to their dedicated guide for managing per-locale assets and appropriate URL structures.

Overall, by following these steps, a multilingual website can ensure that each language version displays a localized, high-quality Open Graph image when shared on social media, enhancing the user experience and potentially increasing engagement.