1. Knowledge Base
  2. >
  3. Results
  4. >
  5. Website Builder - How to Link an Image to Your URL When Shared on Social Media

Website Builder - How to Link an Image to Your URL When Shared on Social Media

 

Sharing your website on your social network pages is one way of advertising your brand. How about adding an image preview to that website link? That will definitely give that "visual kick" and entice those on social media to visit because of how your website looks and makes people wonder what you're offering. It will boost more traffic and attract more potential customers to your website and social media. 

This article discusses how to share images of your Website Builder site on social media, such as Facebook, by using HTML meta tags.

Please click the links below for more information.


Step 1: Get your image URL

The first step you need to do is decide what image you want to use as the "preview" or "thumbnail" for your website. You do not need to stress yourself about it. Just think of what "vibe" you want your customers to "see" and "feel" when they first see your website link on social media. Remember, visual cues play a big part in attracting website visitors, so no pressure!

Here are some tips!

  • Your image size matters in setting up meta tags. The recommended minimum dimension of the image is 200 x 200 pixels.
  • The recommended image file size must not exceed 8 MB.

More information about image requirements can be found in this external documentation. Please note that this external documentation is provided for reference only. The information in this document may change, and HostGator has no control over these changes.

For the full list of image properties, please visit this external document.

If you want to use an existing image from your Website Builder site, you need to get the image URL.

To get the image URL:

  1. Open your website in a browser.
  2. Hover your mouse over the image.

    For Mac users, hold down the CTRL key, then click on the image. Choose Copy Image Address from the list of options.

    For PC users, do a right-click. You can either select Copy image address to copy the complete image URL or Open image in a new tab to view the image in a new tab.

    Open new image in new tab

  3. A new tab will open. Copy the image URL from your browser's address bar. File types of image URLs typically end in .jpg or .png.

    Image URL


Step 2: Set up HTML meta tag

Now that you have your image URL, we will now add an HTML meta tag to your Website Builder site.

  1. Log in to your Customer Portal.
  2. On the Dashboard, locate your hosting plan with Website Builder and click on Manage Package.

    Customer Portal - Hosting - Manage

  3. In the Website Builder section, click on Manage.

    Website Builder - Manage

  4. Locate your website, then click on the Edit Website button.

    Website Builder - Edit Website

  5. Once the Website Builder dashboard loads, click Manage from the left menu, then select Advanced.

    Website Builder - Manage - Advanced

  6. In the Advanced Settings pop-up window, enter the meta tag with your image URL from Step 1 in the Site Meta Tags (Only Meta and LINKS are allowed) field using the following format:
    <meta property="og:image" content="https://yourimageurl.jpg" />

    Please make sure to replace "yourimageurl.jpg" with your image URL from Step 1.

    Site Meta Tags - og:image

    Setting Social Media Title

    With this method, your website image preview, or let's say your website thumbnail, will show your site's default landing page as the website title.

    Though this is optional, you may want to update the Title of your site using the meta tags too.

    To update your site title using the meta tags:

    1. Enter the following line in the Site Meta Tags field:
      <meta property="og:title" content="Happy Baking!" />

      Please replace "Happy Baking!" with your preferred website title.

      Site Meta Tag - og:title

  7. Once done, click Save.
  8. Back to the main dashboard, click Save at the top menu.

    Website Builder - Save (top menu)

  9. Once done saving, click Publish.

    Website Builder - Publish (top menu)

Now that you're done adding meta tags to your Website Builder site, let's get that website crawlers working!

If you want to know more about the Open Graph (OG) tags for optimal display on Facebook, you can visit the following external website.

Step 3: Use a meta tag generator

The next step is to preview how your content will look when shared on social media. For the example below, we will use a meta tag generator tool for Facebook. You can also search online for other metatag generators for different social media pages.

  1. Access https://developers.facebook.com/tools/debug/sharing/ on your browser. You may need to log in to your Facebook account to access this tool.
  2. Under the Sharing Debugger tab, enter your website name in the text box, then click Debug.

    Debugger - Debug

  3. You may get a notification "This URL hasn't been shared on Facebook before." Click the Fetch new information button to proceed.

    Fetch new information

  4. Your website metadata will be displayed. Scroll a bit down to find the meta tags that Facebook scraped and stored to create your Link Preview.

    Link Preview

  5. The Link Preview should show your website's image preview. Sharing the URL to Facebook should also display the correct image.

    Facebook

  6. If Link Preview still does not show the image you've put into the meta tags in Step 2, click the Scrape Again button in the Time Scraped section. Facebook caches the metadata for your webpage. To see the update on your site, you need to "tell" Facebook to recrawl on your site by clicking the Scrape Again button. (You may need to hit that button a couple of times. Breathe, then scrape again!)

    Scrape Again

  7. The OG properties metatags, such as the website URL (og:URL)website title (og:title), and image URL (og:image), will be displayed below the page.

    Meta data details

If everything displays as you'd like, start posting your website on social media!