[landing] Add thumbnail and description for landing page when shared
ClosedPublic
Actions

Authored by • abosh on May 2 2022, 7:29 AM.

Details

Reviewers

atul
ashoat

Commits

rCOMM36d9c7660b67: [landing] Add thumbnail and description for landing page when shared

Summary

Add image thumbnail and website description (from Twitter bio) for the landing page so it appears in Twitter Cards/Facebook messages/posts when shared.

Related Linear issues with full context: ENG-1066.

Test Plan

N/A, as of now. There is no staging environment with a public URL so not sure how to test these changes yet. This is tracked by ENG-889 (FB called this "Sandcastle").

Once there is, though:

The Twitter Card Validator tests how URLs look on Twitter Cards when Tweeted.
Facebook has its own Markup Tester to see how URLs look on Facebook posts when shared. I'm not sure if this works for Messenger as well, but that can be tested by sending a message to someone.

Diff Detail

Repository

rCOMM Comm

Branch

master

Lint

No Lint Coverage

Unit

No Test Coverage

Event Timeline

• abosh created this revision.May 2 2022, 7:29 AM

Herald added subscribers: • karol, • adrian, tomek, ashoat. · View Herald TranscriptMay 2 2022, 7:29 AM

• abosh edited the summary of this revision. (Show Details)May 2 2022, 7:31 AM

• abosh edited the test plan for this revision. (Show Details)May 2 2022, 7:37 AM

• abosh added inline comments.May 2 2022, 7:43 AM

keyserver/src/responders/landing-handler.js
115–121	What is the rationale for these `meta` tags? Why are some of them Open Graph Markup and others Twitter? The Twitter Cards Tag Markup Reference describes the relationship between Open Graph Markup and Twitter Cards. For certain Twitter tags, if there exists an Open Graph Markup fallback, Twitter will just look for the Open Graph Markup tag and use that to build a preview instead. Documented here: When the Twitter card processor looks for tags on a page, it first checks for the Twitter-specific property, and if not present, falls back to the supported Open Graph property. This allows for both to be defined on the page independently, and minimizes the amount of duplicate markup required to describe content and experience. The only Twitter tags that do not have Open Graph fallbacks are `twitter:card` and `twitter:site`, so those are included. The rest are Open Graph (`og`) tags.

Harbormaster completed remote builds in B8711: Diff 12132.May 2 2022, 7:45 AM

• abosh requested review of this revision.May 2 2022, 7:45 AM

Facebook called this "Sandcastle."

I think this is a different thing. From what I understand, this diff is about link previews (relevant to messaging apps/twitter/etc.)

IIRC Sandcastle is about deploy previews (https://www.latonyadesign.com/gallery/fb-sandcastle). eg you put a diff up and the reviewer is provided with a link to some sort of staging environment/deploy preview.

yeah, you're right. I saw it in the Linear issue and wanted to add it to bridge the contexts between the two issues, since we need to add a staging environment with a deploy preview to test this diff. Just edited the Test Plan to accurately describe what in this issue is related to Sandcastle.

atul accepted this revision.May 2 2022, 8:15 AM

atul added a subscriber: • benschac.

atul added inline comments.

keyserver/src/responders/landing-handler.js
118	Do we want a low-res icon here? I'd think we'd want some sort of higher-res landscape "card" graphic. Eg the one shared in https://linear.app/comm/issue/ENG-1066/add-image-thumbnailwebsite-description-for-landing-page-when-shared" edit: disregard, read through the provided link to understand distinction between "Summary Card"s and "Summary with large image" cards
119	I don't know anything about accessibility, but wonder if "Comm logo" would make more sense for the alt text? cc @benschac