{"id":7557,"date":"2022-02-25T18:08:00","date_gmt":"2022-02-25T17:08:00","guid":{"rendered":"https:\/\/svaerm.com\/projects\/open-graph-meta-tags\/"},"modified":"2022-10-25T18:36:57","modified_gmt":"2022-10-25T16:36:57","slug":"open-graph-meta-tags","status":"publish","type":"post","link":"https:\/\/svaerm.com\/en\/blog\/open-graph-meta-tags\/","title":{"rendered":"Social media preview with open graph meta tags"},"content":{"rendered":"\n

It’s not easy to turn an impression on social media into a customer – but open graph meta tags<\/strong> can help you to achieve that.<\/p>\n\n\n\n

We’ll show you:<\/p>\n\n\n\n

  1. What open graph meta tags are,<\/a><\/li>
  2. which open graph meta tags are available,<\/a><\/li>
  3. how they can improve your company’s online presence,<\/a><\/li>
  4. where to implement them and<\/a><\/li>
  5. how to check them.<\/a><\/li><\/ol>\n\n\n\n

    1. What are open graph meta tags?<\/h2>\n\n\n\n

    Open graph meta tags, also called “OG:meta”<\/strong> or “OG tags”<\/strong>, give you control over how your web pages are previewed on social networks<\/strong>.<\/p>\n\n\n\n

    The Open Graph Protocol, developed by Facebook in 2010, allows website owners to include meta information on their pages that is optimized specifically for Facebook<\/strong>. This information is also picked up by other social networks<\/strong>, such as LinkedIn and Discord.<\/p>\n\n\n\n

    The preview on social media with open graph tags<\/h3>\n\n\n\n

    When a social media user shares a link to one of your web pages, a preview is automatically generated in his post. This is to give other users a better idea of what to expect when they click on the link.<\/p>\n\n\n\n

    If you have open graph meta tags stored and optimized in the backend<\/strong> or directly in the source code<\/strong> of your website, the social media preview<\/strong> is composed accordingly and looks attractive.<\/p>\n\n\n\n

    Examples<\/h3>\n\n\n\n

    Here are some examples of open graph meta tags from customer projects of the svaerm WordPress agency<\/strong><\/a>:<\/p>\n\n\n\n

    \"\"
    Faebook preview of a page from Kuraray, a specialty chemicals company<\/figcaption><\/figure>\n\n\n\n
    \"\"
    Facebook preview of an article from the blog of Ambiente, a consumer goods trade fair<\/figcaption><\/figure>\n\n\n\n
    \"\"
    Facebook preview of an article from Conzoom Solutions, a retail online magazine<\/figcaption><\/figure>\n\n\n\n

    Social media preview without OG tags<\/h3>\n\n\n\n

    Unfortunately, many website operators do not know that open graph meta tags exist.<\/p>\n\n\n\n

    The problem: For sites that don’t implement open graph meta tags, Facebook and other social media automatically<\/strong> create the preview from the URL, the page title, the meta description and the first available image.<\/p>\n\n\n\n

    The page title and the meta description are usually far too long<\/strong> for the preview on social media and are truncated in the middle<\/strong>. Particularly problematic are pages that have no images<\/strong> or where design elements such as low-resolution logos or icons are used as the first image in the preview<\/strong>.<\/p>\n\n\n\n

    The result sometimes looks disarranged:<\/p>\n\n\n\n

    \"\"
    Broken Facebook preview, caused by missing OG tags<\/figcaption><\/figure>\n\n\n\n

    As a WordPress agency<\/strong><\/a>, we therefore recommend our customers to include a preview image for each<\/em> page of their website<\/strong> – even if no image is intended for the screen design of the page. For less important pages, reusable standard pictures, such as your company logo, are completely sufficient as og:image.<\/p>\n\n\n\n

    Tip:<\/strong> You can test yourself how your website is displayed. More on this later!<\/a><\/p>\n\n\n\n

    2. Which open graph meta tags are available?<\/h2>\n\n\n\n

    The basic open graph metadata are og:title, og:description, og:image, og:url<\/strong> and og:type<\/strong>. We will introduce them briefly.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    og:title<\/h3>\n\n\n\n

    When composing the og:title you should keep the following in mind:<\/p>\n\n\n\n