Need help? You’ve come to the right place

What’s New Getting Started Building Integrating Publishing

Edit the social preview of your landing page or site

Last Updated

Oftentimes when you are sharing a URL on Facebook, Twitter, and LinkedIn, the preview may appear different than you'd expect. It's often due to a caching of a previous version of that URL by 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. 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.
  • Step 2 of this article is critical, as the published URL of your page or site must be scraped by the debugger tool.

Step 1: Editing the preview 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.).

This is done by adding meta tags to the <head> section of any web page.

Drag & Drop Builder

Our Drag & Drop Builder includes the option to easily customize the information social networks use to generate a preview when you (or one of your customers) posts your page or site to their social profile.

Below, you can find the steps needed to customize the information for social sharing on your pages and sites in our Drag & Drop Builder.

Click the gear icon on the left-hand side of the builder to open the Settings for your page or site, and choose the Social tab.

Fill out the information you’d like to appear in your social sharing preview, then click “Save.”

You can enter the title, description, and upload a photo that will appear in your social share preview. To learn more about each setting, you can mouse over the question mark icon.

PLEASE NOTE: 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.

Advanced Options

While it's completely optional, there may be certain cases in which you'd like to add additional information for social networks to use, such as the type of content you're 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 Tracking Code head-tag section, 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. Learn more. ↘

Standard (Legacy) Builder

In our Legacy Builder, you'll need to edit the Open Graph tags yourself, then paste them into the tracking section of your Standard landing page.

The Code

The basic tags you can use are:

<meta property="og:url" content="Your Leadpages URL"/>
<meta property="og:title" content="The title of your page"/>
<meta property="og:image" content="URL of the image you'd like to use"/>
<meta property="og:description" content="Your description"/>
<meta property="og:type" content="website"/>

Once you create the code follow these steps: 

Add the code to your landing page

Once you have edited the code accordingly you can copy it and place in the Tracking Code section of your landing page.Add the code to your LeadPage

Paste the code in the Head-Tag Tracking Code section.Paste code in the Head-Tag Tracking Code section

Click Done and SaveClick Done and Save

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/

Step 2: Run URL through the Facebook Debugger tool

You can access Facebook’s Debugger here: https://developers.facebook.com/tools/debug/ Once there, paste in the URL for your page or site and click Debug.

Make sure to click Scrape Again in order to fetch your new preview information from Leadpages.

You should then see your preview of what users will see when sharing your page or site on Facebook (and other social platforms), as shown below.

That’s it! Your preview should now reflect the information you've customized for your page or site.

PLEASE NOTE: 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

LinkedIn Caching

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. However, 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

Twitter uses different meta tags called Twitter Cards, however, they use the open graph settings as laid out above as a fallback and therefore will likely use the information you in the social settings in Leadpages. Twitter 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 Twitter Cards please visit: https://dev.twitter.com/cards/overview.

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.


Need more help?

You can always get in touch with our support team—just click help_circle in the top-right corner of your Leadpages dashboard, or submit a ticket ↗

Was this article helpful?
Powered by Zendesk