How to set Open Graph (o:g) meta tags using Typoscript.

The open graph meta tags affects the way how our page link looks, when we share it on social media like on Facebook.

Below is the way how we can set og:title, og:type, og:url, og:description and og:image using Typoscript.

page.headerData {
# Add Open Graph meta
1 = COA
1 {
10 = TEXT
10 {
value = {$siteTitle} : {TSFE:page|title}
insertData = 1
dataWrap = <meta property=”og:title” content=”|”>
}
20 = TEXT
20 {
value = article
wrap = <meta property=”og:type” content=”|”>
}
30 = TEXT
30 {
typolink {
parameter.data = tsfe:id
parameter.insertData = 1
useCacheHash = 1
addQueryString = 1
addQueryString.method = get
addQueryString.exclude = id
forceAbsoluteUrl = 1
returnLast = url
}
wrap = <meta property=”og:url” content=”|”>
}
40 = TEXT
40 {
value = {$siteTitle}
wrap = <meta property=”og:site_name” content=”|”>
}
50 = TEXT
50 {
data = page:description
required = 1
stripHtml = 1
wrap = <meta property=”og:description” content=”|”>
}
60 = FILES
60 {
#gets image form media tab of page
references {
table = pages
uid.data = page:uid
fieldName = media
}
renderObj = TEXT
renderObj {
typolink {
parameter.data = file:current:publicUrl
forceAbsoluteUrl = 1
returnLast = url
}
wrap = |,
}
stdWrap {
listNum = 0
# Use logo image if none is available
ifEmpty.cObject = TEXT
ifEmpty.cObject.typolink {
parameter = fileadmin/templates/images/logo.png
forceAbsoluteUrl = 1
returnLast = url
}
wrap = <meta property=”og:image” content=”|”>
}
}
}
}