diff --git a/app/templating/GameHelper.scala b/app/templating/GameHelper.scala
index 00c51612ba..1e0899ed7a 100644
--- a/app/templating/GameHelper.scala
+++ b/app/templating/GameHelper.scala
@@ -18,15 +18,11 @@ trait GameHelper { self: I18nHelper with UserHelper with AiHelper with StringHel
 
   def mandatorySecondsToMove = lila.game.Env.current.MandatorySecondsToMove
 
-  def povOpenGraph(pov: Pov) = {
-    Map(
-      'type -> "website",
-      'image -> cdnUrl(routes.Export.png(pov.game.id).url),
-      'title -> titlePov(pov),
-      'site_name -> "lichess.org",
-      'url -> s"$netBaseUrl${routes.Round.watcher(pov.game.id, pov.color.name).url}",
-      'description -> describePov(pov))
-  }
+  def povOpenGraph(pov: Pov) = lila.app.ui.OpenGraph(
+    image = cdnUrl(routes.Export.png(pov.game.id).url).some,
+    title = titlePov(pov),
+    url = s"$netBaseUrl${routes.Round.watcher(pov.game.id, pov.color.name).url}",
+    description = describePov(pov))
 
   def titlePov(pov: Pov) = {
     val speed = chess.Speed(pov.game.clock).name
diff --git a/app/ui/OpenGraph.scala b/app/ui/OpenGraph.scala
new file mode 100644
index 0000000000..ad23be78ec
--- /dev/null
+++ b/app/ui/OpenGraph.scala
@@ -0,0 +1,26 @@
+package lila.app
+package ui
+
+import play.twirl.api.Html
+
+case class OpenGraph(
+    title: String,
+    description: String,
+    url: String,
+    `type`: String = "website",
+    image: Option[String] = None,
+    siteName: String = "lichess.org") {
+
+  def html = Html(toString)
+
+  private def prop(name: String, value: String) =
+    s"""<meta property="og:$name" content="$value" />"""
+
+  override def toString = List(
+    "title" -> title,
+    "description" -> description,
+    "url" -> url,
+    "type" -> `type`,
+    "siteName" -> siteName
+  ).map((prop _).tupled) + image.?? { prop("image", _) }
+}
diff --git a/app/views/analyse/layout.scala.html b/app/views/analyse/layout.scala.html
index 5a077f72fb..0bebb2116a 100644
--- a/app/views/analyse/layout.scala.html
+++ b/app/views/analyse/layout.scala.html
@@ -1,4 +1,4 @@
-@(title: String, side: Option[Html] = None, chat: Option[Html] = None, underchat: Option[Html] = None, moreCss: Html = Html(""), moreJs: Html = Html(""), openGraph: Map[Symbol, String] = Map.empty, chessground: Boolean)(body: Html)(implicit ctx: Context)
+@(title: String, side: Option[Html] = None, chat: Option[Html] = None, underchat: Option[Html] = None, moreCss: Html = Html(""), moreJs: Html = Html(""), openGraph: Option[lila.app.ui.OpenGraph] = None, chessground: Boolean)(body: Html)(implicit ctx: Context)
 
 @base.layout(
 title = title,
diff --git a/app/views/analyse/replay.scala.html b/app/views/analyse/replay.scala.html
index 732d65398a..ef337b3e78 100644
--- a/app/views/analyse/replay.scala.html
+++ b/app/views/analyse/replay.scala.html
@@ -50,7 +50,7 @@ chat = base.chatDom(trans.spectatorRoom.str(), ctx.isAuth).some,
 underchat = underchat.some,
 moreCss = moreCss,
 moreJs = moreJs,
-openGraph = povOpenGraph(pov),
+openGraph = povOpenGraph(pov).some,
 chessground = false) {
 <div class="analyse cg-512">@miniBoardContent</div>
 <div class="advice_summary" style="display:none">
diff --git a/app/views/analyse/replayBot.scala.html b/app/views/analyse/replayBot.scala.html
index c0a2fa40bf..ca926f17dd 100644
--- a/app/views/analyse/replayBot.scala.html
+++ b/app/views/analyse/replayBot.scala.html
@@ -42,7 +42,7 @@ chat = base.chatDom(trans.spectatorRoom.str(), ctx.isAuth).some,
 underchat = underchat.some,
 moreJs = moreJs,
 moreCss = moreCss,
-openGraph = povOpenGraph(pov),
+openGraph = povOpenGraph(pov).some,
 chessground = true) {
 <div class="analyse cg-512">
   <div class="top">
diff --git a/app/views/base/layout.scala.html b/app/views/base/layout.scala.html
index 7492c39aba..b48726c35f 100644
--- a/app/views/base/layout.scala.html
+++ b/app/views/base/layout.scala.html
@@ -11,7 +11,7 @@ moreCss: Html = Html(""),
 moreJs: Html = Html(""),
 zen: Boolean = false,
 playing: Boolean = false,
-openGraph: Map[Symbol, String] = Map.empty,
+openGraph: Option[lila.app.ui.OpenGraph] = None,
 chessground: Boolean = true,
 withLangAnnotations: Boolean = true)(body: Html)(implicit ctx: Context)
 <!doctype html>
@@ -27,17 +27,13 @@ withLangAnnotations: Boolean = true)(body: Html)(implicit ctx: Context)
     @cssTag("board.css")
     @moreCss
     <link id="piece-sprite" href="@staticUrl(s"stylesheets/piece/${ctx.currentPieceSet}.css?v=$assetVersion")" type="text/css" rel="stylesheet"/>
-    <meta content="@openGraph.get('description).getOrElse(trans.freeOnlineChessGamePlayChessNowInACleanInterfaceNoRegistrationNoAdsNoPluginRequiredPlayChessWithComputerFriendsOrRandomOpponents())" name="description">
+    <meta content="@openGraph.fold(trans.freeOnlineChessGamePlayChessNowInACleanInterfaceNoRegistrationNoAdsNoPluginRequiredPlayChessWithComputerFriendsOrRandomOpponents())(o => Html(o.description))" name="description">
     <link rel="shortcut icon" href="@staticUrl("images/favicon-32-white.png")" type="image/x-icon" />
     @if(!robots) {
     <meta content="noindex, nofollow" name="robots">
     }
     <meta name="google" content="notranslate" />
-    @openGraph.map {
-    case (key, value) => {
-    <meta property="og:@key.name" content="@value" />
-    }
-    }
+    @openGraph.map(_.html)
     <link href="@routes.Blog.atom()" type="application/atom+xml" rel="alternate" title="Latest blog posts" />
     @if(withLangAnnotations){@langAnnotations}
   </head>
diff --git a/app/views/blog/layout.scala.html b/app/views/blog/layout.scala.html
index 58e5572ce6..8adf1ee11f 100644
--- a/app/views/blog/layout.scala.html
+++ b/app/views/blog/layout.scala.html
@@ -1,4 +1,4 @@
-@(title: String, side: Option[Html] = None, openGraph: Map[Symbol, String] = Map.empty)(body: Html)(implicit ctx: Context)
+@(title: String, side: Option[Html] = None, openGraph: Option[lila.app.ui.OpenGraph] = None)(body: Html)(implicit ctx: Context)
 
 @moreCss = {
 @cssTag("blog.css")
diff --git a/app/views/blog/show.scala.html b/app/views/blog/show.scala.html
index 8fcee713c4..991c669e6a 100644
--- a/app/views/blog/show.scala.html
+++ b/app/views/blog/show.scala.html
@@ -11,13 +11,12 @@
 @layout(
 title = s"${~doc.getText("blog.title")} | Blog",
 side = side.some,
-openGraph = Map(
-'type -> "article",
-'image -> doc.getImage("blog.image", "main").??(_.url),
-'title -> ~doc.getText("blog.title"),
-'site_name -> "lichess.org",
-'url -> s"$netBaseUrl${routes.Blog.show(doc.id, doc.slug).url}",
-'description -> ~doc.getText("blog.shortlede"))) {
+openGraph = lila.app.ui.OpenGraph(
+`type` = "article",
+image = doc.getImage("blog.image", "main").map(_.url),
+title = ~doc.getText("blog.title"),
+url = s"$netBaseUrl${routes.Blog.show(doc.id, doc.slug).url}",
+description = ~doc.getText("blog.shortlede")).some) {
 
 <h1 class="blog_title">@doc.getText("blog.title")</h1>
 @meta(doc)
diff --git a/app/views/lobby/home.scala.html b/app/views/lobby/home.scala.html
index a50cfeaace..1966054047 100644
--- a/app/views/lobby/home.scala.html
+++ b/app/views/lobby/home.scala.html
@@ -57,14 +57,12 @@ moreJs = moreJs,
 moreCss = cssTag("home.css"),
 underchat = underchat.some,
 chessground = false,
-openGraph = Map(
-'type -> "website",
-'image -> s"${staticUrl("images/large_tile.png")}",
-'title -> "The best free, adless Chess server",
-'site_name -> "lichess.org",
-'url -> netBaseUrl,
-'description -> trans.freeOnlineChessGamePlayChessNowInACleanInterfaceNoRegistrationNoAdsNoPluginRequiredPlayChessWithComputerFriendsOrRandomOpponents.str()
-)) {
+openGraph = lila.app.ui.OpenGraph(
+image = staticUrl("images/large_tile.png").some,
+title = "The best free, adless Chess server",
+url = netBaseUrl,
+description = trans.freeOnlineChessGamePlayChessNowInACleanInterfaceNoRegistrationNoAdsNoPluginRequiredPlayChessWithComputerFriendsOrRandomOpponents.str()
+).some) {
 <div id="call_boxes">
   @translationCall.map(i18n.callBox(_))
 </div>
diff --git a/app/views/puzzle/layout.scala.html b/app/views/puzzle/layout.scala.html
index 0ffb7dbde9..cdbe44b11a 100644
--- a/app/views/puzzle/layout.scala.html
+++ b/app/views/puzzle/layout.scala.html
@@ -1,4 +1,4 @@
-@(title: String, evenMoreCss: Option[Html] = None, evenMoreJs: Option[Html] = None, openGraph: Map[Symbol, String] = Map.empty)(body: Html)(implicit ctx: Context)
+@(title: String, evenMoreCss: Option[Html] = None, evenMoreJs: Option[Html] = None, openGraph: Option[lila.app.ui.OpenGraph] = None)(body: Html)(implicit ctx: Context)
 
 @moreCss = {
 @cssTag("training.css")
diff --git a/app/views/puzzle/show.scala.html b/app/views/puzzle/show.scala.html
index 8ee6091b56..27c24a6c7c 100644
--- a/app/views/puzzle/show.scala.html
+++ b/app/views/puzzle/show.scala.html
@@ -58,15 +58,13 @@ trans.openings)))
 @layout(
 trans.training.str(),
 evenMoreJs = Some(evenMoreJs),
-openGraph = Map(
-'type -> "website",
-'image -> cdnUrl(routes.Export.puzzlePng(puzzle.id).url),
-'title -> s"Chess tactic training • ${puzzle.color.name.capitalize} to play",
-'site_name -> "lichess.org",
-'url -> s"$netBaseUrl${routes.Puzzle.show(puzzle.id).url}",
-'description -> puzzle.color.fold(
+openGraph = lila.app.ui.OpenGraph(
+image = cdnUrl(routes.Export.puzzlePng(puzzle.id).url).some,
+title = s"Chess tactic training • ${puzzle.color.name.capitalize} to play",
+url = s"$netBaseUrl${routes.Puzzle.show(puzzle.id).url}",
+description = s"Tactic puzzle #${puzzle.id}: " + puzzle.color.fold(
 trans.findTheBestMoveForWhite,
 trans.findTheBestMoveForBlack
-).str())) {
+).str()).some) {
 <div class="round cg-512">@miniBoardContent</div>
 }
diff --git a/app/views/qa/layout.scala.html b/app/views/qa/layout.scala.html
index 33259eb350..0862690586 100644
--- a/app/views/qa/layout.scala.html
+++ b/app/views/qa/layout.scala.html
@@ -1,4 +1,4 @@
-@(title: String, side: Option[Html] = None, openGraph: Map[Symbol, String] = Map.empty, moreJs: Html = Html(""))(body: Html)(implicit ctx: Context)
+@(title: String, side: Option[Html] = None, openGraph: Option[lila.app.ui.OpenGraph] = None, moreJs: Html = Html(""))(body: Html)(implicit ctx: Context)
 
 @sideSection = {
 <div class="side">
diff --git a/app/views/relay/home.scala.html b/app/views/relay/home.scala.html
index edc98bd76c..136ba48200 100644
--- a/app/views/relay/home.scala.html
+++ b/app/views/relay/home.scala.html
@@ -18,12 +18,10 @@
 title = "Watch Chess events",
 side = side.some,
 moreJs = moreJs,
-openGraph = Map(
-'type -> "website",
-'title -> "Watch chess events",
-'site_name -> "lichess.org",
-'url -> s"$netBaseUrl${routes.Relay.index.url}",
-'description -> "Real-time relay of international chess tournaments")) {
+openGraph = lila.app.ui.OpenGraph(
+title = "Watch chess events",
+url = s"$netBaseUrl${routes.Relay.index.url}",
+description = "Real-time relay of international chess tournaments").some) {
 <div id="relay_list">
   <div class="content_box relay_box no_padding" data-icon="n">
     <h1>
diff --git a/app/views/relay/layout.scala.html b/app/views/relay/layout.scala.html
index b8ec59be39..ee4567b141 100644
--- a/app/views/relay/layout.scala.html
+++ b/app/views/relay/layout.scala.html
@@ -1,4 +1,4 @@
-@(title: String, moreJs: Html = Html(""), side: Option[Html] = None, chat: Option[Html] = None, underchat: Option[Html] = None, chessground: Boolean = true, openGraph: Map[Symbol, String] = Map.empty)(body: Html)(implicit ctx: Context)
+@(title: String, moreJs: Html = Html(""), side: Option[Html] = None, chat: Option[Html] = None, underchat: Option[Html] = None, chessground: Boolean = true, openGraph: Option[lila.app.ui.OpenGraph] = None)(body: Html)(implicit ctx: Context)
 
 @moreCss = {
 @cssTag("relay.css")
diff --git a/app/views/relay/show.scala.html b/app/views/relay/show.scala.html
index 08252c587f..94b1488a34 100644
--- a/app/views/relay/show.scala.html
+++ b/app/views/relay/show.scala.html
@@ -44,12 +44,10 @@ chat = chat.map(c => base.chat(c, trans.chatRoom.str())),
 underchat = underchat.some,
 moreJs = moreJs,
 chessground = false,
-openGraph = Map(
-'type -> "website",
-'title -> rel.name,
-'site_name -> "lichess.org",
-'url -> s"$netBaseUrl${routes.Relay.show(rel.id, rel.slug).url}",
-'description -> ~content.flatMap(_.short))) {
+openGraph = lila.app.ui.OpenGraph(
+title = rel.name,
+url = s"$netBaseUrl${routes.Relay.show(rel.id, rel.slug).url}",
+description = ~content.flatMap(_.short)).some) {
 @content.flatMap(_.long).map { long =>
 <div id="relay_description">@autoLink(long)</div>
 }
diff --git a/app/views/round/layout.scala.html b/app/views/round/layout.scala.html
index 4d1f4d7f88..c8759d961d 100644
--- a/app/views/round/layout.scala.html
+++ b/app/views/round/layout.scala.html
@@ -1,4 +1,4 @@
-@(title: String, side: Html, chat: Option[Html] = None, underchat: Option[Html] = None, moreJs: Html = Html(""), openGraph: Map[Symbol, String] = Map.empty, moreCss: Html = Html(""), chessground: Boolean = true, playing: Boolean = false)(body: Html)(implicit ctx: Context)
+@(title: String, side: Html, chat: Option[Html] = None, underchat: Option[Html] = None, moreJs: Html = Html(""), openGraph: Option[lila.app.ui.OpenGraph] = None, moreCss: Html = Html(""), chessground: Boolean = true, playing: Boolean = false)(body: Html)(implicit ctx: Context)
 
 @base.layout(
 title = title,
diff --git a/app/views/round/player.scala.html b/app/views/round/player.scala.html
index f715fbfe76..6f71f1beb6 100644
--- a/app/views/round/player.scala.html
+++ b/app/views/round/player.scala.html
@@ -24,7 +24,7 @@ side = views.html.game.side(pov, (data\"game"\"initialFen").asOpt[String], tour,
 chat = game.tournamentId.isEmpty.option(leftabs(pov, prefs)),
 underchat = views.html.game.watchers().some,
 moreJs = moreJs,
-openGraph = povOpenGraph(pov),
+openGraph = povOpenGraph(pov).some,
 chessground = false,
 playing = true) {
 <div class="round cg-512">
diff --git a/app/views/round/watcher.scala.html b/app/views/round/watcher.scala.html
index 3c13171aca..5748e99b67 100644
--- a/app/views/round/watcher.scala.html
+++ b/app/views/round/watcher.scala.html
@@ -21,7 +21,7 @@ side = views.html.game.side(pov, (data\"game"\"initialFen").asOpt[String], tour,
 chat = base.chatDom(trans.spectatorRoom.str()).some,
 underchat = views.html.game.watchers().some,
 moreJs = moreJs,
-openGraph = povOpenGraph(pov),
+openGraph = povOpenGraph(pov).some,
 chessground = false) {
 <div class="round cg-512">@miniBoardContent</div>
 @cross.map { c =>
diff --git a/app/views/round/watcherBot.scala.html b/app/views/round/watcherBot.scala.html
index 653a3bb7fc..a106cf7f16 100644
--- a/app/views/round/watcherBot.scala.html
+++ b/app/views/round/watcherBot.scala.html
@@ -18,7 +18,7 @@ side = views.html.game.side(pov, initialFen, none, simul = none, relay = none, u
 chat = base.chatDom(trans.spectatorRoom.str()).some,
 underchat = views.html.game.watchers().some,
 moreJs = moreJs,
-openGraph = povOpenGraph(pov)) {
+openGraph = povOpenGraph(pov).some) {
 <div class="round cg-512">
   <div class="top">
     <div class="lichess_game">
diff --git a/app/views/user/layout.scala.html b/app/views/user/layout.scala.html
index 39b1a2a569..ff1e677dd3 100644
--- a/app/views/user/layout.scala.html
+++ b/app/views/user/layout.scala.html
@@ -1,4 +1,4 @@
-@(title: String, side: Option[Html] = None, robots: Boolean = true, evenMoreJs: Html = Html(""), evenMoreCss: Html = Html(""), openGraph: Map[Symbol, String] = Map.empty)(body: Html)(implicit ctx: Context)
+@(title: String, side: Option[Html] = None, robots: Boolean = true, evenMoreJs: Html = Html(""), evenMoreCss: Html = Html(""), openGraph: Option[lila.app.ui.OpenGraph] = None)(body: Html)(implicit ctx: Context)
 
 @moreCss = {
 @cssTag("user-list.css")
diff --git a/app/views/user/show.scala.html b/app/views/user/show.scala.html
index d49922c4fb..402b87b963 100644
--- a/app/views/user/show.scala.html
+++ b/app/views/user/show.scala.html
@@ -63,13 +63,11 @@ title = title,
 side = side.some,
 robots = false,
 evenMoreJs = evenMoreJs,
-openGraph = Map(
-'type -> "website",
-'image -> staticUrl("images/large_tile.png"),
-'title -> u.titleUsernameWithBestRating,
-'site_name -> "lichess.org",
-'url -> s"$netBaseUrl${routes.User.show(u.username).url}",
-'description -> describeUser(u))) {
+openGraph = lila.app.ui.OpenGraph(
+image = staticUrl("images/large_tile.png").some,
+title = u.titleUsernameWithBestRating,
+url = s"$netBaseUrl${routes.User.show(u.username).url}",
+description = describeUser(u)).some) {
 <div class="content_box no_padding user_show">
   <div class="content_box_top">
     @info.allTrophies.map { trophy =>