[chore] Fix opengraph properties (#1611)

internal/web/opengraph.go

@@ -31,26 +31,30 @@
 
 // ogMeta represents supported OpenGraph Meta tags
 //
-// see eg https://developer.yoast.com/features/opengraph/functional-specification/
+// see eg https://ogp.me/
 type ogMeta struct {
 	// vanilla og tags
-
-	Locale       string // og:locale
-	ResourceType string // og:type
 	Title       string // og:title
+	Type        string // og:type
+	Locale      string // og:locale
 	URL         string // og:url
 	SiteName    string // og:site_name
 	Description string // og:description
+
+	// image tags
 	Image       string // og:image
 	ImageWidth  string // og:image:width
 	ImageHeight string // og:image:height
+	ImageAlt    string // og:image:alt
 
 	// article tags
-
 	ArticlePublisher     string // article:publisher
 	ArticleAuthor        string // article:author
 	ArticleModifiedTime  string // article:modified_time
 	ArticlePublishedTime string // article:published_time
+
+	// profile tags
+	ProfileUsername string // profile:username
 }
 
 // ogBase returns an *ogMeta suitable for serving at
@@ -64,13 +68,15 @@ func ogBase(instance *apimodel.InstanceV1) *ogMeta {
 	}
 
 	og := &ogMeta{
-		Locale:       locale,
-		ResourceType: "website",
 		Title:       text.SanitizePlaintext(instance.Title) + " - GoToSocial",
+		Type:        "website",
+		Locale:      locale,
 		URL:         instance.URI,
 		SiteName:    instance.AccountDomain,
 		Description: parseDescription(instance.ShortDescription),
+
 		Image:    instance.Thumbnail,
+		ImageAlt: instance.ThumbnailDescription,
 	}
 
 	return og
@@ -80,11 +86,20 @@ func ogBase(instance *apimodel.InstanceV1) *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.Type = "profile"
 	og.URL = account.URL
+	if account.Note != "" {
 		og.Description = parseDescription(account.Note)
+	} else {
+		og.Description = "This GoToSocial user hasn't written a bio yet!"
+	}
+
 	og.Image = account.Avatar
+	og.ImageAlt = "Avatar for " + account.Username
+
+	og.ProfileUsername = account.Username
+
 	return og
 }
 
@@ -92,31 +107,39 @@ func (og *ogMeta) withAccount(account *apimodel.Account) *ogMeta {
 // struct specific to that status. It's suitable for serving
 // at status pages.
 func (og *ogMeta) withStatus(status *apimodel.Status) *ogMeta {
+	og.Title = "Post by " + parseTitle(status.Account, og.SiteName)
+	og.Type = "article"
+	if status.Language != nil {
+		og.Locale = *status.Language
+	}
+	og.URL = status.URL
+	switch {
+	case status.SpoilerText != "":
+		og.Description = parseDescription("CW: " + status.SpoilerText)
+	case status.Text != "":
+		og.Description = parseDescription(status.Text)
+	default:
+		og.Description = og.Title
+	}
+
 	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)
+		if a.Description != nil {
+			og.ImageAlt = *a.Description
+		}
 	} else {
 		og.Image = status.Account.Avatar
+		og.ImageAlt = "Avatar for " + status.Account.Username
 	}
 
-	if status.SpoilerText != "" {
-		og.Description = parseDescription("CW: " + status.SpoilerText)
-	} else {
-		og.Description = parseDescription(status.Text)
-	}
-
-	if status.Language != nil {
-		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
 }
 

web/template/header.tmpl

@@ -26,18 +26,20 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<meta name="robots" content="{{ if .robotsMeta }}{{ .robotsMeta }}{{ else }}noindex, nofollow{{ end }}">
 	{{ if .ogMeta }}{{ if .ogMeta.Locale }}<meta name="og:locale" content="{{ .ogMeta.Locale }}">
-	{{ end }}<meta name="og:type" content="{{ .ogMeta.ResourceType }}">
+	{{ end }}<meta property="og:type" content="{{ .ogMeta.Type }}">
-	<meta name="og:title" content="{{ .ogMeta.Title }}">
+	<meta property="og:title" content="{{ .ogMeta.Title }}">
-	<meta name="og:url" content="{{ .ogMeta.URL }}">
+	<meta property="og:url" content="{{ .ogMeta.URL }}">
-	<meta name="og:site_name" content="{{ .ogMeta.SiteName }}">
+	<meta property="og:site_name" content="{{ .ogMeta.SiteName }}">
-	<meta name="og:description" {{ .ogMeta.Description | noescapeAttr }}>
+	<meta property="og:description" {{ .ogMeta.Description | noescapeAttr }}>
-	{{ if .ogMeta.ArticlePublisher }}<meta name="og:article:publisher" content="{{ .ogMeta.ArticlePublisher }}">
+	{{ if .ogMeta.ArticlePublisher }}<meta property="og:article:publisher" content="{{ .ogMeta.ArticlePublisher }}">
-	<meta name="og:article:author" content="{{ .ogMeta.ArticleAuthor }}">
+	<meta property="og:article:author" content="{{ .ogMeta.ArticleAuthor }}">
-	<meta name="og:article:modified_time" content="{{ .ogMeta.ArticleModifiedTime }}">
+	<meta property="og:article:modified_time" content="{{ .ogMeta.ArticleModifiedTime }}">
-	<meta name="og:article:published_time" content="{{ .ogMeta.ArticlePublishedTime }}">
+	<meta property="og:article:published_time" content="{{ .ogMeta.ArticlePublishedTime }}">
-	{{ end }}<meta name="og:image" content="{{ .ogMeta.Image }}">
+	{{ end }}{{ if .ogMeta.ProfileUsername }}<meta property="og:profile:username" content="{{ .ogMeta.ProfileUsername }}">
-	{{ if .ogMeta.ImageWidth }}<meta name="og:image:width" content="{{ .ogMeta.ImageWidth }}">
+	{{ end }}<meta property="og:image" content="{{ .ogMeta.Image }}">
-	<meta name="og:image:height" content="{{ .ogMeta.ImageHeight }}">
+	{{ if .ogMeta.ImageAlt }}<meta property="og:image:alt" content="{{ .ogMeta.ImageAlt }}">
+	{{ end }}{{ if .ogMeta.ImageWidth }}<meta property="og:image:width" content="{{ .ogMeta.ImageWidth }}">
+	<meta property="og:image:height" content="{{ .ogMeta.ImageHeight }}">
 	{{ end }}{{ end }}<link rel="shortcut icon" href="{{ .instance.Thumbnail }}" type="{{ if .instance.ThumbnailType }}{{ .instance.ThumbnailType }}{{ else }}image/png{{ end }}">
 	{{ if .rssFeed }}<link rel="alternate" type="application/rss+xml" href="{{ .rssFeed }}" title="{{ if .ogMeta }}{{ .ogMeta.Title }}{{ else }}{{.instance.Title}}{{ end }}">{{ end }}
 	<link rel="stylesheet" href="/assets/dist/_colors.css">