Open Graph and Meta tags

Open Graph and Meta tags impact how consumers of your content will perceive a site when using a search engine and when your site appears on social media platforms. TakeShape gives you total control over the rendering and logic behind how these tags appear on a site. This recipe provides a basic implementation which you can modify and expand on to fit your specific needs.

Create a content type for site-wide defaults

Add fields for meta content to appropriate content types

Modify templates to use the entry specific fields first and then fallback to the site-wide defaults. 

{% if page.social.title %}
    <title>{{ page.meta.title }}</title>
    <meta property="og:title" content="{{ page.meta.title }}"/>
    {% elif page.title %}
    <title>{{ page.title }}</title>
    <meta property="og:title" content="{{ page.title }}"/>
    {% elif metaDefaults.name %}
    <title>{{ metaDefaults.siteName }}</title>
    <meta property="og:title" content="{{ metaDefault.siteName }}"/>
{% endif %}

{% if page.meta.description %}
    <meta name="description" content="{{ page.meta.description }}">
    <meta property="og:description" content="{{ page.meta.description }}">
    {% elif page.bodyHtml %}
    {% set description = page.bodyHtml | striptags() | truncate() %}
    <meta name="description" content="{{ description }}">
    <meta property="og:description" content="{{ description }}">
    {% elif metaDefault.description %}
    <meta name="description" content="{{ metaDefault.description }}">
    <meta property="og:description" content="{{ metaDefault.description }}">
{% endif %}

{% if metaDefaults.siteUrl and page._contentTypeName %}
    {% set path = page | route(page._contentTypeName) %}
    {% set canonicalUrl = metaDefaults.siteUrl + path %}

    <link rel="canonical" href="{{ canonicalUrl }}">
    <meta property="og:url" content="{{ canonicalUrl }}">
{% endif %}

{% if metaDefaults.l.siteName %}
    <meta property="og:site_name" content="{{ metaDefaults.siteName }}">
{% endif %}

{% if page.meta.image %}
    <meta property="og:image" content="{{ page.meta.image.path | image({w:1200,h:630,fit:crop}) }}">
    {% elif metaDefaults.openGraphImage %}
    <meta property="og:image" content="{{ metaDefaults.openGraphImage.path | image({w:1200,h:630,fit:crop}) }}">
{% endif %}

<meta property="og:type" content="website"/>

Join us

Interested in joining the team as coworker or investor?

contact@takeshape.com