chore(v1.9.0): update SEO for improved search rankings

saqibbedar · Oct 12, 2024 · 6a1718e · 6a1718e
1 parent 37ba231
commit 6a1718e
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 
 <div align="center">
-<span><h1><a href="https://saqibbedar.github.io/Reactfolio/" target="_blank">Reactfolio.</a> v1.8.0</h1></span>
+<span><h1><a href="https://saqibbedar.github.io/Reactfolio/" target="_blank">Reactfolio.</a> v1.9.0</h1></span>
 
 <span>Designed for developers looking to showcase their work with style and simplicity.</span>
 
@@ -26,14 +26,6 @@
 
 Check out the live demo of the portfolio [here](https://saqibbedar.github.io/Reactfolio/).
 
-# Docker Support (Deprecated) ❌
-
-Starting from version v1.8.0, Reactfolio no longer supports Docker. If you prefer to containerize your portfolio and deploy it using Docker, please refer to the [docker-deploy branch documentation](https://github.com/saqibbedar/Reactfolio/tree/docker-deploy?tab=readme-ov-file) for detailed instructions. Note that we will not handle any issues related to Docker from this version onwards.
-
-To access the Docker documentation, switch to the `docker-deploy` branch and follow the instructions provided there.
-
-Read [Docker Documentation](https://github.com/saqibbedar/Reactfolio/tree/docker-deploy?tab=readme-ov-file) for more details.
-
 # Installation & Setup 🛠️
 
 Follow these steps to create and deploy your portfolio:
@@ -70,9 +62,34 @@ const AboutPage = {
 // Similarly, update other values as needed...
 ```
 
-## Step 3: Push Changes to GitHub 🚀
+## Step 3: Update [`index.html`](https://github.com/saqibbedar/Reactfolio/blob/main/index.html) for SEO Optimization 🔍
+
+To improve the SEO of your portfolio, update the `index.html` file with your specific information. Open the `index.html` file and replace the existing values with your own:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Your Portfolio Description">
+  <meta name="keywords" content="Your, Portfolio, Keywords">
+  <meta name="author" content="Your Name">
+  <title>Your Portfolio Title</title>
+
+  <!-- Similarly, update other values as needed -->
+
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>
+
+```
+
+## Step 4: Push Changes to GitHub 🚀
 
-Once you’ve updated the `assets.js` file, you can push your changes to your GitHub repository.
+Once you’ve updated the `index.html` file, you can push your changes to your GitHub repository.
 
 ```bash
 git add .
@@ -84,8 +101,6 @@ git push origin main
 
 Congratulations! If you followed all the steps correctly, your Portfolio is now live. You can view your portfolio at [`https://<your-username>.github.io/<repository-name>/`](https://<your-username>.github.io/<repository-name>/).
 
-You can view your site locally at [`http://localhost:5173`](http://localhost:5173)
-
 # Community & Feedback 💬
 
 We'd love to hear from you! Whether you have questions, ideas, or feedback, you can engage with the Reactfolio community in our GitHub Discussions. Share your experience, ask questions, or suggest features.

diff --git a/index.html b/index.html
@@ -7,13 +7,44 @@
     <meta name="keywords" content="portfolio, web developer, projects, skills, experience" />
     <meta name="author" content="Saqib Bedar" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <link rel="canonical" href="https://your-portfolio-url.com" />
-    <title>Your Name | Web Developer Portfolio</title>
-    <meta property="og:title" content="Your Name | Web Developer Portfolio" />
+    <link rel="canonical" href="https://saqibbedar.github.io/Reactfolio/" />
+    <title>Reactfolio | Web Developer Portfolio builder</title>
+
+    <!-- Open Graph Meta Tags for Facebook and LinkedIn -->
+    <meta property="og:title" content="Saqib Bedar | Web Developer Portfolio" />
     <meta property="og:description" content="Professional portfolio showcasing my skills, projects, and experience as a developer." />
-    <meta property="og:image" content="https://raw.githubusercontent.com/saqibbedar/Reactfolio/refs/heads/main/public/og-img.jpg" />
-    <meta property="og:url" content="https://your-portfolio-url.com" />
+    <meta property="og:image" content="https://raw.githubusercontent.com/saqibbedar/Reactfolio/main/public/og-img.jpg" />
+    <meta property="og:url" content="https://saqibbedar.github.io/Reactfolio/" />
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="Reactfolio" />
+
+    <!-- Twitter Card Meta Tags -->
     <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@saqibbedar" />
+    <meta name="twitter:title" content="Saqib Bedar | Web Developer Portfolio" />
+    <meta name="twitter:description" content="Professional portfolio showcasing my skills, projects, and experience as a developer." />
+    <meta name="twitter:image" content="https://raw.githubusercontent.com/saqibbedar/Reactfolio/main/public/og-img.jpg" />
+
+    <!-- Additional SEO Meta Tags -->
+    <meta name="robots" content="index, follow" />
+    <meta name="googlebot" content="index, follow" />
+    <meta name="theme-color" content="#317EFB" />
+    <meta name="msapplication-TileColor" content="#317EFB" />
+    <meta name="msapplication-config" content="/browserconfig.xml" />
+
+    <!-- LinkedIn Meta Tags (Open Graph covers LinkedIn as well) -->
+    <meta property="linkedin:card" content="summary_large_image" />
+    <meta property="linkedin:site" content="@saqibbedar" />
+    <meta property="linkedin:title" content="Saqib Bedar | Web Developer Portfolio" />
+    <meta property="linkedin:description" content="Professional portfolio showcasing my skills, projects, and experience as a developer." />
+    <meta property="linkedin:image" content="https://raw.githubusercontent.com/saqibbedar/Reactfolio/main/public/og-img.jpg" />
+
+    <!-- Instagram Meta Tags (Instagram uses Open Graph) -->
+    <meta property="instagram:card" content="summary_large_image" />
+    <meta property="instagram:site" content="@saqibbedar" />
+    <meta property="instagram:title" content="Saqib Bedar | Web Developer Portfolio" />
+    <meta property="instagram:description" content="Professional portfolio showcasing my skills, projects, and experience as a developer." />
+    <meta property="instagram:image" content="https://raw.githubusercontent.com/saqibbedar/Reactfolio/main/public/og-img.jpg" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "reactfolio",
   "private": true,
-  "version": "1.8.0",
+  "version": "1.9.0",
   "type": "module",
   "scripts": {
     "dev": "vite",