robby1066 / keepposted-help

Documentation, Issue Tracker, and Repository of Knowledge For Keep Posted (www.keepposted.io) — A way to keep teams informed and connected without disrupting their focus.

https://www.keepposted.io

1 stars 0 forks source link

Message preview pages have incorrect open graph tags #38

Closed robby1066 closed 3 years ago

robby1066 commented 3 years ago

Describe the bug

The preview page (which can be shared ahead of the message being finalized) uses the same layout as the message display, including the open graph tags in the header. There is a lot of specific language in those tags that implies the message is complete. This can be confusing to people who are getting the link shared in any system that unfurls and shows a rich preview (Slack, Signal, or Teams, for example)

Steps To Reproduce

Go to a message detail page (currently only exposed for roundtable messages, which haven't been officially released as of 2/20)
View source (or paste the link into Slack)
Observe the Open graph tags

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

Additional context

Aside from clearing up confusion, there is an opportunity to use the open graph info to clarify the purpose of the preview page, which may be people's first experience with Keep Posted.

robby1066 commented 3 years ago

As a first step I just removed the open graph tags from the message preview (they were throwing an exception under certain circumstances, so removing them was just a way to fix that)

It feels more correct to provide alternative open graph tags to provide a preview of what people can expect when clicking the link.

One off-the-cuff possibility:

og:title: "creator.first_name wants to hear from the team"
og:url: message.preview_url
og:image: Not sure what (if anything) would be useful here? We may or may not have a title image generated, and it may or may not include confusing information, like someone else's name.
og:type: "website"
og:description: message.subject (e.g. "What are you working on today?")

robby1066 commented 3 years ago

After some testing, it seems like it's worth it to include something for the og:image tag. Otherwise some places dig up an image from elsewhere in the source, leading to some unpredictable previews.

Probably best in this case to create a generic placeholder image for the message type that can be used.

robby1066 commented 3 years ago

Added a placeholder that feels appropriate for in-progress messages.

Open Graph Info