Bolt.tips

Simple OG-tags for Facebook, Twitter and others

The OpenGraph Protocol (or "OG" for short) allows other websites to gather relevant information and preview images from your site in order to display them correctly in the context of sites like Twitter, Facebook, or other social media websites.

If you want to add the base set of OG-tags to your pages, you can do this entirely in Twig. Create a small file in your partials folder, like _og_tags.twig.

{% if record|default() %}
    {% set title %}{%- if record|default -%}
        {{- record|title ~ ' | ' -}}
    {%- endif -%}
        {{- config.get('general/sitename') -}}
        {%- if record|default == null and config.has('general/payoff') -%}
                {{- ' | ' ~ config.get('general/payoff') -}}
        {%- endif -%}{% endset %}

    {% set image %}{{ url('homepage') }}{{ record|image|replace({'/files': 'files'}) }}{% endset %}
    <!-- Primary Meta Tags -->
    <meta name="title" content="{{ title }}">
    <meta name="description" content="{{ record|excerpt(160) }}">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="{{ canonical() }}">
    <meta property="og:title" content="{{ title }}">
    <meta property="og:description" content="{{ record|excerpt(160) }}">
    <meta property="og:image" content="{{ image }}">

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="{{ canonical() }}">
    <meta property="twitter:title" content="{{ title }}">
    <meta property="twitter:description" content="{{ record|excerpt(160) }}">
    <meta property="twitter:image" content="{{image }}">
{% endif %}

Then, where applicable, add the include to your template. Often this is placed right below the <title>-tag:

    {% include 'partials/_og_tags.twig' %}

You can use this OpenGraph Preview website to test if your OG-tags are implemented correctly.

Facebook Twitter Seo Meta Og Og-tags Search

Permalink - Written by Bob on September 28, 2020.

« Phone number validation - Fixing JSON errors after database conversion from MySQL 5.6 to 5.7 »