Files
GoToSocial/internal/api/util/opengraph.go
tobi 700b7eaab7 [feature] Add extra opengraph meta tags (#4154)
# Description

> If this is a code change, please include a summary of what you've coded, and link to the issue(s) it closes/implements.
>
> If this is a documentation change, please briefly describe what you've changed and why.

Update our opengraph meta tag code stuff:

- Use `audio` and `video` types where appropriate.
- Include fall back to `image` types.
- Include `twitter:card=summary` or `twitter:card=summary_large_image` where appropriate (closes https://codeberg.org/superseriousbusiness/gotosocial/issues/2776)
- Include avatar description where possible.
- Include mime type for media.
- Set `modified_time` properly based on latest edit time.

Examples

Status with one image attachment, that's been edited:

```html
<meta property="og:locale" content="en">
<meta property="og:type" content="article">
<meta property="og:title" content="Post by Kip Van Den Bos, salad enjoyer, @tobi@goblin.technology">
<meta property="og:url" content="https://goblin.technology/@tobi/statuses/01JE3BQPNHWNHSNM0KS78X321Q">
<meta property="og:site_name" content="goblin.technology">
<meta property="og:description" content="cowards: &#34;I&#39;ll be a few minutes late, sorry!&#34; me:">
<meta property="og:article:publisher" content="https://goblin.technology/@tobi">
<meta property="og:article:author" content="https://goblin.technology/@tobi">
<meta property="og:article:modified_time" content="2025-04-22T07:24:49.773Z">
<meta property="og:article:published_time" content="2024-12-02T09:37:58.449Z">
<meta property="og:image" content="https://goblin.technology/fileserver/016T5Q3SQKBT337DAKVSKNXXW1/attachment/original/01JE3BPJ1TGMV6H6E8VY0ED5XA.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1224">
<meta property="og:image:height" content="368">
<meta property="og:image:alt" content="Screenshot of a signal conversation where I wrote &#34;Just gonna smash out a quick poo&#34; and my friend responded with a sad face.">
<meta property="og:image" content="https://goblin.technology/fileserver/016T5Q3SQKBT337DAKVSKNXXW1/attachment/original/01J4YBM16ES6C1ENKZC8MC04BD.gif">
<meta property="og:image:type" content="image/gif">
<meta property="og:image:width" content="38">
<meta property="og:image:height" content="49">
<meta property="og:image:alt" content="Avatar for tobi: A 90&#39;s style gif of a black and white skull chattering happily.">
<meta property="og:image" content="https://goblin.technology/fileserver/01BPSX2MKCRVMD4YN4D71G9CP5/attachment/original/01J387PFPNKQWWNY9YQM67WA1T.gif">
<meta property="og:image:type" content="image/gif">
<meta property="og:image:alt" content="Little green peglin goblin bouncing happily.">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://goblin.technology/fileserver/016T5Q3SQKBT337DAKVSKNXXW1/attachment/original/01JE3BPJ1TGMV6H6E8VY0ED5XA.png">
<meta name="twitter:image:alt" content="Screenshot of a signal conversation where I wrote &#34;Just gonna smash out a quick poo&#34; and my friend responded with a sad face.">
```

Status with one audio file (with thumbnail):

```html
<meta property="og:locale" content="en">
<meta property="og:type" content="article">
<meta property="og:title" content="Post by Kip Van Den Bos, salad enjoyer, @tobi@goblin.technology">
<meta property="og:url" content="https://goblin.technology/@tobi/statuses/01JSV5BQ585HB4R8NPK4ANTG91">
<meta property="og:site_name" content="goblin.technology">
<meta property="og:description" content="service top anthem imo">
<meta property="og:article:publisher" content="https://goblin.technology/@tobi">
<meta property="og:article:author" content="https://goblin.technology/@tobi">
<meta property="og:article:modified_time" content="2025-04-27T08:21:00.712Z">
<meta property="og:article:published_time" content="2025-04-27T08:21:00.712Z">
<meta property="og:audio" content="https://goblin.technology/fileserver/016T5Q3SQKBT337DAKVSKNXXW1/attachment/original/01JSV5AJ4RF3E6DATCSW8SAY93.mp3">
<meta property="og:audio:secure_url" content="https://goblin.technology/fileserver/016T5Q3SQKBT337DAKVSKNXXW1/attachment/original/01JSV5AJ4RF3E6DATCSW8SAY93.mp3">
<meta property="og:audio:type" content="audio/mpeg">
<meta property="og:audio:alt" content="Sanctified by Nine Inch Nails, from Pretty Hate Machine">
<meta property="og:image" content="https://goblin.technology/fileserver/016T5Q3SQKBT337DAKVSKNXXW1/attachment/small/01JSV5AJ4RF3E6DATCSW8SAY93.webp">
<meta property="og:image:type" content="image/webp">
<meta property="og:image:width" content="500">
<meta property="og:image:height" content="500">
<meta property="og:image:alt" content="Sanctified by Nine Inch Nails, from Pretty Hate Machine">
<meta property="og:image" content="https://goblin.technology/fileserver/016T5Q3SQKBT337DAKVSKNXXW1/attachment/original/01J4YBM16ES6C1ENKZC8MC04BD.gif">
<meta property="og:image:type" content="image/gif">
<meta property="og:image:width" content="38">
<meta property="og:image:height" content="49">
<meta property="og:image:alt" content="Avatar for tobi: A 90&#39;s style gif of a black and white skull chattering happily.">
<meta property="og:image" content="https://goblin.technology/fileserver/01BPSX2MKCRVMD4YN4D71G9CP5/attachment/original/01J387PFPNKQWWNY9YQM67WA1T.gif">
<meta property="og:image:type" content="image/gif">
<meta property="og:image:alt" content="Little green peglin goblin bouncing happily.">
<meta name="twitter:card" content="summary">
```

## Checklist

Please put an x inside each checkbox to indicate that you've read and followed it: `[ ]` -> `[x]`

If this is a documentation change, only the first checkbox must be filled (you can delete the others if you want).

- [x] I/we have read the [GoToSocial contribution guidelines](https://codeberg.org/superseriousbusiness/gotosocial/src/branch/main/CONTRIBUTING.md).
- [x] I/we have discussed the proposed changes already, either in an issue on the repository, or in the Matrix chat.
- [x] I/we have not leveraged AI to create the proposed changes.
- [x] I/we have performed a self-review of added code.
- [x] I/we have written code that is legible and maintainable by others.
- [x] I/we have commented the added code, particularly in hard-to-understand areas.
- [ ] I/we have made any necessary changes to documentation.
- [x] I/we have added tests that cover new code.
- [x] I/we have run tests and they pass locally with the changes.
- [x] I/we have run `go fmt ./...` and `golangci-lint run`.

Reviewed-on: https://codeberg.org/superseriousbusiness/gotosocial/pulls/4154
Reviewed-by: Daenney <daenney@noreply.codeberg.org>
Co-authored-by: tobi <tobi.smethurst@protonmail.com>
Co-committed-by: tobi <tobi.smethurst@protonmail.com>
2025-05-08 11:11:25 +00:00

310 lines
7.9 KiB
Go

// GoToSocial
// Copyright (C) GoToSocial Authors admin@gotosocial.org
// SPDX-License-Identifier: AGPL-3.0-or-later
//
// 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 util
import (
"html"
"slices"
"strconv"
"strings"
apimodel "code.superseriousbusiness.org/gotosocial/internal/api/model"
"code.superseriousbusiness.org/gotosocial/internal/text"
"code.superseriousbusiness.org/gotosocial/internal/util"
)
// OGMeta represents supported OpenGraph Meta tags
//
// see eg https://ogp.me/
type OGMeta struct {
/* Vanilla og tags */
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
// Zero or more media entries of type image,
// video, or audio (https://ogp.me/#array).
Media []OGMedia
/* 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
/*
Twitter card stuff
https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards
*/
// Set to media URL for media posts.
TwitterSummaryLargeImage string
TwitterImageAlt string
}
func (o *OGMeta) prependMedia(i ...OGMedia) {
if len(o.Media) == 0 {
// Set as
// only entries.
o.Media = i
} else {
// Prepend as higher
// priority entries.
o.Media = slices.Insert(o.Media, 0, i...)
}
}
// OGMedia represents one OpenGraph media
// entry of type image, video, or audio.
type OGMedia struct {
OGType string // image/video/audio
URL string // og:${type}
MIMEType string // og:${type}:type
Width string // og:${type}:width
Height string // og:${type}:height
Alt string // og:${type}:alt
}
// 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.
func OGBase(instance *apimodel.InstanceV1) *OGMeta {
var locale string
if len(instance.Languages) > 0 {
locale = instance.Languages[0]
}
og := &OGMeta{
Title: text.StripHTMLFromText(instance.Title) + " - GoToSocial",
Type: "website",
Locale: locale,
URL: instance.URI,
SiteName: instance.AccountDomain,
Description: ParseDescription(instance.ShortDescription),
Media: []OGMedia{
{
OGType: "image",
URL: instance.Thumbnail,
Alt: instance.ThumbnailDescription,
MIMEType: instance.ThumbnailType,
},
},
}
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 (o *OGMeta) WithAccount(acct *apimodel.WebAccount) *OGMeta {
o.Title = AccountTitle(acct, o.SiteName)
o.ProfileUsername = acct.Username
o.Type = "profile"
o.URL = acct.URL
if acct.Note != "" {
o.Description = ParseDescription(acct.Note)
} else {
const desc = "This GoToSocial user hasn't written a bio yet!"
o.Description = desc
}
// Add avatar image.
o.prependMedia(ogImgForAcct(acct))
return o
}
// util funct to return OGImage using account.
func ogImgForAcct(account *apimodel.WebAccount) OGMedia {
ogMedia := OGMedia{
OGType: "image",
URL: account.Avatar,
Alt: "Avatar for " + account.Username,
}
if desc := account.AvatarDescription; desc != "" {
ogMedia.Alt += ": " + desc
}
// Add extra info if not default avi.
if a := account.AvatarAttachment; a != nil {
ogMedia.MIMEType = a.MIMEType
ogMedia.Width = strconv.Itoa(a.Meta.Original.Width)
ogMedia.Height = strconv.Itoa(a.Meta.Original.Height)
}
return ogMedia
}
// WithStatus uses the given status to build an ogMeta
// struct specific to that status. It's suitable for serving
// at status pages.
func (o *OGMeta) WithStatus(status *apimodel.WebStatus) *OGMeta {
o.Title = "Post by " + AccountTitle(status.Account, o.SiteName)
o.Type = "article"
if status.Language != nil {
o.Locale = *status.Language
}
o.URL = status.URL
switch {
case status.SpoilerText != "":
o.Description = ParseDescription("CW: " + status.SpoilerText)
case status.Text != "":
o.Description = ParseDescription(status.Text)
default:
o.Description = o.Title
}
// Prepend account image.
o.prependMedia(ogImgForAcct(status.Account))
if l := len(status.MediaAttachments); l != 0 && !status.Sensitive {
// Take first not "unknown"
// attachment as the "main" one.
for _, a := range status.MediaAttachments {
if a.Type == "unknown" {
// Skip unknown.
continue
}
// Start with
// common media tags.
desc := util.PtrOrZero(a.Description)
ogMedia := OGMedia{
URL: *a.URL,
MIMEType: a.MIMEType,
Alt: desc,
}
// Gather ogMedias for
// this attachment.
ogMedias := []OGMedia{}
// Add further tags
// depending on type.
switch a.Type {
case "image":
ogMedia.OGType = "image"
ogMedia.Width = strconv.Itoa(a.Meta.Original.Width)
ogMedia.Height = strconv.Itoa(a.Meta.Original.Height)
// If this image is the only piece of media,
// set TwitterSummaryLargeImage to indicate
// that a large image summary is preferred.
if l == 1 {
o.TwitterSummaryLargeImage = *a.URL
o.TwitterImageAlt = desc
}
case "audio":
ogMedia.OGType = "audio"
case "video", "gifv":
ogMedia.OGType = "video"
ogMedia.Width = strconv.Itoa(a.Meta.Original.Width)
ogMedia.Height = strconv.Itoa(a.Meta.Original.Height)
}
// Add this to our gathered entries.
ogMedias = append(ogMedias, ogMedia)
if a.Type != "image" {
// Add static/thumbnail
// for non-images.
ogMedias = append(
ogMedias,
OGMedia{
OGType: "image",
URL: *a.PreviewURL,
MIMEType: a.PreviewMIMEType,
Width: strconv.Itoa(a.Meta.Small.Width),
Height: strconv.Itoa(a.Meta.Small.Height),
Alt: util.PtrOrZero(a.Description),
},
)
}
// Prepend gathered entries.
//
// This will cause the full-size
// entry to appear before its
// thumbnail entry (if set).
o.prependMedia(ogMedias...)
// Done!
break
}
}
o.ArticlePublisher = status.Account.URL
o.ArticleAuthor = status.Account.URL
o.ArticlePublishedTime = status.CreatedAt
o.ArticleModifiedTime = util.PtrOrValue(status.EditedAt, status.CreatedAt)
return o
}
// AccountTitle parses a page title from account and accountDomain
func AccountTitle(account *apimodel.WebAccount, 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 the content of a `content="..."` attribute.
func ParseDescription(in string) string {
i := text.StripHTMLFromText(in)
i = strings.ReplaceAll(i, "\n", " ")
i = strings.Join(strings.Fields(i), " ")
i = html.EscapeString(i)
i = strings.ReplaceAll(i, `\`, "&bsol;")
return truncate(i)
}
// truncate trims string
// to maximum 160 runes.
func truncate(s string) string {
const truncateLen = 160
r := []rune(s)
if len(r) < truncateLen {
// No need
// to trim.
return s
}
return string(r[:truncateLen-3]) + "…"
}