A personal portfolio website built with Django and HTML/CSS, implementing best practices for SEO, security, performance, and accessibility.
- Implement lazy loading (
loading="lazy") for performance improvements.
- Implemented essential
<meta>tags to improve search ranking and social media sharing. - Used Open Graph (OG) & Twitter Cards for better previews when sharing the website.
- Applied
canonicallinks to avoid duplicate content issues.
- LinkedIn, GitHub, and Vercel links were enhanced with:
noopener noreferrer→ Improves security by preventing tab hijacking.nofollow→ Used when needed to prevent passing SEO authority.hreflang="en"→ Helps search engines understand the language.aria-label→ Improves accessibility for screen readers.referrerpolicy="strict-origin-when-cross-origin"→ Limits referrer data exposure.
- Fixed unintended bold text issue by debugging CSS rules (
font-weight: bold;). - Ensured proper
robots.txtconfiguration for SEO to prevent indexing of unnecessary URLs.
- Built a dynamic sitemap using
django.contrib.sitemaps, helping search engines crawl important pages. - Registered
sitemap.xmlinrobots.txtto assist search engines in indexing the site.
- Implemented CSP headers to mitigate risks of XSS (Cross-Site Scripting) attacks.
- Used
script-src,style-src,img-src,font-srcdirectives to allow only trusted resources. - Enabled error logging for CSP violations (
error_logged.txt).
- Allowed indexing of important pages while blocking unnecessary ones (
admin/,csp-violation-report/).
To enhance Google Search visibility and enable rich results, I implemented JSON-LD structured data in my portfolio.
- 📌 Personal Profile Schema (
@type: Person) → Helps Google recognize me as a Python Django Developer. - 🔗 Social & Professional Links (
sameAs) → Added LinkedIn, GitHub, and Twitter for credibility. - 🎓 Certifications & Education (
alumniOf) → Listed multiple online courses & certifications from Coursera, Google Cloud, etc. - 📩 Contact Information (
email) → Helps with professional outreach.
- The JSON-LD script is placed inside the
<head>section ofbase.html. - Verified with Google Rich Results Test and submitted via Google Search Console.
🔍 Test JSON-LD Structured Data
- Portfolio Website: personalwebpage.pythonanywhere.com
- GitHub Repo: Portfolio Repository
- Frontend: HTML5, CSS3, Bootstrap
- Backend: Django, Django REST Framework
- Security Enhancements:
django-csp,robots.txt,sitemap.xml - Hosting: PythonAnywhere
- Implemented the
srcsetattribute for responsive images. - Improves SEO by providing better image resolution based on device capabilities.
- Enhances website performance by loading the optimal image size.
- Added
Cache-Controlheaders to improve page load speed. - Implemented ETag headers by fetching the last modified time of the HTML file from the OS.
- Ensures efficient caching and reduces unnecessary data transfers.
📧 Email: osama.aslam.86004@gmail.com
🔗 LinkedIn: osamaaslam86004