Disabling wordpress.com image CDN, jetpack plugin, for open graph sharing problems

On the web, the proper functioning of Open Graph metadata is crucial for sharing content on social networks. Unfortunately, many WordPress users who use **Jetpack** and WordPress.com's **CDN (Content Delivery Network)** to optimise images can experience problems with sharing their pages on social. In particular, images often display incorrectly or do not load at all when sharing content on platforms such as Facebook, Twitter or LinkedIn.

This problem is usually caused by the fact that Jetpack, by enabling CDN for images, serves them from an external domain that is not always compatible with Open Graph configurations. The social media platform may not be able to read the metadata about the images correctly, so the user runs the risk of incorrect or incomplete sharing of the content.

Fortunately, it is possible to **disable Jetpack's CDN for images** without affecting website performance. In this article, we will explore how to troubleshoot **Open Graph sharing** when using Jetpack on WordPress.

What is Jetpack's CDN and How It Works

Jetpack is a plugin developed by Automattic, the creators of WordPress.com, which offers a number of advanced features for WordPress sites, including a **Content Delivery Network (CDN)** for images. Jetpack's CDN hosts the site's images and static files on globally distributed servers, thus improving the site's loading speed worldwide.

Jetpack's CDN is useful for improving site performance, but introduces some issues when it comes to **Open Graph metadata**. This metadata, in fact, is essential to ensure that images are loaded correctly when content is shared on social networks.

When Jetpack uploads images through its CDN domain (e.g. `i0.wp.com`), social media may not be able to access the Open Graph metadata related to externally hosted images, resulting in images being displayed incorrectly when sharing. This is the main reason why many users wish to disable Jetpack's image CDN, to ensure that images are hosted directly in their domain and are correctly recognised by social networks.

How to Solve the Open Graph Sharing Problem by Disabling the Image CDN

If you are experiencing problems with Open Graph sharing of your images, the solution may be to **disable Jetpack's image CDN**. This can easily be done by following the steps outlined below.

Coding method:

A manual, straightforward, tried and tested method for those who know how to get their hands in the code is to open the functions.php file of a theme possibly child or make use of a plugin that handles snippets using the following code

function callback($buffer) {
return (preg_replace(‘/i[0-9].wp.com\/’, ‘’, $buffer))
}
ob_start(‘callback’);

Remember that before doing anything, it is a good idea to make a full backup to allow for a smooth rollback to a non-production test machine.

Finally, we will have the correct address of our image and you will notice that by sharing the link on Facebook, the image will now be perfectly visible. I will now explain how this very simple code works. I used the ob_start() function to scan all the rendered text of the article page, then through a regular expression I arranged for the string indicating the wordpress.com CDN to be replaced by nothing.

The regular expression was used because the subdomain of the CDN (i01) can be replaced by any number as it is a distributed CDN and can therefore also have a different address. Since it is a censorship-type substitution, should you write the string in an article, it will not be rendered when the page is displayed.

For this reason, this is a good (though not very efficient) way to censor certain words within articles. Hopefully this bug will soon be fixed and this code will become redundant, but in the meantime it only works for me, the alternative is to uninstall the jetpack plugin.

If everything went well, after refreshing the page taking care to clear the cache, with the combination CTRL+U you will open the browser window which will allow you to view the html code of the page. You should notice that within the meta tags of opengraph the cdn will no longer be visible, but you will see the direct link to the image.

Non-coding method

Step 1: Login to the WordPress Control Panel

The first step is to access the administration panel of your WordPress site. Once logged in, navigate to the **"Jetpack ’** section in the side menu.

Step 2: Disable the CDN for Images

After selecting Jetpack, follow these steps to disable the CDN for images:

1. Click on **"Settings ’**.
2. Go to the **"Performance ’** tab.
3. Scroll down until you find the section relating to the **Image CDN**.
4. Disable the option **"Upload images to a content distribution network (CDN) ’**.

By disabling this option, images will no longer be uploaded through WordPress.com servers but will be served directly from your site, resolving any Open Graph sharing issues.

Step 3: Check Open Graph Metadata

Once the image CDN is disabled, it is important to ensure that the Open Graph metadata is correctly configured. You can use tools such as the **Facebook Sharing Debugger** or the **Twitter Card Validator** to check how images appear when shared on social media.

1. Go to the **Facebook Sharing Debugger** (https://developers.facebook.com/tools/debug/).
2. Enter the URL of your page.
3. Click on **"Debug ’** to see the Open Graph metadata.

4. If everything is configured correctly, you will see the images and metadata displayed on Facebook.

Likewise, you can use the **Twitter Card Validator** to test the appearance of the content when it is shared on Twitter.

Step 4: Configure Open Graph Plugins

To ensure that Open Graph metadata is correctly applied to all pages on your site, it is useful to use a plugin that handles metadata automatically, such as **Yoast SEO** or **Rank Math**. These plugins allow you to customise information about images, titles and descriptions that are shared on social media.

Here's how to configure Yoast SEO for Open Graph metadata:

1. Install and activate **Yoast SEO** (if you have not already done so).
2. Go to **SEO > Social** in the WordPress menu.
3. In the **Facebook** tab, make sure the **"Add Open Graph Metadata ’** option is enabled.
4. Customise the settings for your homepage and individual pages, ensuring that images are correctly selected as Open Graph metadata.

Why Disabling Jetpack's CDN is the Solution

The decision to disable Jetpack's CDN for images is a conscious choice that solves a number of social media sharing issues, while maintaining complete control over your site's resources. With the CDN enabled, managing and accessing images becomes less straightforward and can cause conflicts with other metadata technologies such as Open Graph.

By disabling the CDN, images will be served directly from your domain, which improves compatibility with social networks, while reducing the possibility of display errors when sharing.

Final Considerations

In summary, disabling the CDN for Jetpack images in WordPress is a simple and effective strategy for solving Open Graph sharing problems, especially for those who want more control over metadata and site assets. With just a few steps, you can restore the correct display of images on social and ensure that your content is shared in the best possible way.