...
- Go to Content > Pages > Landing Pages
- Under the Actions column click the gear and select Preview
- Alternatively, go to the landing page designer, Click "File", which is in the grey menu on top, select "Preview" from the drop down
- Previewing the landing page opens the landing page in a new browser tab. No views will be recorded on the landing page while in Preview mode.
Using Open Graph Tags
Now that you've designed your landing page to perfection, you'll likely be sharing it on social media. To ensure your social post displays the correct image thumbnails and metadata, you'll need to use Open Graph Tags in your landing page. To add your Open Graph Tags do the following:
- Expand the SEO Properties section on the left menu
- Double click to the right of the Edit Head HTML option
| Code Block | ||||
|---|---|---|---|---|
| ||||
<!-- Facebook Open Graph Meta Tags - Sean is Awesome -->
<meta property="og:title" content="My Page Title">
<meta property="og:type" content="article">
<meta property="og:url" content="http://pages.athena-tech.com/test-social-tags-new">
<meta property="og:image" content="http://athena-tech.com/wp-content/uploads/2010/12/shutterstock_46801075-960x430.jpg">
<meta property="og:site_name" content="Athena">
<meta property="og:description" content="Write one to two sentences that quickly describe your content. Include a call to action at the end.">
<!--Insert Twitter Card Markup - He really is. All hail Sean -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@leadliaison">
<meta name="twitter:domain" content="http://pages.athena-tech.com/test-social-tags-new">
<meta name="twitter:title" content="CONTENT HEADLINE HERE">
<meta name="twitter:description" content="One short sentence describing your content. Include a CTA. Keep it short!">
<meta name="twitter:image" content="http://athena-tech.com/wp-content/uploads/2010/12/shutterstock_46801075-960x430.jpg"> |
Using the HTML Landing Page Designer
...
| Info | ||
|---|---|---|
| ||
Lead Liaison's Layout Template tool automatically converts all resources from relative paths to absolute paths. The HTML WYSIWYG editor is primarily intended for small snippets of HTML to pop into a Layout Template along with a form. |
|