Edit the social preview of your landing page or site

When sharing a URL on Facebook, Twitter/X, LinkedIn, and other social media platforms, the preview of your page or site may appear different than you expected. It's often due to a caching of a previous version of that URL by the social networks. This article will walk you through how to add Open Graph tags to your page or site so you can have more control over your preview.

TIP: If you're editing a Leadpages site, you can edit the social preview of each of your site pages as well by navigating to page settings. Please note, editing the social preview of your site pages will override the social preview set up inside of your site's settings. Learn more ↗

The fine print

If you are publishing a landing page via HTML download, social preview open graph and/or meta tags must be manually added to the HTML.
After editing your social settings in Leadpages, running your page or site's URL through the Facebook Debugger tool is critical, as the published URL of your page or site must be scraped by the tool to present the updated preview.

Editing social settings in Leadpages

Open Graph Tags

The Open Graph protocol creates a way for pages to deliver content that can be added to a social graph. Facebook, LinkedIn, and other platforms use this information to generate previews of pages that match other types of content (such as posts, stories, etc.).

Our builder includes the option to easily customize the Open Graph information social networks use to generate a preview when you (or one of your customers) posts your page or site to their social profile. Follow the steps below.

Step-by-step

Select Settings on the left-hand sidebar of the builder.
Choose the Social tab.
You can upload an image that will appear in your social share preview, the URL where you intend to publish the page (i.e. the og:url meta tag), as well as the title and description of the page.
Click Save and be sure to update your page.
After you have saved and updated your page or site, navigate to the Facebook Debugger Tool.
Log in to Facebook, then paste the URL of your page or site and click Debug.
You will then be presented with a mock preview. If you make more changes to the social preview within Leadpages, make sure to click Scrape Again in order to fetch your new preview information from Leadpages.

NOTE: If you are not seeing the correct URL when sharing to social media, utilizing the "Social URL" field is a good option. When the "Social URL" field is left blank, social sites will simply display the URL being shared to the social platform.

Images must be 600px × 315px at a minimum to be used for the preview. For best results, it's recommended that your image is at least 1200px × 630px. SVG format images are not supported in the social preview.

While customizing the information that social networks should use is possible, the preview is ultimately generated by social networks and we cannot guarantee that you'll be able to fully control your preview. If you run into issues with a Facebook preview or have further questions, please check out Facebook's documentation on sharing here: https://developers.facebook.com/docs/sharing/webmasters#basic

Manual Advanced Options

While it's completely optional, there may be certain cases in which you'd like to manually add additional information for social networks to use, such as the type of content you are sharing. If you're familiar with Open Graph tags and would like to add more to your page or site, you can do so in the Head Section Tracking Code area, as shown here:

NOTE: After saving these changes and clicking Update or Publish within Leadpages, you must run the URL of your page or site through Facebook's Debugger as detailed in the steps above.

For a full reference of object properties that Facebook supports, please see: https://developers.facebook.com/docs/sharing/opengraph/object-properties

For more information about Open Graph tags—and for a list of other tags you can include—visit http://opengraphprotocol.org/

Other social previews

LinkedIn Caching

Following the step-by-step guide above will update the social preview of your page in LinkedIn. However, content shared on LinkedIn is cached by LinkedIn’s servers for about seven days, so a new preview won’t be generated right away when you update meta tags for LinkedIn. There are a couple of steps you can take to try and update your preview immediately.

LinkedIn has its own debugger of sorts called the Post Inspector. Paste your URL here, then click Inspect and your LinkedIn preview should reflect your updates.

You'll want to refresh LinkedIn within your browser before posting your link.

If using the inspector doesn't work, you can alter the URL by adding a query parameter, and LinkedIn should treat the link as a new source.

For example, if your page or site’s URL looks like this…

https://abc.lpages.co/ebook-offer

…you can change it to something like

https://abc.lpages.co/ebook-offer?q=1

Sharing the modified URL should ensure LinkedIn uses any new meta tags you’ve added.

Twitter/X

Twitter/X uses different meta tags called Cards, however, they use the open graph settings as laid out above as a fallback and therefore will likely use the information you placed in the social settings in Leadpages. Cards can also be added to the tracking code section of your page or site along with the Open Graph tags. For more information and instructions for Cards please visit: https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started

Mobile messengers

When sharing a link to a URL via text message, most smart phones will pull in a preview image of the page or site. This is true of Leadpages and by simply editing the social preview and updating your page or site as indicated above, mobile messengers (i.e. iMessage, Android Messages) will share the correct preview image you've selected.