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 Leadpage so you can have more control over your preview.
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 Facebook uses to generate a preview when you (or one of your customers) posts your page to their Timeline. As a bonus, other social media sites can often use this information as well (such as Twitter).
Below, you can find the steps needed to customize the information for social sharing on your Leadpages in our Drag & Drop Builder.
Open the Analytics settings for your Leadpage, and choose Facebook.
Fill out the information you’d like to appear in your Facebook sharing preview, then click “Save.”
You can enter the title, description, and upload a photo that will appear in your Facebook share preview. To learn more about each setting, you can mouse over the question mark icon.
While it's completely optional, there may be certain cases in which you'd like to add additional information for Facebook 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, you can do so in the Tracking Code head-tag section, as shown here:
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 Leadpage.
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 Leadpage
Once you have edited the code accordingly you can copy it and place in the Tracking Code section of your Leadpage.
Paste the code in the Head-Tag Tracking Code section.
Click 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 Leadpage and click Debug or Fetch New Scrape Information.
You should then see your a preview of what users will see when sharing your page on Facebook, as shown below.
That’s it! Your preview should now reflect the information you've customized for your Leadpage.
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’s URL looks like this…
…you can change it to something like
Sharing the modified URL should ensure LinkedIn uses any new meta tags you’ve added.
Twitter uses different meta tags called Twitter Cards. These cards can also be added to the tracking code section of your page along with the Open Graph tags. For more information and instructions for Twitter Cards please visit: https://dev.twitter.com/cards/overview.