Open Graph & Metadata
Open Graph & Metadata
HCG AI is pre-configured with comprehensive Open Graph (OG) and Twitter Card metadata to ensure that when the application URL is shared on social media platforms (like WhatsApp, X, or LinkedIn), it displays rich, informative previews.
1. Modifying Site Identity
All primary metadata is defined in the <head> section of index.html. To customize the application's branding for your own deployment, locate and update the following tags:
<!-- Primary Metadata -->
<title>HCG AI - Pregnancy Tracker</title>
<meta name="description" content="Comprehensive first trimester pregnancy risk analysis...">
<meta name="keywords" content="pregnancy tracking, HCG levels, ultrasound analysis...">
<!-- Canonical URL (Update this to your production domain) -->
<link rel="canonical" href="https://app.hcgai.com">
2. Social Media Previews (Open Graph)
The application uses Open Graph protocol tags to control how content is displayed across Facebook, LinkedIn, and messaging apps.
| Tag | Purpose | Recommended Value |
| :--- | :--- | :--- |
| og:title | The title of your app as it appears in shares. | HCG AI - Advanced Pregnancy Tracking |
| og:description | A brief summary of the app's utility. | Max 160 characters. |
| og:url | The permanent URL of the page. | Your deployment URL. |
| og:image | The preview image URL. | 1200 x 630px PNG/JPG. |
Example configuration in index.html:
<meta property="og:type" content="website">
<meta property="og:title" content="HCG AI - Advanced Pregnancy Tracking">
<meta property="og:image" content="https://app.hcgai.com/hcg-ai-social.png">
3. Twitter Card Integration
The application is optimized for X (formerly Twitter) using the summary_large_image format, which highlights the visual dashboard.
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="HCG AI - Advanced Pregnancy Tracking">
<meta name="twitter:image" content="https://app.hcgai.com/hcg-ai-social.png">
4. Managing Social Assets
The project includes a utility script for managing social media images:
- Location:
create-og-image.js - Default Asset:
hcg-ai-social.png
While the project uses SVG for internal icons, most social platforms require a raster format (PNG or JPEG) for Open Graph images.
To update the preview image:
- Create a 1200x630 pixel image representing your app.
- Save it as
hcg-ai-social.pngin the root directory. - Ensure the
og:imageandtwitter:imagetags inindex.htmlpoint to the absolute URL where this image is hosted.
5. SEO & Accessibility
Beyond social sharing, the metadata includes accessibility and mobile-optimization tags:
- Viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0">ensures the app is responsive on mobile devices. - Author:
<meta name="author" content="HCG AI">for search engine attribution. - Feather Icons: The app uses the
feather-iconslibrary for accessible, scalable vector graphics in the UI.