appview/pages: improved seo tags for home, repo and profile #1061

+67 -11

4 changed files

Diff round #0

expand all

unified split

appview

pages

templates

layouts

base.html

profilebase.html

repo

fragments

og.html

timeline

home.html

+15 -2

appview/pages/templates/layouts/base.html

··· 4 <head> 5 <meta charset="UTF-8" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 7 - <meta name="description" content="Social coding, but for real this time!"/> 8 <meta name="htmx-config" content='{"includeIndicatorStyles": false}'> 9 10 <script defer src="/static/htmx.min.js"></script> 11 <script defer src="/static/htmx-ext-ws.min.js"></script> 12 <script defer src="/static/actor-typeahead.js" type="module"></script> ··· 26 <link rel="preload" href="/static/fonts/InterVariable.woff2" as="font" type="font/woff2" crossorigin /> 27 28 <link rel="stylesheet" href="/static/tw.css?{{ cssContentHash }}" type="text/css" /> 29 - <title>{{ block "title" . }}{{ end }} · tangled</title> 30 {{ block "extrameta" . }}{{ end }} 31 </head> 32 <body class="min-h-screen flex flex-col gap-4 bg-slate-100 dark:bg-gray-900 dark:text-white transition-colors duration-200">

··· 4 <head> 5 <meta charset="UTF-8" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 7 + <meta name="description" content="The next-generation social coding platform."/> 8 <meta name="htmx-config" content='{"includeIndicatorStyles": false}'> 9 10 +  11 + <meta property="og:site_name" content="Tangled" /> 12 + <meta property="og:type" content="website" /> 13 + <meta property="og:locale" content="en_US" /> 14 + 15 + 16 +  17 + <meta name="keywords" content="git, code collaboration, AT Protocol, open source, version control, social coding, code hosting" /> 18 + 19 +  20 + <meta name="author" content="Tangled" /> 21 + <meta name="robots" content="index, follow" /> 22 + 23 <script defer src="/static/htmx.min.js"></script> 24 <script defer src="/static/htmx-ext-ws.min.js"></script> 25 <script defer src="/static/actor-typeahead.js" type="module"></script> ··· 39 <link rel="preload" href="/static/fonts/InterVariable.woff2" as="font" type="font/woff2" crossorigin /> 40 41 <link rel="stylesheet" href="/static/tw.css?{{ cssContentHash }}" type="text/css" /> 42 + <title>{{ block "title" . }}{{ end }}</title> 43 {{ block "extrameta" . }}{{ end }} 44 </head> 45 <body class="min-h-screen flex flex-col gap-4 bg-slate-100 dark:bg-gray-900 dark:text-white transition-colors duration-200">

+16 -4

appview/pages/templates/layouts/profilebase.html

··· 3 {{ define "extrameta" }} 4 {{ $handle := resolve .Card.UserDid }} 5 {{ $avatarUrl := profileAvatarUrl .Card.Profile "" }} 6 <meta property="og:title" content="{{ $handle }}" /> 7 <meta property="og:type" content="profile" /> 8 - <meta property="og:url" content="https://tangled.org/{{ $handle }}?tab={{ .Active }}" /> 9 - <meta property="og:description" content="{{ or .Card.Profile.Description $handle }}" /> 10 <meta property="og:image" content="{{ $avatarUrl }}" /> 11 <meta property="og:image:width" content="512" /> 12 <meta property="og:image:height" content="512" /> 13 - 14 <meta name="twitter:card" content="summary" /> 15 <meta name="twitter:title" content="{{ $handle }}" /> 16 - <meta name="twitter:description" content="{{ or .Card.Profile.Description $handle }}" /> 17 <meta name="twitter:image" content="{{ $avatarUrl }}" /> 18 {{ end }} 19 20 {{ define "content" }}

··· 3 {{ define "extrameta" }} 4 {{ $handle := resolve .Card.UserDid }} 5 {{ $avatarUrl := profileAvatarUrl .Card.Profile "" }} 6 + {{ $description := or .Card.Profile.Description (printf "%s on Tangled" $handle) }} 7 + {{ $url := printf "https://tangled.org/%s" $handle }} 8 + 9 +  10 <meta property="og:title" content="{{ $handle }}" /> 11 <meta property="og:type" content="profile" /> 12 + <meta property="og:url" content="{{ $url }}" /> 13 + <meta property="og:description" content="{{ $description }}" /> 14 <meta property="og:image" content="{{ $avatarUrl }}" /> 15 <meta property="og:image:width" content="512" /> 16 <meta property="og:image:height" content="512" /> 17 + <meta property="og:image:alt" content="{{ $handle }}'s avatar" /> 18 + <meta property="profile:username" content="{{ $handle }}" /> 19 + 20 +  21 <meta name="twitter:card" content="summary" /> 22 <meta name="twitter:title" content="{{ $handle }}" /> 23 + <meta name="twitter:description" content="{{ $description }}" /> 24 <meta name="twitter:image" content="{{ $avatarUrl }}" /> 25 + <meta name="twitter:image:alt" content="{{ $handle }}'s avatar" /> 26 + 27 +  28 + <meta name="description" content="{{ $description }}" /> 29 + <link rel="canonical" href="{{ $url }}" /> 30 {{ end }} 31 32 {{ define "content" }}

+17 -2

appview/pages/templates/repo/fragments/og.html

··· 1 {{ define "repo/fragments/og" }} 2 {{ $title := or .Title .RepoInfo.FullName }} 3 - {{ $description := or .Description .RepoInfo.Description }} 4 {{ $url := or .Url (printf "https://tangled.org/%s" .RepoInfo.FullName) }} 5 {{ $imageUrl := printf "https://tangled.org/%s/opengraph" .RepoInfo.FullName }} 6 7 <meta property="og:title" content="{{ unescapeHtml $title }}" /> 8 - <meta property="og:type" content="object" /> 9 <meta property="og:url" content="{{ $url }}" /> 10 <meta property="og:description" content="{{ $description }}" /> 11 <meta property="og:image" content="{{ $imageUrl }}" /> 12 <meta property="og:image:width" content="1200" /> 13 <meta property="og:image:height" content="600" /> 14 15 <meta name="twitter:card" content="summary_large_image" /> 16 <meta name="twitter:title" content="{{ unescapeHtml $title }}" /> 17 <meta name="twitter:description" content="{{ $description }}" /> 18 <meta name="twitter:image" content="{{ $imageUrl }}" /> 19 {{ end }}

··· 1 {{ define "repo/fragments/og" }} 2 {{ $title := or .Title .RepoInfo.FullName }} 3 + {{ $description := or .Description .RepoInfo.Description "A repository on Tangled" }} 4 {{ $url := or .Url (printf "https://tangled.org/%s" .RepoInfo.FullName) }} 5 {{ $imageUrl := printf "https://tangled.org/%s/opengraph" .RepoInfo.FullName }} 6 + {{ $ownerHandle := resolve .RepoInfo.OwnerDid }} 7 8 +  9 <meta property="og:title" content="{{ unescapeHtml $title }}" /> 10 + <meta property="og:type" content="article" /> 11 <meta property="og:url" content="{{ $url }}" /> 12 <meta property="og:description" content="{{ $description }}" /> 13 <meta property="og:image" content="{{ $imageUrl }}" /> 14 <meta property="og:image:width" content="1200" /> 15 <meta property="og:image:height" content="600" /> 16 + <meta property="og:image:alt" content="{{ unescapeHtml $title }}" /> 17 + <meta property="article:author" content="{{ $ownerHandle }}" /> 18 + {{ if .RepoInfo.Topics }} 19 + {{ range .RepoInfo.Topics }} 20 + <meta property="article:tag" content="{{ . }}" /> 21 + {{ end }} 22 + {{ end }} 23 24 +  25 <meta name="twitter:card" content="summary_large_image" /> 26 <meta name="twitter:title" content="{{ unescapeHtml $title }}" /> 27 <meta name="twitter:description" content="{{ $description }}" /> 28 <meta name="twitter:image" content="{{ $imageUrl }}" /> 29 + <meta name="twitter:image:alt" content="{{ unescapeHtml $title }}" /> 30 + 31 +  32 + <meta name="description" content="{{ $description }}" /> 33 + <link rel="canonical" href="{{ $url }}" /> 34 {{ end }}

+19 -3

appview/pages/templates/timeline/home.html

··· 1 {{ define "title" }}tangled · tightly-knit social coding{{ end }} 2 3 {{ define "extrameta" }} 4 - <meta property="og:title" content="timeline · tangled" /> 5 - <meta property="og:type" content="object" /> 6 <meta property="og:url" content="https://tangled.org" /> 7 - <meta property="og:description" content="tightly-knit social coding" /> 8 {{ end }} 9 10

··· 1 {{ define "title" }}tangled · tightly-knit social coding{{ end }} 2 3 {{ define "extrameta" }} 4 +  5 + <meta property="og:title" content="tangled" /> 6 + <meta property="og:type" content="website" /> 7 <meta property="og:url" content="https://tangled.org" /> 8 + <meta property="og:description" content="The next-generation social coding platform." /> 9 + <meta property="og:image" content="https://assets.tangled.network/what-is-tangled-repo.png" /> 10 + <meta property="og:image:width" content="1200" /> 11 + <meta property="og:image:height" content="630" /> 12 + 13 +  14 + <meta name="twitter:card" content="summary_large_image" /> 15 + <meta name="twitter:title" content="Tangled" /> 16 + <meta name="twitter:description" content="The next-generation social coding platform." /> 17 + <meta name="twitter:image" content="https://assets.tangled.network/what-is-tangled-repo.png" /> 18 + 19 +  20 + <meta name="description" content="The next-generation social coding platform. Host repos on your infrastructure with knots, use stacked pull requests, and run CI with spindles." /> 21 + <link rel="canonical" href="https://tangled.org" /> 22 + 23 + 24 {{ end }} 25 26