Configuring OpenGraph and Twitter Images for SEO in Next.js

Overview

Create OpenGraph and Twitter images to set the images that appear on social networks and messaging apps when a user shares a link to your site. These images help improve SEO and attract more clicks.

1. OpenGraph Image (.jpg)

Usage: The OpenGraph image is displayed when a user shares a link to your site on social networks.

Note: Only use a JPG file.

Placement:

• Place the image in your /app directory or in subfolders for route-specific images. But make sure you have one in the /app directory as a fallback.
• Add an accompanying opengraph-image.alt.txt file in the same route segment as the OpenGraph image to provide alt text.

2. Twitter Image (.jpg)

Usage: The Twitter image is displayed when a user shares a link to your site on Twitter.

Note: Only use a JPG file.

Placement:

• Place the image in your /app directory or in subfolders for route-specific images. But make sure you have one in the /app directory as a fallback.
• Add an accompanying twitter-image.alt.txt file in the same route segment as the Twitter image to provide alt text.