Do you want to share your landing pages on Facebook, Twitter, or LinkedIn, or improve how your pages appear in search engines? Then you'll want to include additional metadata to your landing pages - such as a page title, social sharing image, description, and more!
Here is an example of a page without metadata (also known as a meta tag), and another with beneficial metadata:
This article will explain adding or updating meta tags in Smart Builder or the Classic Builder.
Adding Meta Tags in Smart Builder
- Navigate to your landing page in the Smart Builder.
- Click the Page Settings
tab within the Smart Builder header. A new tab will appear on the left. - Within the Page Metadata tab, update the following sections:
Social Sharing Image: This image appears whenever you share a link to your landing on a website, such as Linkedin, Twitter, Facebook, and so on!
This image is only visible when sharing the link to your landing page. Upload an image of your choice; as a benchmark, we recommend an image size of 400 x 300 (width x height) pixels.
Title: This will be the title of your landing page that you'd like to appear on your social sharing site.
Description: A short introduction or description of your landing page. Keep it concise and be mindful of the wording.
Keywords: Include keywords that pertain most to your landing page's business or purpose.
Favicon: Upload your favicon image directly in Smart Builder. A favicon is an image of your brand's logo or icon that appears in the browser's address bar and next to the landing page's title.
Adding Meta Tags in the Classic Builder
To update the appearance of your social media posts while building your landing page in the Classic Builder, you can install Open Graph Tags.
Open Graph Tags help you customize how your landing page appears on the web via snippets of custom code.
- Find an image that you'd like to use for your share post. You'll want to upload the image to a free external image hosting service, such as Amazon Web Services (AWS). See our article for more details about image hosting.
- Take note and save the image URL from whichever hosting service you use, as well as the image dimensions (width and height in pixels).
Note:
Your image should be at least 600 x 315 pixels – but if you can, try to use images that are 1200 x 630 pixels for the best display across most social networks on high-resolution devices.
- Navigate to your page in the Classic Builder.
- Click the Javascripts
button in the bottom left corner. - Click +Add new Javascript to create an empty dialog box.
- Copy & paste the following code into the Javascripts dialog box, and update the bolded values in the code with your Open Graph tag details:
<meta property="og:title" content="The name of your page goes here." />
<meta property="og:url" content="The url of your page goes here (for instance: http://go.unbounce.com/openhouse/"/>
<meta property="og:type" content="website" />
<meta property="og:image" content="The url where you’re hosting the image you want to use goes here (For instance: http://yourimagehost.com/yourimage.jpg)" />
<meta property="og:image:width" content="400 (add the width dimension of your image here)" />
<meta property="og:image:height" content="300 (add the height dimension of your image here)" />
<meta property="og:description" content="Your social media message goes here. (For instance: Check out my awesome Unbounce landing page!)" /> - Name your script and set the placement to the Head.
- Click the Done button to save your Open Graph tag script.
- Save and Republish your page.
You're all set; you can now share your fully customized social media post to the platform of your choice!
Note:
Though you must add this code within the Javascript section of the Unbounce builder, avoid wrapping the code with script tags (<script> or </script>); this can impact how social media sites crawl your page & search for these tags.
Refreshing your Meta Tag Cache
If you've shared your landing page on a social site before adding any meta tags, you'll need to request that these sites clear the preview cache of your page (i.e., display the most up-to-date version of your page).
For example, within Facebook, you can refresh your landing page via the Debugging Tool.
Input the URL of your published page into the debugger and choose Fetch New Scrape Information. If the new information doesn't appear in Facebook's debugger right away, wait 20-30 minutes and try again.
The same steps apply to LinkedIn or Twitter. Here are some tools that will help clear the cache on your pages.
