bskyweb: iterate on HTML card metadata (#609)

Probably still not perfect, but better.

- don't user avatar image. use banner for profile and post img, or
  nothing
- most twitter metadata fields were redundant; twitter will parse out
  opengraph ("og:"), so don't duplicate those
- add regular HTML description (for google, etc)
- include URI
- actually include text

4 files changed, 74 insertions, 36 deletions

diff --git a/bskyweb/cmd/bskyweb/server.go b/bskyweb/cmd/bskyweb/server.go
index 5ba1dbc80..902d1ffc1 100644
--- a/bskyweb/cmd/bskyweb/server.go
+++ b/bskyweb/cmd/bskyweb/server.go
@@ -185,7 +185,13 @@ func (srv *Server) WebPost(c echo.Context) error {
 			if err != nil {
 				log.Warnf("failed to fetch post: %s\t%v", uri, err)
 			} else {
-				data["postView"] = tpv.Thread.FeedDefs_ThreadViewPost.Post
+				req := c.Request()
+				postView := tpv.Thread.FeedDefs_ThreadViewPost.Post
+				data["postView"] = postView
+				data["requestURI"] = fmt.Sprintf("https://%s%s", req.Host, req.URL.Path)
+				if postView.Embed != nil && postView.Embed.EmbedImages_View != nil {
+					data["imgThumbUrl"] = postView.Embed.EmbedImages_View.Images[0].Thumb
+				}
 			}
 		}
 
@@ -203,7 +209,9 @@ func (srv *Server) WebProfile(c echo.Context) error {
 		if err != nil {
 			log.Warnf("failed to fetch handle: %s\t%v", handle, err)
 		} else {
+			req := c.Request()
 			data["profileView"] = pv
+			data["requestURI"] = fmt.Sprintf("https://%s%s", req.Host, req.URL.Path)
 		}
 	}
 
diff --git a/bskyweb/templates/home.html b/bskyweb/templates/home.html
index 6625a7d96..0677b9157 100644
--- a/bskyweb/templates/home.html
+++ b/bskyweb/templates/home.html
@@ -3,14 +3,12 @@
 {% block head_title %}Bluesky{% endblock %}
 
 {% block html_head_extra -%}
+  <meta name="description" content="See what's next."/>
+  <meta property="og:type" content="website"/>
   <meta property="og:title" content="Bluesky Social"/>
   <meta property="og:description" content="See what's next."/>
-  <meta property="og:type" content="article"/>
-  <meta property="og:image" content="/static/default-social-card.png"/>
-  <meta name="twitter:title" content="Bluesky Social"/>
-  <meta name="twitter:description" content="See what&#x27;s next."/>
-  <meta name="twitter:image" content="/static/default-social-card.png"/>
-  <meta name="twitter:card" content="summary_large_image"/>
+  <meta property="og:image" content="/static/social-card-default.png"/>
+  <meta name="twitter:card" content="summary"/>
   <meta name="twitter:site" content="@bluesky"/>
 {%- endblock %}
 
diff --git a/bskyweb/templates/post.html b/bskyweb/templates/post.html
index 866a97396..05d62a1c8 100644
--- a/bskyweb/templates/post.html
+++ b/bskyweb/templates/post.html
@@ -1,23 +1,39 @@
 {% extends "base.html" %}
 
-{# TODO: link rel=canonical #}
-{# TODO: "same as" #}
+{% block head_title %}
+{%- if postView -%}
+  @{{ postView.Author.Handle }} on Bluesky
+{%- else -%}
+  Bluesky
+{%- endif -%}
+{% endblock %}
+
 {% block html_head_extra -%}
-{%- if postView %}
-  <meta property="og:type" content="article"/>
-  <meta name="twitter:card" content="summary"/>
-  <meta property="og:title" content="{{ postView.Author.Handle }} - Bluesky"/>
-  <meta name="twitter:title" content="{{ postView.Author.Handle }} - Bluesky"/>
-  {%- if postView.Author.Avatar %}
-  <meta property="og:image" content="{{ postView.Author.Avatar }}"/>
-  <meta name="twitter:image" content="{{ postView.Author.Avatar }}"/>
+{%- if postView -%}
+  <meta property="og:type" content="website">
+  <meta property="og:site_name" content="Bluesky Social">
+  {%- if requestURI %}
+  <meta property="og:url" content="{{ requestURI }}">
+  {% endif -%}
+  {%- if postView.Author.DisplayName %}
+  <meta property="og:title" content="{{ postView.Author.DisplayName }} (@{{ postView.Author.Handle }})">
+  {% else %}
+  <meta property="og:title" content="@{{ postView.Author.Handle }}">
   {% endif -%}
-  {%- if postView.Record.Text %}
-  <meta property="og:description" content="{{ postView.Record.Text }}"/>
-  <meta name="twitter:description" content="{{ postView.Record.Text }}"/>
+  {%- if postView.Record.Val.Text %}
+  <meta name="description" content="{{ postView.Record.Val.Text }}">
+  <meta property="og:description" content="{{ postView.Record.Val.Text }}">
   {% endif -%}
-  <meta name="twitter:label1" content="Author DID">
-  <meta name="twitter:value1" content="{{ postView.Author.Did }}">
+  {%- if imgThumbUrl %}
+  <meta property="og:image" content="{{ imgThumbUrl }}">
+  <meta name="twitter:card" content="summary_large_image">
+  {%- elif postView.Author.Avatar %}
+  {# Don't use avatar image in cards; usually looks bad #}
+  <meta name="twitter:card" content="summary">
+  {% endif %}
+  <meta name="twitter:label1" content="Posted At">
+  <meta name="twitter:value1" content="{{ postView.CreatedAt }}">
+  <meta name="twitter:site" content="@bluesky">
 {% endif -%}
 {%- endblock %}
 
diff --git a/bskyweb/templates/profile.html b/bskyweb/templates/profile.html
index 0710d3280..4d4f67946 100644
--- a/bskyweb/templates/profile.html
+++ b/bskyweb/templates/profile.html
@@ -1,24 +1,40 @@
 {% extends "base.html" %}
 
-{# TODO: "same as" indication with DID? #}
-{# TODO: could work in profileView.DisplayName here, conditionally? #}
+{% block head_title %}
+{%- if profileView -%}
+  @{{ profileView.Handle }} on Bluesky
+{%- else -%}
+  Bluesky
+{%- endif -%}
+{% endblock %}
+
 {% block html_head_extra -%}
 {%- if profileView -%}
-  <meta property="og:type" content="article"/>
-  <meta name="twitter:card" content="summary"/>
-  <meta property="og:title" content="{{ profileView.Handle }} - Bluesky"/>
-  <meta name="twitter:title" content="{{ profileView.Handle}} - Bluesky"/>
-  {%- if profileView.Description %}
-  <meta property="og:description" content="{{ profileView.Description }}"/>
-  <meta name="twitter:description" content="{{ profileView.Description }}"/>
+  <meta property="og:type" content="website">
+  <meta property="og:site_name" content="Bluesky Social">
+  {%- if requestURI %}
+  <meta property="og:url" content="{{ requestURI }}">
   {% endif -%}
-  {%- if profileView.Avatar %}
-  <meta property="og:image" content="{{ profileView.Avatar }}"/>
-  <meta name="twitter:image" content="{{ profileView.Avatar }}"/>
+  {%- if profileView.DisplayName %}
+  <meta property="og:title" content="{{ profileView.DisplayName }} (@{{ profileView.Handle }})">
+  {% else %}
+  <meta property="og:title" content="{{ profileView.Handle }}">
   {% endif -%}
-  <meta name="twitter:label1" content="Author DID">
+  {%- if profileView.Description %}
+  <meta name="description" content="{{ profileView.Description }}">
+  <meta property="og:description" content="{{ profileView.Description }}">
+  {% endif -%}
+  {%- if profileView.Banner %}
+  <meta property="og:image" content="{{ profileView.Banner }}">
+  <meta name="twitter:card" content="summary_large_image">
+  {%- elif profileView.Avatar -%}
+  {# Don't use avatar image in cards; usually looks bad #}
+  <meta name="twitter:card" content="summary">
+  {% endif %}
+  <meta name="twitter:label1" content="Account DID">
   <meta name="twitter:value1" content="{{ profileView.Did }}">
-{%- endif -%}
+  <meta name="twitter:site" content="@bluesky">
+{% endif -%}
 {%- endblock %}
 
 {% block noscript_extra -%}