Add OpenGraph/Twitter tags for better sharing

Đang mở
  • Có gì không ổn?
#96 13 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 8 ngày

@stephaniehobson đang làm issue này rồi.

Từ ngày 4/11/2026.

  • #473 của @stephaniehobson — đang mở

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
35/100
Loại issue
Tính năng
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
javascript
Lĩnh vực
frontend, web-dev

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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">
Ngôn ngữ chính
JavaScript
Star
21
Fork
7
Merge trung bình
7 ngày 6 giờ
Pull request đã merge (30 ngày)
5

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của mozilla/ensemble

Tất cả issue của mozilla/ensemble

Issue tương tự

Thêm issue về JavaScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.