Add Open Graph meta tags for social media previews

- Title: OpenHands Index
- Description: A Holistic Benchmark for Software Engineering
- Preview image: OpenHands logo

Co-authored-by: openhands <openhands@all-hands.dev>

app.py

@@ -39,6 +39,19 @@ logger.info(f"All modules imported (LOCAL_DEBUG={LOCAL_DEBUG})")
 
 api = HfApi()
 LOGO_PATH = "assets/logo.svg"
+# Open Graph / Social Media Preview Meta Tags
+og_meta_tags = """
+<meta property="og:title" content="OpenHands Index" />
+<meta property="og:description" content="A Holistic Benchmark for Software Engineering" />
+<meta property="og:image" content="https://index.openhands.dev/file=assets/openhands_logo_color_forwhite.png" />
+<meta property="og:url" content="https://index.openhands.dev" />
+<meta property="og:type" content="website" />
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:title" content="OpenHands Index" />
+<meta name="twitter:description" content="A Holistic Benchmark for Software Engineering" />
+<meta name="twitter:image" content="https://index.openhands.dev/file=assets/openhands_logo_color_forwhite.png" />
+"""
+
 # JavaScripts
 scroll_script = """
 <script>
@@ -247,7 +260,7 @@ logger.info("Creating Gradio application")
 demo = gr.Blocks(
     theme=theme,
     css=final_css,
-    head=scroll_script + redirect_script + tooltip_script,
+    head=og_meta_tags + scroll_script + redirect_script + tooltip_script,
     title="OpenHands Index",
 )