Deployment and SEO

🔄 Quick Recall: In the last lesson, you debugged issues and optimized performance — Core Web Vitals, image optimization, and accessibility audits. Now let’s get your site live and visible to search engines.

Choosing a Hosting Platform

For static websites (HTML, CSS, JavaScript with no backend):

Help me choose a hosting platform for my static website:

My site: [describe: portfolio, blog, business landing page, etc.]
Files: HTML, CSS, JavaScript (no server-side code)
Expected traffic: [low / medium / high]
Custom domain: [yes/no, do I have one?]
Budget: [free / minimal / flexible]

Compare these options for my needs:
1. Netlify — What are the pros, cons, and free tier limits?
2. Vercel — What are the pros, cons, and free tier limits?
3. GitHub Pages — What are the pros, cons, and limitations?
4. Cloudflare Pages — What are the pros, cons, and free tier limits?

Which is best for my specific situation and why?

Deployment Checklist

Before going live, verify everything:

Create a pre-deployment checklist for my website:

[describe your site structure and features]

Check these categories:

CONTENT:
- All placeholder text replaced with real content
- All links work (no 404s)
- Contact information is correct
- Legal pages present (privacy policy, terms if needed)

TECHNICAL:
- Favicon and touch icons configured
- 404 error page created
- HTTPS enabled (SSL certificate)
- Redirects configured for old URLs (if migrating)
- Analytics tracking installed
- Console free of errors and warnings

PERFORMANCE:
- Images optimized and lazy-loaded
- CSS and JavaScript minified
- Critical CSS inlined
- Fonts preloaded

SEO:
- Every page has unique title and meta description
- Open Graph tags for social sharing
- Sitemap.xml generated
- robots.txt configured
- Structured data added

Organize as a checklist I can work through before launch.

SEO Optimization

Meta Tags for Every Page

Write the HTML head meta tags for this page:

Page type: [home / about / blog post / product / portfolio]
Page title: [your page title]
Page description: [what this page is about]
Primary keyword: [target search term]
Page URL: [full URL]

Generate:
1. Title tag (under 60 characters, keyword near the beginning)
2. Meta description (150-160 characters, compelling, includes keyword)
3. Canonical URL
4. Open Graph tags (og:title, og:description, og:image, og:url, og:type)
5. Twitter Card tags (twitter:card, twitter:title, twitter:description, twitter:image)
6. Viewport meta tag
7. Language declaration

Also include a robots meta tag (index, follow for public pages).

Structured Data (JSON-LD)

Generate JSON-LD structured data for this page:

Page type: [Article / FAQ / HowTo / Product / LocalBusiness / Person]
Content: [describe the page content]

For an Article, include:
- headline, description, author, datePublished, dateModified
- publisher with logo
- Image (main image of the article)

For a FAQ page, include:
- Each question and answer pair

For a HowTo, include:
- Steps with text and optional images
- Total time, tools needed

Output valid JSON-LD wrapped in a script tag. Verify against Google's structured data guidelines.

✅ Quick Check: Why put structured data in JSON-LD format instead of inline microdata?

JSON-LD is Google’s recommended format because it’s separate from your HTML — you add a script block in the head, and your page markup stays clean. Microdata (using itemscope, itemtype, itemprop) mixes metadata into your HTML elements, making the markup harder to read and maintain. JSON-LD also makes it trivial for AI to generate: it’s just a JSON object, not HTML attributes scattered across your template.

Sitemap and robots.txt

Generate a sitemap.xml and robots.txt for my website:

Pages:
- / (homepage, updated weekly)
- /about (static, updated monthly)
- /blog/ (listing page, updated weekly)
- /blog/post-1/ (article, published [date])
- /blog/post-2/ (article, published [date])
- /contact (static, updated rarely)
[list all pages]

For sitemap.xml:
- Include lastmod dates
- Set changefreq appropriately
- Set priority (1.0 for homepage, 0.8 for main sections, 0.6 for posts)

For robots.txt:
- Allow all crawlers
- Disallow admin or private paths (if any)
- Point to sitemap location

Domain and DNS Setup

Help me configure DNS for my custom domain:

Domain registrar: [GoDaddy / Namecheap / Google Domains / Cloudflare / other]
Hosting platform: [Netlify / Vercel / GitHub Pages / other]
Domain: [yourdomain.com]

Provide step-by-step instructions for:
1. Adding the domain to my hosting platform
2. Configuring DNS records (A records, CNAME, etc.)
3. Setting up www to non-www redirect (or vice versa)
4. Enabling HTTPS / SSL certificate
5. Verifying the domain is working correctly

Include the specific DNS record values I need to enter.

Post-Launch Monitoring

Create a post-launch monitoring checklist for my website:

Week 1:
- What to check daily for the first week
- How to verify search engine indexing (Google Search Console setup)
- How to confirm analytics are tracking correctly

Month 1:
- Key metrics to track
- Common post-launch issues to watch for
- When to check Core Web Vitals in the field (real user data)

Ongoing:
- Monthly maintenance tasks
- How to monitor for broken links
- When to update content for SEO freshness

✅ Quick Check: Why check “real user data” for Core Web Vitals instead of just lab data?

Because lab data (Lighthouse, PageSpeed Insights) tests your site from one location on one device with one connection speed. Real user data (Chrome User Experience Report, Search Console) shows how your site performs for actual visitors — on slow phones, rural connections, and older browsers. A site that scores 95 in Lighthouse might score 60 for real users on 3G connections. Real user data reveals the experience your actual audience has.

Exercise: Deploy Your Project

Choose a hosting platform (Netlify or Vercel recommended for beginners)
Run through the pre-deployment checklist on your project
Add meta tags and Open Graph data to every page
Generate a sitemap.xml and robots.txt
Deploy your site and verify it works on your custom domain (or the free subdomain)
Submit your sitemap to Google Search Console

Key Takeaways

Meta descriptions are your search result sales pitch — 150-160 characters that determine whether users click your link or a competitor’s
Structured data (JSON-LD) enables rich snippets in search results — stars, FAQs, how-to steps — dramatically increasing visibility
Technical SEO foundations (speed, mobile-responsiveness, correct HTML) must be solid before content strategies matter
Every page needs a unique title tag (under 60 characters) and meta description with the target keyword
Deploy to platforms like Netlify or Vercel for free HTTPS, CDN distribution, and simple custom domain setup
Monitor real user Core Web Vitals after launch — lab scores don’t reflect actual user experience

Up Next: In the final lesson, you’ll build a complete website from scratch — combining everything you’ve learned into a real, deployable project.