Experiments images are not displayed on Facebook and Twitter posts

[SoftVision-CosminMuntean]

[Affected versions]:

• Firefox 61.0.1 and above

[Affected Platforms]:

• All Windows
• All Mac
• All Linux

[Prerequisites]:

• A Facebook and a Twitter profile was already logged on the used profile.

[Steps to reproduce]:

1. Open browser with the profile from prerequisites and navigate to https://testpilot.firefox.com page.
2. Click on one of the active experiments cards and after redirected, copy the page URL.
3. In two new tabs, navigate to "https://www.facebook.com" and "https://twitter.com" pages.
4. Paste the copied URL in the Facebook message box and "Post" it.
5. Paste the same URL in the Twitter message box and "Tweet" it.
6. Observe both the posted messages on the social platforms.

[Expected result]:

• Both the social platforms are displaying an image specific to the experiment in the message.

[Actual result]:

• Twitter correctly shows the experiment image (except Activity Stream), while Facebook displays the default Test Pilot logo image.

[Notes]

• The issue is reproducible on all Test Pilot Servers (dev, stage and production).
• Only the image for Send experiment is displayed on Facebook and Twitter posts.
• This issue occurs for all the experiments URL's in Facebook posts, and even if Test Pilot is installed or not.
• Here is a screen screenshot of the issue:

[pdehaan]

This is interesting... I was thinking that it was the same old issue of navigating directly to a page versus the metadata when you navigate through the app. But at least for Firefox Color, the metadata may just be wrong (since I get 404s on the og:image and twitter:image URLs):

<meta property="og:type" content="website">
<meta property="og:title" content="Firefox Test Pilot - Color">
<meta name="twitter:title" content="Firefox Test Pilot - Color">
<meta name="description" content="Show your colors. Create and share your own Firefox themes with just a few clicks.
">
<meta property="og:description" content="Show your colors. Create and share your own Firefox themes with just a few clicks.
">
<meta name="twitter:description" content="Show your colors. Create and share your own Firefox themes with just a few clicks.
">
<meta name="twitter:card" content="summary">
<meta property="og:image" content="https://testpilot.firefox.com/static/images/experiments/notes/color-fb.jpg">
<meta name="twitter:image" content="https://testpilot.firefox.com/static/images/experiments/notes/color-twitter.jpg">
<meta property="og:url" content="https://testpilot.firefox.com/experiments/color/">

https://github.com/mozilla/testpilot/blob/8a6c904dd4dc1842abc4e406a947c134d9fd654d/content-src/experiments/color.yaml#L15-L16

Note how the image_twitter and image_facebook reference the "/notes/" folder, yet I don't see those assets in either the ./frontend/src/images/experiments/notes folder, or the ./frontend/src/images/experiments/color folder.

---

For the Lockbox icons, I was convinced it was because we are hardcoding the production URL, but haven't pushed that experiment live yet, so it would be missing the assets on the prod server:

<meta property="og:image" content="https://testpilot.firefox.com/static/images/experiments/lockbox/social/share-facebook.jpg">
<meta name="twitter:image" content="https://testpilot.firefox.com/static/images/experiments/lockbox/social/share-twitter.jpg">

[pdehaan]

Not sure what's happening w/ Notes. Looks like the URLs haven't changed (even though the assets were modified lately in #3706):

<meta property="og:image" content="https://testpilot.firefox.com/static/images/experiments/notes/notes-fb.jpg">
<meta name="twitter:image" content="https://testpilot.firefox.com/static/images/experiments/notes/notes-twitter.jpg">
<meta property="og:url" content="https://testpilot.firefox.com/experiments/notes/">

https://github.com/mozilla/testpilot/tree/master/frontend/src/images/experiments/notes

FIGURE 1: /frontend/src/images/experiments/notes/notes-fb.jpg

Yet, the URL returns a 404 on prod: https://testpilot.firefox.com/static/images/experiments/notes/notes-fb.jpg