Improve opengraph previews (#26851)

Add more useful Open Graph metadata for commit and file URLs:

- Set `og:title` to the page title, which is a concise summary in both
cases (`<commit message> · <commit hash>` and `<filename> at <branch>`,
respectively)
- Set `og:description` to the commit message body, if available
- Set `og:url` to the relevant URLs instead of the repo URL

Also move the relevant meta tags into a separate template as they now
take up the majority of the base head template.
This commit is contained in:
Linus Groh 2023-09-01 18:59:24 +02:00 committed by GitHub
parent 9881b8a4e2
commit 5743d7cb5b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 43 additions and 36 deletions

View file

@ -25,42 +25,7 @@
.ui.secondary.menu .dropdown.item > .menu { margin-top: 0; } .ui.secondary.menu .dropdown.item > .menu { margin-top: 0; }
</style> </style>
</noscript> </noscript>
{{if .PageIsUserProfile}} {{template "base/head_opengraph" .}}
<meta property="og:title" content="{{.ContextUser.DisplayName}}">
<meta property="og:type" content="profile">
<meta property="og:image" content="{{.ContextUser.AvatarLink ctx}}">
<meta property="og:url" content="{{.ContextUser.HTMLURL}}">
{{if .ContextUser.Description}}
<meta property="og:description" content="{{.ContextUser.Description}}">
{{end}}
{{else if .Repository}}
{{if .Issue}}
<meta property="og:title" content="{{.Issue.Title}}">
<meta property="og:url" content="{{.Issue.HTMLURL}}">
{{if .Issue.Content}}
<meta property="og:description" content="{{.Issue.Content}}">
{{end}}
{{else}}
<meta property="og:title" content="{{.Repository.Name}}">
<meta property="og:url" content="{{.Repository.HTMLURL}}">
{{if .Repository.Description}}
<meta property="og:description" content="{{.Repository.Description}}">
{{end}}
{{end}}
<meta property="og:type" content="object">
{{if (.Repository.AvatarLink ctx)}}
<meta property="og:image" content="{{.Repository.AvatarLink ctx}}">
{{else}}
<meta property="og:image" content="{{.Repository.Owner.AvatarLink ctx}}">
{{end}}
{{else}}
<meta property="og:title" content="{{AppName}}">
<meta property="og:type" content="website">
<meta property="og:image" content="{{AssetUrlPrefix}}/img/logo.png">
<meta property="og:url" content="{{AppUrl}}">
<meta property="og:description" content="{{MetaDescription}}">
{{end}}
<meta property="og:site_name" content="{{AppName}}">
{{template "base/head_style" .}} {{template "base/head_style" .}}
{{template "custom/header" .}} {{template "custom/header" .}}
</head> </head>

View file

@ -0,0 +1,42 @@
{{if .PageIsUserProfile}}
<meta property="og:title" content="{{.ContextUser.DisplayName}}">
<meta property="og:type" content="profile">
<meta property="og:image" content="{{.ContextUser.AvatarLink ctx}}">
<meta property="og:url" content="{{.ContextUser.HTMLURL}}">
{{if .ContextUser.Description}}
<meta property="og:description" content="{{.ContextUser.Description}}">
{{end}}
{{else if .Repository}}
{{if .Issue}}
<meta property="og:title" content="{{.Issue.Title}}">
<meta property="og:url" content="{{.Issue.HTMLURL}}">
{{if .Issue.Content}}
<meta property="og:description" content="{{.Issue.Content}}">
{{end}}
{{else if or .PageIsDiff .IsViewFile}}
<meta property="og:title" content="{{.Title}}">
<meta property="og:url" content="{{AppUrl}}{{.Link}}">
{{if and .PageIsDiff (IsMultilineCommitMessage .Commit.Message)}}
<meta property="og:description" content="{{RenderCommitBody $.Context .Commit.Message $.RepoLink $.Repository.ComposeMetas}}">
{{end}}
{{else}}
<meta property="og:title" content="{{.Repository.Name}}">
<meta property="og:url" content="{{.Repository.HTMLURL}}">
{{if .Repository.Description}}
<meta property="og:description" content="{{.Repository.Description}}">
{{end}}
{{end}}
<meta property="og:type" content="object">
{{if (.Repository.AvatarLink ctx)}}
<meta property="og:image" content="{{.Repository.AvatarLink ctx}}">
{{else}}
<meta property="og:image" content="{{.Repository.Owner.AvatarLink ctx}}">
{{end}}
{{else}}
<meta property="og:title" content="{{AppName}}">
<meta property="og:type" content="website">
<meta property="og:image" content="{{AssetUrlPrefix}}/img/logo.png">
<meta property="og:url" content="{{AppUrl}}">
<meta property="og:description" content="{{MetaDescription}}">
{{end}}
<meta property="og:site_name" content="{{AppName}}">