How to make the perfect social media sharing image - part 6 Validation tools and tips
In this last post in this series, I will provide links to some social image sharing validator tools and provide a few tips and tricks that I learned along the way. After creating the proper social media images and fine-tuning the social media meta tags that are required, you can validate how each site will display your page using the tools below. Facebook Sharing DebuggerThe Facebook Sharing Debugger will validate your og meta tags and scrape the social media image. it's relatively straightforward to use. Just enter the URL of the page that you want to validate, and the debugger will scrape your page and show you if any errors were made. When you first enter the URL, it will take several seconds to generate the page, and if this page was not shared before, it will prompt you to fetch new information. Click on the button to fetch new information, and the debugger will list out data along with error information. The debugger will not immediately generate the Facebook sharing preview as it is crawling your page in the background, wait several minutes and refresh the page, and the image preview should be displayed. If you have errors indicating that you have missing tags, you can ignore these, as long as you have all of the essential tags. If you don't like the look of the images, you can make some changes, but come back here and regenerate the preview on the pages that you have shared the URL. If you're using Galaxie Blog, I have a utility tool in /common/utilities/cfimage.cfm that will allow you to reprocess the images quickly. For non-Galaxie Blog users, I have provided instructions below, and I placed the utility script on Git hub. Twitter Card ValidatorThe Twitter Card Validator is a bit easier to use, and it responds faster than the Facebook Sharing Debugger. Like Facebook, all that you need is to input your URL. After entering the URL, Twitters tool should immediately display your page preview. However, it is not easy to change the appearance of the preview after it has been made. I'll show you some tricks to re-create the preview. How to Regenerate a Twitter PreviewTwitter will cache your preview once the page has been shared, or a Twitter Card Preview has been made. However, it can be quite problematic to refresh the cache once made. I learned a few tricks and will show you a bulletproof way to change your preview if you have to make any changes. Go to the Twitter Open Graph meta tags in your page. Append something unique on the twitter:image tag like so. If you're using ColdFusion you can simply create a UUID. Other languages have the same capabilities. All you need to do is make sure that the URL is unique.
meta name="twitter:image" content="https://gregoryalexander.com/blog/enclosures/twitter/toby.jpg?id=#createUuid()#"
Once you have made the URL to the image unique, Twitter thinks that you have changed the image entirely, and will clear the cache and refresh the preview. Note: you'll have to get a Facebook and Twitter Developer Account to use these tools. Creating Social Media ImagesI have put a cfimage.cfm templateon GitHub for you to generate Social Media Images. I use this to generate social media images for my older posts. The usage is pretty simple. Upload the cfimage file to your server. then drop the original image in a enclosures folder, and create two new folders within the enclosures folder named twitter and facebook. In the socialMediaImagePath variable, put in the full image path for the type of image that you want to create. Go to the URL of your cfimage.cfm template with a browser, and the images will be saved underneath the '/enclosures/facebook' or '/enclosures/twitter' folders.
<!-- This is the only line that you should adjust ---> <cfset socialMediaImagePath="D:homegregorysblog.orgwwwrootenclosuresDSC_0518.JPG"> <!-- Consume the createSocialMediaImages(socialMediaImagePath, socialMediaImageType) function ---> <cfset createSocialMediaImages(socialMediaImagePath,="" 'facebook',="" '')=""> <cfset createSocialMediaImages(socialMediaImagePath,="" 'twitter',="" '')="">
Other Social Media ValidatorsThere are other tools for validation for different media platforms, such as Twitters Post Inspector, and Pinterest Rich Pin's Validatorthat I will cover at a different time. Happy Coding!
- How to make the perfect social media sharing image - part 1 Background
- How to make the perfect social media sharing image - part 2 Getting the Size Right
- How to make the perfect social media sharing image - part 3 Get the code...
- How to make the perfect social media sharing image - part 4 Image Examples
- How to make the perfect social media sharing image - part 5 Essential Meta Tags
- Sharing Video's to Facebook and Twitter
This entry was posted on November 4, 2019 at 5:40 PM and has received 1263 views.