Add OpenGraph/Twitter tags for better sharing

Ouverte
  • Quelque chose ne va pas ?
#96 13 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 8 jours

@stephaniehobson y travaille déjà.

Depuis le 4/11/2026.

  • #473 par @stephaniehobson — ouverte

Évaluation

Difficulté
2/5
Temps estimé
1-3 heures
Accessibilité débutants
35/100
Type d'issue
Fonctionnalité
Clarté
Plutôt claire
Activité
À l'abandon
Stack technique
javascript
Domaine
frontend, web-dev

Piste de recherche

Start by inspecting the generated build/index.html shown in the issue and identify how that file is produced. Confirm where the document head is maintained before adding the requested description, OpenGraph, and Twitter metadata. Done means the generated page contains the intended sharing tags and the Facebook and Twitter validators show the expected values.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

to do

Here's a prettified version of the generated+minified build/index.html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no" />
    <meta name="theme-color" content="#ffffff" />
    <link rel="manifest" href="/manifest.json" />
    <link rel="icon" type="image/png" sizes="196x196" href="/icons/favicon-196.png" />
    <link rel="shortcut icon" href="/icons/favicon.ico" />
    <title>Firefox Public Data Report</title>
    <link href="/static/css/main.7337a89f.css" rel="stylesheet" />
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root" />
    <script type="text/javascript" src="/static/js/main.25ecaea0.js" />
  </body>
</html>

At a minimum, we should probably add a meta description tag, but the Facebook OpenGraph should probably add a few more og:* tags to be more "share" friendly. Similarly, here's the Twitter card validator: https://cards-dev.twitter.com/validator.

I think Open Graph/Facebook is able to infer some of the meta tags, but probably best to explicitly set them to the values you want/expect:

Based on the raw tags, we constructed the following Open Graph properties

NAME: VALUE:
og:url https://moz-ensemble.herokuapp.com/dashboard/user-activity
og:type website
og:title Firefox Public Data Report
og:updated_time 1523295522
og:description  

Here's a random copy-pasta of a mozilla.org meta tags:

    <meta name="description" content="Did you know? Mozilla — the maker of Firefox — fights to keep the Internet a global public resource, open and accessible to all.">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="Mozilla">
    <meta property="og:locale" content="en_US">
    <meta property="og:url" content="https://www.mozilla.org/en-US/">
    <meta property="og:image" content="https://www.mozilla.org/media/img/mozorg/mozilla-256.4720741d4108.jpg">
    <meta property="og:title" content="Internet for people, not profit">
    <meta property="og:description" content="Did you know? Mozilla — the maker of Firefox — fights to keep the Internet a global public resource, open and accessible to all.">
    <meta property="fb:page_id" content="262134952380">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@mozilla">
    <meta name="twitter:domain" content="mozilla.org">
    <meta name="twitter:app:name:googleplay" content="Firefox">
    <meta name="twitter:app:id:googleplay" content="org.mozilla.firefox">
    <meta name="twitter:app:name:iphone" content="Firefox">
    <meta name="twitter:app:id:iphone" content="989804926">
    <meta name="twitter:app:name:ipad" content="Firefox">
    <meta name="twitter:app:id:ipad" content="989804926">
Langage dominant
JavaScript
Étoiles
21
Forks
7
Merge moyen
6 j 6 h
PR mergées (30 j)
5

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de mozilla/ensemble

Toutes les issues de mozilla/ensemble

Issues similaires

Plus d'issues JavaScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.