While building out a new ExpressionEngine + Exp:resso Store module ecommerce site part of the specification was to include Twitter cards and Open Graph meta data for Facebook to ensure appropriate data is used when people post links to products on either service.
Now, while Twitter cards and Facebook’s use of OG data is varied and offers a number of possibilities, this is just a quick way of doing it. You can of course tweak to your needs!
Basic setup and assumptions
There is a “products” channel where product data is stored, including:
- A custom field for a summary description of the product (text input, no formatting)
- Price value(s) from the Store fieldtype
- A custom field for the main image (including appropriate image manipulation)
Product single entry pages are on a common url - domain.com/products/view/url-title - where /view is segment_2
The templates
The meta data embed template
I’m using an embedded template to call in the meta data, you could use a Snippet here but for this particular site we may need to take advantage of embed variables later on so an embed is more appropriate.
{exp:channel:entries channel=“products” limit=“1” url_title=”{segment_3}”}
{!— Twitter card type —}
<meta name=“twitter:card” content=“summary”>
{!— Twitter username —}
<meta name=“twitter:site” content=”@twitterusername”>
{!— Open Graph type —}
<meta property=“og:type” content=“product”>
{!— Title taken from the Entry Title —}
<meta property=“og:title” content=”{title}”>
{!— Description —}
<meta property=“og:description” content=”
{exp:store:product entry_id=’{entry_id}’ disable_form=‘yes’ disable_javascript=‘yes’}
{if on_sale}
On sale! Was {regular_price} now {price}
{if:else}
{price}
{/if}
{/exp:store:product}
{cf_product_summary}
”>
{!— Image —}
<meta property=“og:image” content=”{cf_product_image:medium}”>
{!— URL —}
<meta property=“og:url” content=”{url_title_path=‘products/view’}”>
{/exp:channel:entries}Notes:
- The exp:store:product tag pulls in pricing data
- The product summary custom field forms the description text
- My “medium” image manipulation to pull in an appropriately sized image
The layout template
All we need to do is add a conditional to check if segment_2 is /view to match the product single entry view, then include the embed template:
<!DOCTYPE html>
<html lang=“en”>
<head>
<title>{if layout:title != ’‘}{layout:title} | {/if}{site_name}</title>
{if segment_2 == “view”}
{embed=‘inc/.product-meta’}
{/if}
</head>
<body>
{layout:contents}
</body>
</html>The output
Assuming all is good you should now see the meta data output in your product single entry page:
<meta name=“twitter:card” content=“summary”>
<meta name=“twitter:site” content=”@myusername”>
<meta property=“og:type” content=“product”>
<meta property=“og:title” content=“My awesome product”>
<meta property=“og:description” content=“On sale! Was £20.00 now £9.99
This is my awesome description of my product.”>
<meta property=“og:image” content=“http://www.domain.com/assets/images/_medium/image.jpg”>
<meta property=“og:url” content=“http://www.domain.com/products/view/my-awesome-product”> Simple eh? Unlike some content systems you don’t need “plugins” or fancy widgets - ExpressionEngine makes it easy!