add social media preview

[r10s]

html should contain the typical social media tags that are used to created "cards", cmp, https://github.com/deltachat/deltachat-pages/pull/388

as javascript is not envolved in card creation and our server does not know detail about the invitation, the preview should stay pretty neutral, the text should fit for contact- and for group-invites (we can use whatsapp/signal/telegram as inspiration, they are neutral as well)

[rosano]

I guess this would be something to add when there's fallback functionality on the page without invite information, which we could discuss in #10

[r10s]

you're right, we should at least consider that the social media preview should match the fallback somehow.

in practise, not sure how relevant that is and if ppl sent around the url without paramters in social media.

@rosano iirc, you did some tests about the social media preview of whatsapp/signal/others - can you maybe post them here so we can use them as a baseline for our wording?

[rosano]

Signal

Property	Value
title	Contact on Signal
description
og:url	https://signal.me/
og:type	website
og:title	Signal Messenger Contact
og:image	https://signal.me/assets/og/og-image-ff2096df535eee499356de64b19fa8cebb9681ab1e78cca7330e7f8b8d5ec6d5.png
og:description	Follow this link to message on Signal.
og:site_name
twitter:card
twitter:site

Telegram

Property	Value
title	Telegram: Contact
description
og:url
og:type
og:title	Join group chat on Telegram
og:image	https://telegram.org/img/t\_logo.png
og:description
og:site_name	Telegram
twitter:card	summary
twitter:site	@Telegram

WhatsApp

needed to use a different site for this…

  <!-- HTML Meta Tags -->
  <title>Share on WhatsApp</title>
  <meta name="description" content="WhatsApp Messenger: More than 2 billion people
          in over 180 countries use WhatsApp to stay in touch with friends and
          family, anytime and anywhere. WhatsApp is free and offers simple, secure,
          reliable messaging and calling, available on phones all over the world.">

  <!-- Facebook Meta Tags -->
  <meta property="og:url" content="https://api.whatsapp.com/send?phone=1234567890">
  <meta property="og:type" content="website">
  <meta property="og:title" content="Share on WhatsApp">
  <meta property="og:description" content="WhatsApp Messenger: More than 2 billion people
          in over 180 countries use WhatsApp to stay in touch with friends and
          family, anytime and anywhere. WhatsApp is free and offers simple, secure,
          reliable messaging and calling, available on phones all over the world.">
  <meta property="og:image" content="https://static.whatsapp.net/rsrc.php/v3/yR/r/y8-PTBaP90a.png">

  <!-- Twitter Meta Tags -->
  <meta name="twitter:card" content="summary_large_image">
  <meta property="twitter:domain" content="api.whatsapp.com">
  <meta property="twitter:url" content="https://api.whatsapp.com/send?phone=1234567890">
  <meta name="twitter:title" content="Share on WhatsApp">
  <meta name="twitter:description" content="WhatsApp Messenger: More than 2 billion people
          in over 180 countries use WhatsApp to stay in touch with friends and
          family, anytime and anywhere. WhatsApp is free and offers simple, secure,
          reliable messaging and calling, available on phones all over the world.">
  <meta name="twitter:image" content="https://static.whatsapp.net/rsrc.php/v3/yR/r/y8-PTBaP90a.png">

  <!-- Meta Tags Generated via https://www.opengraph.xyz -->

[rosano]

Here are some image drafts:

Telegram also just uses a small icon image, not one of these larger formats, and I suppose we could try that too.

[r10s]

thanks a lot for the research!

Telegram also just uses a small icon image, not one of these larger formats, and I suppose we could try that too.

i like sth. as the last image with the background - maybe we should also go bold here :)

and maybe say (the first line is probably just the domain)

i.delta.chat
Join on Delta Chat

so, sth. that matches with one-to-one contacts, group chats and broadcasts and even the empty link.

usually, the links are not shared without context, so that should be fine.

[r10s]

ftr: #11 shows some screenshots how it actually looks in reality on some platforms