Updating the Social Share Image
When sharing your website to social media sites like Facebook, a great way to add visual interest to your post includes customizing the image automatically pulled when sharing the site. This is known as a 'Social Image' or 'OG image.' This article will show how to upload it on your express editor and manually add an OG Image Meta Tag using HTML Injection to specify what social media will use an image.
To learn more about sharing optimized web-hosted content on Facebook, please visit their article: A Guide to Sharing for Webmasters.
Uploading Social Share Image
- Click on Settings from the left-side navigation.
- Select My site from the Settings dropdown menu.
- Select the SEO tab.
- To upload, click 'Click to upload social share image.'
- The Image Library will prompt you to upload or use the stock photos from your local computer. Once you're done, click Apply to save the image.
- Please save and then Publish the site to make these changes live.
- At least 1080 pixels in width for the best display on high-resolution devices
- Use 600 pixels in width images to display image link ads
- Use 1:1 images in your ad creatives for better performance with image link ads.
- Pre-cache your images by running the URL through the URL Sharing Debugger tool to pre-fetch metadata for the website. You should also do this if you update the image for a piece of content.
Using HTML Injection
Another option is to add it by using HTML. To begin, please follow the steps below:
- Find the URL of the image you would like to use and copy it. Image URLs always end in file types such as .jpg or .png.
- Visit this link to learn how to find an image URL through Google Images.
- If you are trying to use your photo, you can get a link by uploading the image to a 3rd party image host and looking for a Link Symbol to generate the URL.
Example Image URL
- Insert the image URL into the following meta tag:
<meta property="og:image" content="IMAGE LINK HERE"/>
- Within the express editor, select Settings on the left side navigation.
- Click on HTML Injection from the Settings dropdown menu.
- Under the Head HTML tab, add the Metadata.
- Click Apply to save changes.
- Once completed, Save and then Publish the site to make these changes live.
The og:image tag can specify the URL of the image that appears when someone shares the content on Facebook. The complete list of image properties can be found in their article: Open Graph Stories.
- Dimension is 200 x 200 pixels and must not exceed 8 MB
- At least 1200 x 630 pixels for the best display on high-resolution devices
- 600 x 315 pixels to display link page posts with larger images
If your image is smaller than 600 x 315 px, it will still display in the link page post, but the size will be much smaller.
Updating Image Display Using Facebook Crawler
- Next, we will want Facebook to know there is a new image to display. Navigate to the following Facebook link: https://developers.facebook.com/tools/debug/sharing/
Note: You may need to log in to your Facebook account to access this tool.
- Enter your full website URL into the area for Sharing Debugger and click Debug. If the new image doesn't show up right away, since it can take a few minutes to update, you may need to hit the Scrape Again button a couple of times to force Facebook to re-crawl the site's updated OG content.
- The Link Preview should now be updated with the correct OG Image. Sharing the URL directly to Facebook should reflect the correct image as well.