Skip to content

Instantly share code, notes, and snippets.

@michaelbourne
Last active August 18, 2023 20:18
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save michaelbourne/ea7608aedfb2384e8b2ed8b4954179e9 to your computer and use it in GitHub Desktop.
Save michaelbourne/ea7608aedfb2384e8b2ed8b4954179e9 to your computer and use it in GitHub Desktop.
Dynamic OG images for WordPress using Microlink
<?php
/**
* The following goes in your child theme's functions.php file
*/
/**
* Generate custom Open Graph images for your blog posts
*
* @param string $url URL of OG image in HTML Meta.
* @return string $url URL of OG image in HTML Meta.
*/
function mb_generate_og_image_url( $url = '' ) {
// Admin can throw errors, so let's just skip that
if ( is_admin() ) {
return $url;
}
// Optional: If $url is not empty, you have already uploaded a custom OG image
// to the post. If you would like to override previously uploaded images,
// remove the following 3 lines. This applies to Yoast and Rankmath.
if ( ! empty( $url ) ) {
return $url;
}
if ( is_singular( 'post' ) ) {
$id = get_the_ID();
// The array keys here should match the possible values found on the Microlink card
$ogArgs = [
'preset' => 'quote',
'avatar' => 'https://unavatar.io/calgarywebdev', // Unavatar.io is a great way to keep your image up to date
'text' => get_the_title( $id ),
'author' => 'michaelbourne.ca',
'job' => 'Michael Bourne',
];
$api = 'https://i.microlink.io/';
$cardUrl = 'https://cards.microlink.io/?' . http_build_query( $ogArgs );
$url = $api . rawurlencode( $cardUrl );
}
// Fallback
return $url;
}
/**
* Yoast
*/
add_filter( 'wpseo_opengraph_image', 'mb_generate_og_image_url', 20 );
add_filter( 'wpseo_twitter_image', 'mb_generate_og_image_url', 20 );
/**
* RankMath
*/
add_filter( 'rank_math/opengraph/facebook/image', 'mb_generate_og_image_url', 20 );
add_filter( 'rank_math/opengraph/twitter/image', 'mb_generate_og_image_url', 20 );
/**
* SEO Framework. We have to get creative to support their filters.
*/
add_filter( 'the_seo_framework_image_generation_params', function( $params = [], $args = null, $context = 'social' ) {
// Let's not mess with non-social sharing images.
if ( 'social' !== $context ) return $params;
if ( null === $args ) {
// In the loop.
if ( is_singular( 'post' ) ) {
// Append. Use array_unshift() on 'cbs' to prepend.
$params['cbs']['custom'] = 'mb_tsf_custom_singular_image_generator';
}
}
return $params;
}, 10, 3 );
function mb_tsf_custom_singular_image_generator( $args = null, $size = 'full' ) {
$url = mb_generate_og_image_url();
$id = '';
// Since our function can return a blank URL, check for that.
if ( ! empty( $url ) ) {
yield [
'url' => $url,
'id' => $id, // Optional. Used for alt-tag and dimension fetching.
];
}
}
/**
* SEOPress. Similar as above, we have to use their filter in combination with out URL function.
*/
function mb_sp_social_og_thumb($html) {
//you can add here all your conditions like if is_page(), is_category() etc..
if ( is_singular( 'post' ) ) {
$url = mb_generate_og_image_url();
$html = '<meta property="og:image" content="' . esc_url( $url ) . '" />';
}
return $html;
}
add_filter('seopress_social_og_thumb', 'mb_sp_social_og_thumb');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment