Badge Webflow Award Winner 2023

Why add an open graph to a website?

The open graph tags (title, meta description and image) have an impact on the traffic and the SEO of your website! In this article we explain why you should add them!

Published on 
3/3/2022
-
Amended on 
24/3/2023
-
5 min
What is an open graph? With preview in Webflow

Also known as "twitter card" or "Open Graph (Facebook)" the open graph tags are the information that appears when you share a link of your site on Linkedin, Twitter, Facebook (Meta), Messenger, in short on social networks! It is essential to add them for two reasons:

  • Improve your engagement (click-through rate)
  • Improve your SEO (Google likes og, meta & images)

What is an open graph?

An open graph is a set of 3 tags: Title, Description and Image. These 3 elements can be modified on each page of a website and are visible when you share a url link of this page.

Example on this image of a link with open graph tag vs link without open graph configuration.

Link with open graph vs link without open graph

The impact of the open graph on my site (seo)

The og tag adds a custom description to your page. This description allows you to create more engagement when people share your url and allows your content to have a better chance of being clicked!

It is also a good practice to apply to optimise your site's SEO.

How to integrate an open graph tag into my site

If you use a CMS, the integration of open graph tags is done from the interface of your CMS.

If you use Webflow as your CMS, it is a very complicated protocol. You'll need to know how to code, add plugins and a bunch of HTML. Or not, welcome to no code world ☀️

Here is how to easily integrate a title tag, meta description and open graph image to your pages on Webflow :

  1. Open "Edit page settings".
  2. Add a - Title tag- and - Meta description- to your SEO settings
  3. Go down to "Open Graph settings".
  4. Check the "Same as SEO settings" box
  5. Add an image URL in the "Open Graph Image URL" field
  6. Save and publish!

⚠️ The optimal size for an Open Graph image is 1200 x 630 pixels. This size will allow the image to remain responsive when shared on different platforms (social media).

You prefer videos? Here is a tutorial on how to integrate open graphs on Webflow in French.  

Conclusion on the open graph

Adding an open graph to your pages will improve its preview when your links are shared on networks. This insight allows you to increase the traffic to your site, which in turn will help you get a higher ranking in the search engines. Yes, because the more users you have on your site... the more Google will think you have interesting things to share!

Ready to take your website to the next level?

Improve your online visibility thanks to Digidop's experience, excellence and reactivity!

Stay in touch with Digidop news!