lewis.moe
Monorepo for Tangled
appview/pages: improved seo tags for home, repo and profile
Signed-off-by: Anirudh Oppiliappan <anirudh@tangled.org>
authored by
Anirudh Oppiliappan
and committed by
+15
-2
appview/pages/templates/layouts/base.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>
···
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
+
<!-- Open Graph defaults -->
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
+
<!-- Keywords -->
17
+
<meta name="keywords" content="git, code collaboration, AT Protocol, open source, version control, social coding, code hosting" />
18
+
19
+
<!-- Author and copyright -->
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>
···
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
+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
+
<!-- Open Graph Meta Tags -->
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
+
<!-- Twitter Card Meta Tags -->
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
+
<!-- Additional SEO -->
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
+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
+
<!-- Open Graph Meta Tags -->
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
+
<!-- Twitter Card Meta Tags -->
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
+
<!-- Additional SEO -->
32
+
<meta name="description" content="{{ $description }}" />
33
+
<link rel="canonical" href="{{ $url }}" />
34
{{ end }}
+19
-3
appview/pages/templates/timeline/home.html
+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
+
<!-- Open Graph Meta Tags -->
5
+
<meta property="og:title" content="tangled · tightly-knit social coding" />
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
+
<!-- Twitter Card Meta Tags -->
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/tangled_og.png" />
18
+
19
+
<!-- Additional SEO -->
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