Virtually all of the websites I build for my clients use Custom Post Types (CPT). They let me take control of the design by allowing me to use custom coded templates, along with customized labels, supported features, and other specifics. For Anything Graphic, I use a CPT for my Portfolio. If you are using WooCommerce, you’ll have a CPT for your Products.
Website Optimization
If you have a WordPress website, regardless if it’s custom or not, you should be implementing search engine optimization techniques. One of the most popular things to do with a WordPress website is to use a plugin called WordPress SEO by Yoast.
WordPress SEO is the most popular, fully-featured, and easiest to use a plugin that helps you boost your SEO efforts in many different ways. I use it on all of my client websites. It takes care of the technical side of things in a user-friendly way and helps you write better content by focusing on readability and keyword optimization.
One of the features of WordPress SEO is the ability to set social share images for Facebook, Twitter, and Google+. These Open Graph and Twitter Card protocols enable web pages to become richer objects and display better than just a plain ol’ text and link. It displays photos, descriptions, titles, and more in a unified way making your webpages optimized for sharing.
The problem with WordPress SEO is that there is no way to set custom social share images for your CPT Archive pages or Category pages. However, we can easily make this happen by using the filters supplied by WordPress SEO and a WordPress conditional statement to target our Archive and/or Category pages.
Add Custom Social Share Images For Facebook
Simply paste this into your functions.php file. Make sure to specify the URL of the image you want to use for Facebook’s Open Graph og:image meta tag for the $img variable.
Add Custom Social Share Images For Twitter
Simply paste this into your functions.php file. Make sure to specify the URL of the image you want to use for the Twitter Card twitter:image meta tag for the $img variable.
Add Custom Facebook Social Share Descriptions
Simply paste this into your functions.php file. Make sure to specify the URL of the image you want to use for Facebook Open Graph og:description meta tag for the $desc variable.
Add Custom Twitter Social Share Descriptions
Simply paste this into your functions.php file. Make sure to specify the URL of the image you want to use for the Twitter Card twitter:description meta tag for the $desc variable.
You can even make this easy for your clients by making a Global Options page with Advanced Custom Fields. Create your custom fields and just edit the code snippets above to use those fields instead. No reason to hardcode the images here for client websites.
Tagged with: functions, optimize, plugin, rich snippets, seo
What do you think?
Do you have something to say about this post? Give us your opinion, insight, changes, or alternative way of doing something. We'd love to hear from you!
Very nice! Thanks for sharing!
NOTE: If a page, for instance category pages which do not have an image or og:image associated with them in WordPress, will not trigger
wpseo_opengraph_imagehook. It simply never gets called. So the below doesn’t workadd_filter( 'wpseo_opengraph_image', 'ag_yoast_seo_fb_share_images', 10, 1 );You need to set a default image under SEO -> Social -> Facebook -> Default Settings.
That will trigger
wpseo_opengraph_imageand then you can do something with your custom hook.Simon, thanks for adding this. Much appreciated.
Hey, you got a typo on Custom Social Share Images For Twitter:
–> iif( is_category( ‘categoryname’) ) {{
$img = get_stylesheet_directory_uri().’/images/your-image-file.jpg’;
}
To replace by if
Thanks again for sharing
Thanks for letting me know, I appreciate it. Typo is fixed.