Title: How to use the Open Graph Protocol for your website | |
Author: Solène | |
Date: 21 June 2021 | |
Tags: blog | |
Description: | |
# Introduction | |
Today I made a small change to my blog, I added some more HTML metadata | |
for the Open Graph protocol. | |
Basically, when you share an url in most social networks or instant | |
messaging, when some Open Graph headers are present the software will | |
display you the website name, the page title, a logo and some other | |
information. Without that, only the link will be displayed. | |
# Implementation | |
You need to add a few tags to your HTML pages in the "head" tag. | |
```HTML | |
<meta property="og:site_name" content="Solene's Percent %" /> | |
<meta property="og:title" content="How to cook without burning your eye… | |
<meta property="og:image" content="static/my-super-pony-logo.png" /> | |
<meta property="og:url" content="https://dataswamp.org/~solene/some-u… | |
<meta property="og:type" content="website" /> | |
<meta property="og:locale" content="en_EN" /> | |
``` | |
There are more metadata than this but it was enough for my blog. | |
Open Graph Protocol website |