chore: added meta tags in index html for image preview (#237)

* chore: added meta tags in index html for image preview

* chore: updated placeholder site to flutter page

web/index.html

@@ -19,7 +19,31 @@
 
   <meta charset="UTF-8">
   <meta content="IE=Edge" http-equiv="X-UA-Compatible">
-  <meta name="description" content="Come play Pinball with your favorite Google Developer Mascots! Built with Flutter & Firebase for Google I/O 2022.">
+  <meta name="description"
+    content="Come play Pinball with your favorite Google Developer Mascots! Built with Flutter & Firebase for Google I/O 2022.">
+  <meta property="og:description"
+    content="Come play Pinball with your favorite Google Developer Mascots! Built with Flutter & Firebase for Google I/O 2022.">
+
+  <meta property="og:title" content="Google I/O Pinball">
+
+  <!-- TODO(jonathandaniels-vgv): revisit once Google sets up deployments -->
+  <meta property="og:url" content="https://flutter.dev">
+
+  <!-- TODO(jonathandaniels-vgv): swap this image with updated pinball image -->
+  <meta name="twitter:image"
+    content="https://firebasestorage.googleapis.com/v0/b/io-photobooth-dev.appspot.com/o/public%2Fphotobooth-metadata-image.jpeg?alt=media">
+
+  <!-- TODO(jonathandaniels-vgv): swap this image with updated pinball image -->
+  <meta property="og:image"
+    content="https://firebasestorage.googleapis.com/v0/b/io-photobooth-dev.appspot.com/o/public%2Fphotobooth-metadata-image.jpeg?alt=media">
+
+  <meta name="twitter:text:title" content="I/O Pinball Machine - Flutter">
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="I/O Pinball Machine - Flutter">
+
+  <meta name="twitter:description"
+    content="Come play Pinball with your favorite Google Developer Mascots! Built with Flutter & Firebase for Google I/O 2022.">
+
 
   <!-- iOS meta tags & icons -->
   <meta name="apple-mobile-web-app-capable" content="yes">
@@ -107,4 +131,4 @@
   </script>
 </body>
 
-</html>
+</html>