Open Graph Meta Tags: add new fallback image

[jeherve]

Fixes CML-608

Note

We'll need to merge #44350 and #44377 before we can merge this.

Proposed changes:

This leverages the Social Image Generator library to dynamically generate a better social preview image for sites, based off any image we can find from the site (using the same logic as before), but framing that image and display the site title so the whole preview looks better.

This is currently not something that can be customized via a UI yet.

• The jetpack_og_fallback_social_image_template filter allows one to define their own template instead.
• If the Social Image Generator features are not available, we fall back to the previous behavior.
• The dynamically generated image src is stored in a transient for a day, to avoid putting too much strain on the service.

Warning

This feature requires a paid plan. It is currently gated with the same gate as the Social Image Generator:

jetpack/projects/plugins/wpcomsh/wpcom-features/class-wpcom-features.php

Lines 1071 to 1078 in 401cc49

	self::SOCIAL_IMAGE_GENERATOR => array(
	self::JETPACK_SOCIAL_ADVANCED_PLANS,
	self::JETPACK_COMPLETE_PLANS,
	self::BUNDLE_ENTERPRISE,
	self::JETPACK_SOCIAL_V1_PLANS,
	self::JETPACK_SOCIAL_PLANS,
	self::JETPACK_GROWTH_PLANS,
	self::WPCOM_BUSINESS_AND_HIGHER_PLANS,

Design

I opted to use the edge template from Social Media Generator because it seemed to be the template that best fits social previews. However, when there are no images available to use to generate an image, I opted to use highway.

Here are some screenshots of the different templates currently available:

With a site logo

Design	Preview
highway
dois
fullscreen
edge

In my opinion none of the designs work very well when we have no image to work with though. It may be worth creating a new template just for that use-case, but I'm not quite sure how it should look like.

Without any image

Design	Preview
highway
dois
fullscreen
edge

Screenshots of the current implementation in this PR

Header	Before	After
With a site icon
Without a site icon

Other information:

• Have you written new tests for your changes, if applicable?
• Have you checked the E2E test CI results, and verified that your changes do not break them?
• Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)

Jetpack product discussion

• See CML-608 and p58i-luC-p2

Does this pull request change what data or activity we track or use?

• No

Testing instructions:

CI

• Check if the tests pass.

On a self-hosted site using Offline mode

=> The behavior should not change.

1. Enable offline mode on your site via define( 'JETPACK_DEV_DEBUG', true );
2. Go to Jetpack > Settings > Sharing
3. Enable the Sharing module
4. Load your site's home page
5. View source
6. Check the og:image tag
   • It should be the same with this branch and with trunk.

On a paid self-hosted or WoA site

1. Start with a site with a paid plan (Social, Business, or Complete)
2. Go to Jetpack > Settings > Sharing
3. Enable the Sharing module or the Publicize module
4. Load your site's home page
5. View source
6. Check the og:image tag
   • When using this branch, the tag should use a https://s0.wp.com/_si/ URL.
   • That URL should return a preview image using the site title and any representative image you use for the site.
   • Try uploading a site logo if you haven't yet. You can do so in Settings > General for example. It should change the generated image.

On a WordPress.com Simple site

1. Start with a site with a Business plan
2. Load your site's home page
3. View source
4. Check the og:image tag
   • When using this branch, the tag should use a
     https://s0.wp.com/_si/ URL.
   • Try uploading a site logo if you haven't yet. You can do so
     in Settings > General for example. It should change the generated
     image.
5. Try on another site without a plan
6. Load your site's home page
7. View source
8. Check the og:image tag
   • The tag should not use a
     https://s0.wp.com/_si/ URL. => We have a bug here right now. Social Image Generator: restrict direct access to token generation #44350 should fix the problem.

[github-actions]

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

• To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack), and enable the add/social-media-fallback-open-graph branch.
• To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack add/social-media-fallback-open-graph

Interested in more tips and information?

• In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
• Read more about our development workflow here: PCYsg-eg0-p2
• Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ✅ Add a "[Status]" label (In Progress, Needs Review, ...).
  
• ✅ Add a "[Type]" label (Bug, Enhancement, Janitorial, Task).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

Follow this PR Review Process:

1. Ensure all required checks appearing at the bottom of this PR are passing.
2. Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
3. You can use GitHub's Reviewers functionality to request a review.
4. When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

---

Jetpack plugin:

The Jetpack plugin has different release cadences depending on the platform:

• WordPress.com Simple releases happen as soon as you deploy your changes after merging this PR (PCYsg-Jjm-p2).
• WoA releases happen weekly.
• Releases to self-hosted sites happen monthly:
  • Scheduled release: August 5, 2025
  • Code freeze: August 4, 2025

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

[jp-launch-control]

Code Coverage Summary

Coverage changed in 1 file.

File	Coverage	Δ%	Δ Uncovered
projects/plugins/jetpack/functions.opengraph.php	140/386 (36.27%)	6.24%	27 💔

Full summary · PHP report · JS report

_{Coverage check overridden by I don't care about code coverage for this PR Use this label to ignore the check for insufficient code coveage. .}

[Copilot]

Pull Request Overview

Adds dynamic fallback social preview images using the Social Image Generator and integrates this into the existing Open Graph logic.

• Implements jetpack_og_get_fallback_social_image, jetpack_og_get_site_image, and related helpers to build or fall back to blank/site assets.
• Introduces caching of generated social image tokens and exposes filters for template selection.
• Adds unit tests for the new Open Graph helper functions and updates the changelog.

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File	Description
functions.opengraph.php	Refactors site‐image fallbacks, adds dynamic social image generation functions, filters, and token caching
tests/php/Functions_OpenGraph_Test.php	Adds tests and data providers for new Open Graph helpers
changelog/add-social-media-fallback-open-graph	Documents the new fallback image enhancement

Comments suppressed due to low confidence (3)

projects/plugins/jetpack/functions.opengraph.php:536

• Add unit tests for jetpack_og_get_available_templates to verify it returns the expected template list both when the Social Image Generator is available and when it is not.

function jetpack_og_get_available_templates() {

projects/plugins/jetpack/functions.opengraph.php:555

• Add unit tests for jetpack_og_get_social_image_token to cover its caching behavior, the error path when the generator is unavailable, and successful token retrieval via filter or actual fetch.

function jetpack_og_get_social_image_token( $site_title, $image_url, $template ) {

projects/plugins/jetpack/functions.opengraph.php:405

• Add unit tests for jetpack_og_get_fallback_social_image to ensure the fallback sequence (blank, representative image, template choice) behaves as expected.

function jetpack_og_get_fallback_social_image( $width, $height ) {

[gmjuhasz]

Thanks for working on this Jeremy!

I have some question with the following scenario:

1. Created a new JN site with this branch
2. Checked the homepage, it had no og:image tags - that's expected.
3. Turned on publicize.
4. Checked the homepage, now it has og:image, but it's the blank image and does not contain the site name. This is expected as I don't have the paid plan right?

5. Added the Jetpack Social paid plan
6. OG image is now SIG image with highway template ✅
7. Setting an icon uses SIG image with edge ✅
8. I turned off the module, og:image is now not set on the homepage ✅
9. I turned the module back on, and shared a post with SIG
10. Now on the homepage the og:image is not the site title, but the last post's og image.

Is that expected or should I still see the site title and logo for the site homepage og:image?

[jeherve]

Thanks for taking a look at it!

Checked the homepage, now it has og:image, but it's the blank image and does not contain the site name. This is expected as I don't have the paid plan right?

Correct.

Now on the homepage the og:image is not the site title, but the last post's og image.

That's a good catch, I hadn't tested that. It appears to be a bug with Social Image Generator. I opened #44377 to get this fixed.

[jeherve]

I opened #44377 to get this fixed.

@gmjuhasz As a follow-up, I ran into some unused methods while looking at that problem. #44378 should start getting us rid of them.

[jeherve]

@gmjuhasz I see that we use Jetpack Redirects to generate the URL for SIG, since the beginning:
17507a2

I searched on p2 to try to understand the reason behind it, but couldn't find any conversation about this. Do you happen to have some background on this? Do you think I should do the same here?