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
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">
Here's a prettified version of the generated+minified build/index.html file:
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:
Here's a random copy-pasta of a mozilla.org meta tags: