1. Knowledge Base
  2. >
  3. Updating the Social Share Image

Updating the Social Share Image

This content only applies to Gator Website Builder hosting plans which are accessible by going to app.gator.com.

For more articles, check out the HostGator Gator Website Builder category
or directly access the Gator Knowledge Base.



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 how to manually add an OG Image Meta Tag using HTML Injection to specify what image will be used by social media. 

social-image-fb

To learn more about sharing optimize web-hosted content on Facebook, please visit their article: A Guide to Sharing for Webmasters.

Uploading Social Share Image

  1. Click on Settings from the left-side navigation.
  2. Select My site from the Settings drop-down menu.
  3. Select the SEO tab.
  4. To upload, select 'Click to upload social share image.'
  5. The Image Library will prompt you to upload from your local computer or use the stock photos. Once you're done, click Apply to save the image.
    social-share-image-seo
  6. Please Save and then Publish the site to make these changes live.

Using HTML Injection

Another option is to add it by using HTML. To begin, please follow the steps below:

  1. 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.
OR
  • If you are trying to use your own 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 
https://websitebuilder.com/images/social-image.jpg 
  1. Insert the image URL into the following meta tag:
    <meta property="og:image" content="IMAGE LINK HERE"/>
     
  2. Within the express editor, select Settings on the left side navigation.
  3. Click on HTML Injection from the Settings drop-down menu.
  4. Under the Head HTML tab, add the Metadata.
  5. Click Apply to save changes.
    html-injection-walkthrough
  6. Once completed, Save and then Publish the site to make these changes live.
    save-publish

Updating Image Display Using Facebook Crawler

  1. 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/   facebook-debug-sharing
  2. 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. 
    facebook-debug-sharing-2
  3. 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.