diff --git a/public/og-image.png b/public/og-image.png
new file mode 100644
index 00000000..cf36ea60
Binary files /dev/null and b/public/og-image.png differ
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index e5913ea1..6fbf29b8 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -4,15 +4,17 @@ export interface Props {
 	description?: string;
 	keywords?: string;
 	image?: string;
+	imageAlt?: string;
 	url?: string;
 	type?: string;
 }
 
 const { 
-	title = "First Contributions - Make Your First Open Source Contribution in 5 Minutes", 
+	title = "First Contributions - Make Your First Open Source Contribution",
 	description = "Learn how to make your first open source contribution in just 5 minutes. Step-by-step guide for beginners with beginner-friendly projects and resources.",
 	keywords = "open source, github, contribute to open source, beginner programmer, first contribution, git, pull request, coding, software development, programming, learn to code",
-	image = "https://firstcontributions.github.io/og-image.svg",
+	image = "https://firstcontributions.github.io/og-image.png",
+	imageAlt = "First Contributions open source contribution guide preview",
 	url = "https://firstcontributions.github.io/",
 	type = "website"
 } = Astro.props;
@@ -56,18 +58,20 @@ const {
 		<meta property="og:title" content={title} />
 		<meta property="og:description" content={description} />
 		<meta property="og:image" content={image} />
+		<meta property="og:image:alt" content={imageAlt} />
 		<meta property="og:image:width" content="1200" />
 		<meta property="og:image:height" content="630" />
 		<meta property="og:site_name" content="First Contributions" />
 		
 		<!-- Twitter -->
-		<meta property="twitter:card" content="summary_large_image" />
-		<meta property="twitter:url" content={url} />
-		<meta property="twitter:title" content={title} />
-		<meta property="twitter:description" content={description} />
-		<meta property="twitter:image" content={image} />
-		<meta property="twitter:creator" content="@firstcontrib" />
-		<meta property="twitter:site" content="@firstcontrib" />
+		<meta name="twitter:card" content="summary_large_image" />
+		<meta name="twitter:url" content={url} />
+		<meta name="twitter:title" content={title} />
+		<meta name="twitter:description" content={description} />
+		<meta name="twitter:image" content={image} />
+		<meta name="twitter:image:alt" content={imageAlt} />
+		<meta name="twitter:creator" content="@1stContribution" />
+		<meta name="twitter:site" content="@1stContribution" />
 		
 		<!-- Structured Data / Schema.org -->
 		<script type="application/ld+json">
diff --git a/src/pages/index.astro b/src/pages/index.astro
index f3e1b432..e83ef022 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -4,7 +4,7 @@ import App from '../components/App.astro';
 ---
 
 <Layout 
-	title="First Contributions - Make Your First Open Source Contribution in 5 Minutes"
+	title="First Contributions - Make Your First Open Source Contribution"
 	description="Learn how to make your first open source contribution in just 5 minutes. Step-by-step guide for beginners with beginner-friendly projects and resources."
 	keywords="open source, github, contribute to open source, beginner programmer, first contribution, git, pull request, coding, software development, programming, learn to code"
 	url="https://firstcontributions.github.io/"