[feature] opengraph meta tags (#806)

* f0x gitignore additions

* better meta title and descriptions

* user avatar icon for thread and profile meta tags

* use proper tag for image

* whitespace

* add noescapeAttr template function

* use ogMeta struct for opengraph

* maxOGDescriptionLength = 300

Co-authored-by: tsmethurst <tobi.smethurst@protonmail.com>

.gitignore

@@ -25,5 +25,7 @@ example/docker-compose/docker-volume
 # excludes debug build
 cmd/gotosocial/__debug_bin
 
-# ignore f0x' nix-shell
+# ignore f0x' nix-shell, direnv
 shell.nix
+.direnv
+.envrc

internal/router/template.go

@@ -70,6 +70,11 @@ func noescape(str string) template.HTML {
 	return template.HTML(str)
 }
 
+func noescapeAttr(str string) template.HTMLAttr {
+	/* #nosec G203 */
+	return template.HTMLAttr(str)
+}
+
 func timestamp(stamp string) string {
 	t, _ := time.Parse(time.RFC3339, stamp)
 	return t.Format("January 2, 2006, 15:04:05")
@@ -151,6 +156,7 @@ func LoadTemplateFunctions(engine *gin.Engine) {
 	engine.SetFuncMap(template.FuncMap{
 		"escape":         escape,
 		"noescape":       noescape,
+		"noescapeAttr":   noescapeAttr,
 		"oddOrEven":      oddOrEven,
 		"visibilityIcon": visibilityIcon,
 		"timestamp":      timestamp,

internal/web/base.go

@@ -37,5 +37,6 @@ func (m *Module) baseHandler(c *gin.Context) {
 
 	c.HTML(http.StatusOK, "index.tmpl", gin.H{
 		"instance": instance,
+		"ogMeta":   ogBase(instance),
 	})
 }

internal/web/opengraph.go

@@ -0,0 +1,151 @@
+/*
+   GoToSocial
+   Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
+
+   This program is free software: you can redistribute it and/or modify
+   it under the terms of the GNU Affero General Public License as published by
+   the Free Software Foundation, either version 3 of the License, or
+   (at your option) any later version.
+
+   This program is distributed in the hope that it will be useful,
+   but WITHOUT ANY WARRANTY; without even the implied warranty of
+   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+   GNU Affero General Public License for more details.
+
+   You should have received a copy of the GNU Affero General Public License
+   along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+package web
+
+import (
+	"html"
+	"strconv"
+	"strings"
+
+	apimodel "github.com/superseriousbusiness/gotosocial/internal/api/model"
+	"github.com/superseriousbusiness/gotosocial/internal/text"
+)
+
+const maxOGDescriptionLength = 300
+
+// ogMeta represents supported OpenGraph Meta tags
+//
+// see eg https://developer.yoast.com/features/opengraph/functional-specification/
+type ogMeta struct {
+	// vanilla og tags
+
+	Locale       string // og:locale
+	ResourceType string // og:type
+	Title        string // og:title
+	URL          string // og:url
+	SiteName     string // og:site_name
+	Description  string // og:description
+	Image        string // og:image
+	ImageWidth   string // og:image:width
+	ImageHeight  string // og:image:height
+
+	// article tags
+
+	ArticlePublisher     string // article:publisher
+	ArticleAuthor        string // article:author
+	ArticleModifiedTime  string // article:modified_time
+	ArticlePublishedTime string // article:published_time
+}
+
+// ogBase returns an *ogMeta suitable for serving at
+// the base root of an instance. It also serves as a
+// foundation for building account / status ogMeta on
+// top of.
+func ogBase(instance *apimodel.Instance) *ogMeta {
+	var locale string
+	if len(instance.Languages) > 0 {
+		locale = instance.Languages[0]
+	}
+
+	og := &ogMeta{
+		Locale:       locale,
+		ResourceType: "website",
+		Title:        text.SanitizePlaintext(instance.Title) + " - GoToSocial",
+		URL:          instance.URI,
+		SiteName:     instance.AccountDomain,
+		Description:  parseDescription(instance.ShortDescription),
+		Image:        instance.Thumbnail,
+	}
+
+	return og
+}
+
+// withAccount uses the given account to build an ogMeta
+// struct specific to that account. It's suitable for serving
+// at account profile pages.
+func (og *ogMeta) withAccount(account *apimodel.Account) *ogMeta {
+	og.ResourceType = "profile"
+	og.Title = parseTitle(account, og.SiteName)
+	og.URL = account.URL
+	og.Description = parseDescription(account.Note)
+	og.Image = account.Avatar
+	return og
+}
+
+// withStatus uses the given status to build an ogMeta
+// struct specific to that status. It's suitable for serving
+// at status pages.
+func (og *ogMeta) withStatus(status *apimodel.Status) *ogMeta {
+	if !status.Sensitive && len(status.MediaAttachments) > 0 {
+		a := status.MediaAttachments[0]
+		og.Image = a.PreviewURL
+		og.ImageWidth = strconv.Itoa(a.Meta.Small.Width)
+		og.ImageHeight = strconv.Itoa(a.Meta.Small.Height)
+	} else {
+		og.Image = status.Account.Avatar
+	}
+
+	if status.SpoilerText != "" {
+		og.Description = parseDescription("CW: " + status.SpoilerText)
+	} else {
+		og.Description = parseDescription(status.Text)
+	}
+
+	og.Locale = status.Language
+	og.ResourceType = "article"
+	og.Title = "Post by " + parseTitle(status.Account, og.SiteName)
+	og.URL = status.URL
+	og.ArticlePublisher = status.Account.URL
+	og.ArticleAuthor = status.Account.URL
+	og.ArticlePublishedTime = status.CreatedAt
+	og.ArticleModifiedTime = status.CreatedAt
+	return og
+}
+
+// parseTitle parses a page title from account and accountDomain
+func parseTitle(account *apimodel.Account, accountDomain string) string {
+	user := "@" + account.Acct + "@" + accountDomain
+
+	if len(account.DisplayName) == 0 {
+		return user
+	}
+
+	return account.DisplayName + " (" + user + ")"
+}
+
+// parseDescription returns a string description which is
+// safe to use as a template.HTMLAttr inside templates.
+func parseDescription(in string) string {
+	i := html.UnescapeString(in)
+	i = text.SanitizePlaintext(i)
+	i = strings.ReplaceAll(i, "\"", "'")
+	i = strings.ReplaceAll(i, `\`, "")
+	i = strings.ReplaceAll(i, "\n", " ")
+	i = trim(i, maxOGDescriptionLength)
+	return `content="` + i + `"`
+}
+
+// trim strings trim s to specified length
+func trim(s string, length int) string {
+	if len(s) < length {
+		return s
+	}
+
+	return s[:length]
+}

internal/web/profile.go

@@ -102,6 +102,7 @@ func (m *Module) profileGETHandler(c *gin.Context) {
 	c.HTML(http.StatusOK, "profile.tmpl", gin.H{
 		"instance":         instance,
 		"account":          account,
+		"ogMeta":           ogBase(instance).withAccount(account),
 		"statuses":         statusResp.Items,
 		"statuses_next":    statusResp.NextLink,
 		"show_back_to_top": showBackToTop,

internal/web/thread.go

@@ -108,6 +108,7 @@ func (m *Module) threadGETHandler(c *gin.Context) {
 		"instance": instance,
 		"status":   status,
 		"context":  context,
+		"ogMeta":   ogBase(instance).withStatus(status),
 		"stylesheets": []string{
 			"/assets/Fork-Awesome/css/fork-awesome.min.css",
 			"/assets/dist/status.css",

web/template/header.tmpl

@@ -6,14 +6,24 @@
 	<meta charset="UTF-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<meta name="og:title" content="{{.instance.Title}} - GoToSocial">
+	{{ if .ogMeta }}{{ if .ogMeta.Locale }}<meta name="og:locale" content="{{ .ogMeta.Locale }}">
-	<meta name="og:description" content="{{.instance.ShortDescription}}">
+	{{ end }}<meta name="og:type" content="{{ .ogMeta.ResourceType }}">
+	<meta name="og:title" content="{{ .ogMeta.Title }}">
+	<meta name="og:url" content="{{ .ogMeta.URL }}">
+	<meta name="og:site_name" content="{{ .ogMeta.SiteName }}">
+	<meta name="og:description" {{ .ogMeta.Description | noescapeAttr }}>
+	{{ if .ogMeta.ArticlePublisher }}<meta name="og:article:publisher" content="{{ .ogMeta.ArticlePublisher }}">
+	<meta name="og:article:author" content="{{ .ogMeta.ArticleAuthor }}">
+	<meta name="og:article:modified_time" content="{{ .ogMeta.ArticleModifiedTime }}">
+	<meta name="og:article:published_time" content="{{ .ogMeta.ArticlePublishedTime }}">
+	{{ end }}<meta name="og:image" content="{{ .ogMeta.Image }}">
+	{{ if .ogMeta.ImageWidth }}<meta name="og:image:width" content="{{ .ogMeta.ImageWidth }}">
+	<meta name="og:image:height" content="{{ .ogMeta.ImageHeight }}">
+	{{ end }}{{ end }}<link rel="shortcut icon" href="/assets/logo.png" type="image/png">
 	<link rel="stylesheet" href="/assets/dist/_colors.css">
 	<link rel="stylesheet" href="/assets/dist/base.css">
 	{{range .stylesheets}}<link rel="stylesheet" href="{{.}}">
-	{{end}}
+	{{end}}<title>{{ if .ogMeta }}{{ .ogMeta.Title }}{{ else }}{{.instance.Title}} - GoToSocial{{ end }}</title>
-	<link rel="shortcut icon" href="/assets/logo.png" type="image/png">
-	<title>{{.instance.Title}} - GoToSocial</title>
 </head>
 <body>
 	<div class="page">