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
zio/stable
bnewbold 2023-05-11 08:41:47 -07:00 committed by GitHub
parent 19d6ded631
commit d624b7cf58
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 74 additions and 36 deletions

View File

@ -185,7 +185,13 @@ func (srv *Server) WebPost(c echo.Context) error {
if err != nil { if err != nil {
log.Warnf("failed to fetch post: %s\t%v", uri, err) log.Warnf("failed to fetch post: %s\t%v", uri, err)
} else { } 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 { if err != nil {
log.Warnf("failed to fetch handle: %s\t%v", handle, err) log.Warnf("failed to fetch handle: %s\t%v", handle, err)
} else { } else {
req := c.Request()
data["profileView"] = pv data["profileView"] = pv
data["requestURI"] = fmt.Sprintf("https://%s%s", req.Host, req.URL.Path)
} }
} }

View File

@ -3,14 +3,12 @@
{% block head_title %}Bluesky{% endblock %} {% block head_title %}Bluesky{% endblock %}
{% block html_head_extra -%} {% 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:title" content="Bluesky Social"/>
<meta property="og:description" content="See what's next."/> <meta property="og:description" content="See what's next."/>
<meta property="og:type" content="article"/> <meta property="og:image" content="/static/social-card-default.png"/>
<meta property="og:image" content="/static/default-social-card.png"/> <meta name="twitter:card" content="summary"/>
<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 name="twitter:site" content="@bluesky"/> <meta name="twitter:site" content="@bluesky"/>
{%- endblock %} {%- endblock %}

View File

@ -1,23 +1,39 @@
{% extends "base.html" %} {% extends "base.html" %}
{# TODO: link rel=canonical #} {% block head_title %}
{# TODO: "same as" #} {%- if postView -%}
@{{ postView.Author.Handle }} on Bluesky
{%- else -%}
Bluesky
{%- endif -%}
{% endblock %}
{% block html_head_extra -%} {% block html_head_extra -%}
{%- if postView %} {%- if postView -%}
<meta property="og:type" content="article"/> <meta property="og:type" content="website">
<meta name="twitter:card" content="summary"/> <meta property="og:site_name" content="Bluesky Social">
<meta property="og:title" content="{{ postView.Author.Handle }} - Bluesky"/> {%- if requestURI %}
<meta name="twitter:title" content="{{ postView.Author.Handle }} - Bluesky"/> <meta property="og:url" content="{{ requestURI }}">
{%- if postView.Author.Avatar %}
<meta property="og:image" content="{{ postView.Author.Avatar }}"/>
<meta name="twitter:image" content="{{ postView.Author.Avatar }}"/>
{% endif -%} {% endif -%}
{%- if postView.Record.Text %} {%- if postView.Author.DisplayName %}
<meta property="og:description" content="{{ postView.Record.Text }}"/> <meta property="og:title" content="{{ postView.Author.DisplayName }} (@{{ postView.Author.Handle }})">
<meta name="twitter:description" content="{{ postView.Record.Text }}"/> {% else %}
<meta property="og:title" content="@{{ postView.Author.Handle }}">
{% endif -%} {% endif -%}
<meta name="twitter:label1" content="Author DID"> {%- if postView.Record.Val.Text %}
<meta name="twitter:value1" content="{{ postView.Author.Did }}"> <meta name="description" content="{{ postView.Record.Val.Text }}">
<meta property="og:description" content="{{ postView.Record.Val.Text }}">
{% endif -%}
{%- 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 -%} {% endif -%}
{%- endblock %} {%- endblock %}

View File

@ -1,24 +1,40 @@
{% extends "base.html" %} {% extends "base.html" %}
{# TODO: "same as" indication with DID? #} {% block head_title %}
{# TODO: could work in profileView.DisplayName here, conditionally? #} {%- if profileView -%}
@{{ profileView.Handle }} on Bluesky
{%- else -%}
Bluesky
{%- endif -%}
{% endblock %}
{% block html_head_extra -%} {% block html_head_extra -%}
{%- if profileView -%} {%- if profileView -%}
<meta property="og:type" content="article"/> <meta property="og:type" content="website">
<meta name="twitter:card" content="summary"/> <meta property="og:site_name" content="Bluesky Social">
<meta property="og:title" content="{{ profileView.Handle }} - Bluesky"/> {%- if requestURI %}
<meta name="twitter:title" content="{{ profileView.Handle}} - Bluesky"/> <meta property="og:url" content="{{ requestURI }}">
{% endif -%}
{%- if profileView.DisplayName %}
<meta property="og:title" content="{{ profileView.DisplayName }} (@{{ profileView.Handle }})">
{% else %}
<meta property="og:title" content="{{ profileView.Handle }}">
{% endif -%}
{%- if profileView.Description %} {%- if profileView.Description %}
<meta property="og:description" content="{{ profileView.Description }}"/> <meta name="description" content="{{ profileView.Description }}">
<meta name="twitter:description" content="{{ profileView.Description }}"/> <meta property="og:description" content="{{ profileView.Description }}">
{% endif -%} {% endif -%}
{%- if profileView.Avatar %} {%- if profileView.Banner %}
<meta property="og:image" content="{{ profileView.Avatar }}"/> <meta property="og:image" content="{{ profileView.Banner }}">
<meta name="twitter:image" content="{{ profileView.Avatar }}"/> <meta name="twitter:card" content="summary_large_image">
{% endif -%} {%- elif profileView.Avatar -%}
<meta name="twitter:label1" content="Author DID"> {# 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 }}"> <meta name="twitter:value1" content="{{ profileView.Did }}">
{%- endif -%} <meta name="twitter:site" content="@bluesky">
{% endif -%}
{%- endblock %} {%- endblock %}
{% block noscript_extra -%} {% block noscript_extra -%}