feat: Add Open Graph and Twitter Card Meta Tags for Social Media Previews (#487)

[NEHAJAKATE]

Add Open Graph and Twitter Card Meta Tags for Social Media Previews

🎯 Fixes #487

Problem

When users share DevPath URLs on Twitter/X, LinkedIn, Discord, or WhatsApp, the preview is either blank or generic because there are zero Open Graph or Twitter Card meta tags in any template.

Solution

This PR adds comprehensive social media meta tags to all templates, implements SEO best practices with robots.txt and sitemap.xml, and includes full test coverage.

Changes Made

📄 Templates Updated (5 files)

• templates/index.html - Added complete OG/Twitter Card meta tags for homepage
• templates/project.html - Upgraded partial OG tags to complete implementation with dynamic Jinja2 variables
• templates/404.html - Added OG tags + robots noindex
• templates/405.html - Added OG tags + favicon + robots noindex
• templates/500.html - Added OG tags + favicon + robots noindex

🖼️ Assets Created

• static/og-banner.png - Optimized 1200×630 image for social media previews (resized from assets/devpath_banner.png)

🔍 SEO Files Created

• static/robots.txt - Allows all crawlers, references sitemap
• static/sitemap.xml - Lists homepage URL with priority and changefreq

🛣️ Routes Added

• GET /robots.txt - Serves robots.txt with text/plain mimetype
• GET /sitemap.xml - Serves sitemap.xml with application/xml mimetype

🧪 Tests Added (18 new tests)

• 7 tests for homepage OG/Twitter tags
• 7 tests for dynamic project page OG/Twitter tags
• 2 tests for error page OG tags and noindex
• 2 tests for robots.txt and sitemap.xml routes

Meta Tags Implemented

Open Graph Tags

<meta property="og:title" content="DevPath — Find Projects Based On Your Skills" />
<meta property="og:description" content="Get personalized coding project recommendations..." />
<meta property="og:image" content="https://mydevpath-github.vercel.app/static/og-banner.png" />
<meta property="og:url" content="https://mydevpath-github.vercel.app/" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="DevPath" />

Twitter Card Tags

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="DevPath — Find Projects Based On Your Skills" />
<meta name="twitter:description" content="Get personalized coding project recommendations..." />
<meta name="twitter:image" content="https://mydevpath-github.vercel.app/static/og-banner.png" />

Dynamic Project Pages

Project detail pages use Jinja2 template variables for unique content:

<meta property="og:title" content="{{ project.title }} — DevPath" />
<meta property="og:description" content="{{ project.description[:155] }}" />
<meta property="og:url" content="https://mydevpath-github.vercel.app/project/{{ project.id }}" />

Test Results

============================= 47 passed in 0.70s ==============================

• 27 original tests: ✅ All passing
• 18 new tests: ✅ All passing
• 2 existing tests: ✅ All passing
• Total: 47/47 (100%)

Verification

All routes tested and working:

• ✅ Homepage (200) - OG tags present
• ✅ Project pages (200) - Dynamic OG tags present
• ✅ /robots.txt (200) - Correct content-type
• ✅ /sitemap.xml (200) - Valid XML
• ✅ Error pages (404/405/500) - OG tags + noindex

Social Media Preview

When shared on Twitter/X, LinkedIn, Discord, or WhatsApp, DevPath links will now display:

• Title: DevPath — Find Projects Based On Your Skills (or project-specific title)
• Description: Compelling description (155 chars for projects)
• Image: 1200×630 optimized DevPath banner
• Card Type: Large image card for prominent display

Breaking Changes

None. This PR only adds meta tags to templates and new routes. All existing functionality is preserved.

Checklist

• All templates have complete OG meta tags
• All templates have Twitter Card meta tags
• Project pages use dynamic Jinja2 variables
• Error pages have robots noindex
• robots.txt created and served at /robots.txt
• sitemap.xml created and served at /sitemap.xml
• Optimized 1200×630 OG banner image created
• 18 new tests added covering all changes
• All 47 tests pass
• No breaking changes
• Code follows project style guidelines
• Commit messages reference issue [Feature]: Missing Open Graph and Twitter Card meta tags cause blank/ugly link previews when sharing DevPath #487

How to Test

Local Testing

python app.py
# Visit http://127.0.0.1:5000/
# View page source (Ctrl+U) and search for "og:title"

Test Routes

• http://127.0.0.1:5000/ (homepage with OG tags)
• http://127.0.0.1:5000/project/1 (project page with dynamic OG tags)
• http://127.0.0.1:5000/robots.txt
• http://127.0.0.1:5000/sitemap.xml

Social Media Debuggers

• Facebook: https://developers.facebook.com/tools/debug/
• Twitter: https://cards-dev.twitter.com/validator
• LinkedIn: https://www.linkedin.com/post-inspector/

Run Tests

python -m pytest tests/test_basic.py -v

Files Changed

• templates/index.html (modified)
• templates/project.html (modified)
• templates/404.html (modified)
• templates/405.html (modified)
• templates/500.html (modified)
• routes/main_routes.py (modified)
• tests/test_basic.py (modified)
• static/robots.txt (created)
• static/sitemap.xml (created)
• static/og-banner.png (created)

Impact

• ✅ User Experience: Rich, branded previews on all social platforms
• ✅ SEO: Improved discoverability through robots.txt and sitemap.xml
• ✅ Maintainability: Comprehensive test coverage ensures meta tags remain functional
• ✅ Performance: Zero performance impact - meta tags are static HTML in <head>

[vercel]

Someone is attempting to deploy a commit to the komalsony234-1530's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Thank you for submitting your first pull request to DevPath.

Before review:

• Complete the PR template fully
• Ensure all tests pass
• Link your PR to an issue
• Keep changes scoped to the issue

A maintainer will review your contribution soon.