 |
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 |
