Meta Tags, Cookies & Static Websites: How Websites Store Data & Load Fast

TAKEAWAYS:

• Meta tags are HTML snippets that define page metadata (title, description, keywords) for search engines and browsers.
• Cookies store small data on users’ devices to track sessions, preferences, and logins (e.g., "Remember Me" in eSewa).
• Static websites use pre-built HTML/CSS/JS files for faster loading, ideal for portfolios, blogs, and marketing sites.
• Cookies can be session-based (temporary) or persistent (long-term), with security risks if misconfigured.
• Static site generators (like Jekyll or Hugo) automate content updates for dynamic-looking static sites.
• Meta tags like viewport and charset directly impact mobile responsiveness and text rendering.

1. Meta Tags: Invisible Code That Controls How Websites Appear

Meta tags are HTML elements placed in the <head> section that provide metadata about the webpage. They don’t display on the page but influence how search engines index it and how browsers render it.

Key Meta Tags and Their Purposes

How Meta Tags Work: A Trace

1. A user searches "Nepali books online" on Google.
2. Google’s crawler reads the <meta name="description"> of KathmanduBooks.com:

   <meta name="description" content="Buy Nepali books online at discounted prices. Free shipping in Kathmandu Valley.">
   

3. Google displays this snippet under the URL, increasing click-through rate.

Real-World Example: eSewa’s Meta Tags

eSewa’s homepage uses:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content="eSewa – Nepal’s #1 Digital Payment Platform">
<meta property="og:image" content="https://esewa.com.np/images/logo.png">

• Why? The viewport tag ensures the mobile app’s web interface scales perfectly on low-end phones. The Open Graph (og:) tags control how links appear when shared on Facebook/WhatsApp.

2. Cookies: Tiny Data Storage for Personalization

Cookies are small text files stored on a user’s device by a website. They enable:

• Session management (e.g., staying logged into your bank account).
• Personalization (e.g., remembering your language preference on Daraz).
• Tracking (e.g., analytics to see which products you viewed).

sequenceDiagram
    participant User
    participant Browser
    participant NcellServer
    User->>Browser: Visits ncell.com.np/login
    Browser->>NcellServer: GET /login
    NcellServer-->>Browser: HTML + Set-Cookie: session_id=abc123; HttpOnly
    Browser->>Browser: Stores cookie
    Browser->>NcellServer: POST /login (includes session_id)
    NcellServer-->>Browser: 200 OK (Login successful)
    Browser->>User: Displays dashboard
    note right of Browser: Cookie expires after session ends

Types of Cookies

How Cookies Work: A Step-by-Step Trace

1. You visit Ncell’s recharge page and log in.
2. Ncell’s server sends a session cookie:

   Set-Cookie: user_session=abc123; Expires=Wed, 21 Oct 2023 07:28:00 GMT; HttpOnly
   

3. Your browser stores this cookie and sends it back with every request to Ncell’s site.
4. When you click "Recharge," Ncell reads user_session=abc123 and knows it’s you.

Cookie Attributes Explained

stateDiagram-v2
    [*] --> SetCookie: Browser receives "Set-Cookie" header
    SetCookie --> Store: Cookie saved to user's device
    Store --> Send: Browser includes cookie in HTTP requests
    Send --> Verify: Server checks cookie validity
    Verify --> Authenticate: User granted access if valid
    Verify --> Reject: Access denied if expired/stolen

Real-World Example: Khalti’s "Remember Me" Cookie

When you check "Remember me" while logging into Khalti:

1. Khalti sets a persistent cookie with:
   • user_id=45678
   • Expires=1 year from now
   • HttpOnly (prevents JavaScript access)
2. Next time you visit, Khalti auto-fills your email and stays logged in until you manually log out or the cookie expires.

3. Static Websites: Fast, Simple, and Secure

Static websites are pre-built HTML/CSS/JS files served directly to users. Unlike dynamic sites (e.g., WordPress), they don’t rely on a database or server-side processing.

How Static Websites Load (vs. Dynamic Sites)

flowchart LR
    subgraph User["User Requests Page"]
        A["Static Site"] -->|"1. Server sends pre-built HTML"| B["Browser Renders"]
        C["Dynamic Site"] -->|"1. Server queries DB"| D["Server processes PHP/Python"]
        D -->|"2. Generates HTML"| B
    end

Advantages of Static Websites

Disadvantages

• No user accounts: Requires third-party tools (e.g., Firebase) for logins.
• Limited interactivity: Complex features (e.g., real-time chat) need JavaScript workarounds.
• Manual updates: Content changes require re-uploading files (unless using a static site generator).

Static Site Generators (SSGs)

Tools like Jekyll, Hugo, and Gatsby automate static site creation from Markdown or templates. Example Workflow for a Nepali Blog:

1. Write posts in Markdown (e.g., post/2023-nepal-budget.md).
2. Run jekyll build to generate HTML.
3. Deploy to Netlify or GitHub Pages.

4. Meta Tags, Cookies, and Static Sites in Action: A Combined Example

Scenario: You’re building a static portfolio site for a Nepali freelance designer, but you want to:

1. Track visits for analytics.
2. Allow users to save their language preference (Nepali/English).
3. Ensure fast loading on slow NTC connections.

Solution Code

<!DOCTYPE html>
<html>
<head>
    <!-- Meta tags for SEO and mobile -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Portfolio of Nepali UI/UX designer based in Kathmandu">
    <meta name="keywords" content="UI design, UX, Nepal, freelance">
    <title>Anil’s Design Portfolio | Kathmandu</title>

    <!-- Cookie for language preference -->
    <script>
        // Check for existing cookie
        if (!document.cookie.includes("lang=")) {
            // Default to Nepali
            document.cookie = "lang=np; max-age=31536000; path=/";
            window.location.reload();
        }
    </script>
</head>
<body>
    <!-- Content in Nepali/English based on cookie -->
    <h1 id="greeting"></h1>
    <script>
        const cookieLang = document.cookie.split("; ").find(row => row.startsWith("lang=")).split("=")[1];
        if (cookieLang === "np") {
            document.getElementById("greeting").innerText = "स्वागत छन्!";
        } else {
            document.getElementById("greeting").innerText = "Welcome!";
        }
    </script>
</body>
</html>

How It Works

1. Meta tags ensure the site is mobile-friendly and appears in Google searches for "Nepali UI designer."
2. Cookie stores lang=np (or lang=en) to personalize the greeting.
3. Static files load instantly, even on 2G networks.

In the Real World

1. eSewa’s Meta Tags and Cookies

   • Meta Tags: eSewa’s <meta name="description"> includes keywords like "online bill payment Nepal" to rank higher in searches for utility bills.
   • Cookies: Session cookies track your login status, while persistent cookies remember your preferred payment method (e.g., Khalti auto-selected).

2. Daraz’s Static Product Pages

   • Product pages (e.g., Daraz’s iPhone listings) are static HTML/CSS to load quickly, even during sales like "Daraz Big Buying Days."
   • Cookie Use: "Add to cart" cookies persist until you clear them or close the browser.

3. NEPSE’s Static Archives

   • Historical stock price data (e.g., NEPSE’s 2010-2020 data) is served as static PDFs/CSV files for fast access during market hours.

4. Pathao’s Mobile-Optimized Meta Tags

   • Pathao’s website uses <meta name="viewport"> to ensure the booking interface scales perfectly on feature phones (common in Nepal).

5. Bank of Kathmandu’s Secure Cookies

   • The bank’s login page sets HttpOnly cookies to prevent theft via JavaScript (e.g., user_session=abc123; HttpOnly; Secure).

Exam Tip

1. Meta Tags:

   • Must-know: Always include <meta charset="UTF-8"> and <meta name="viewport"> in exams.
   • Common Question: "Write meta tags for a Nepali e-commerce site." → Include description, keywords, and og: tags for social sharing.
   • Trap: Avoid keywords meta tag—it’s deprecated but sometimes tested.

2. Cookies:

   • Define: "Cookies are small text files stored client-side to maintain state."
   • Attributes: Always mention Expires, Domain, Path, and HttpOnly in answers.
   • Security: Explain HttpOnly (blocks JavaScript access) and Secure (HTTPS-only) flags.

3. Static Sites:

   • Compare: Draw a table contrasting static vs. dynamic sites (speed, cost, security).
   • Tools: Name Jekyll, Hugo, or GitHub Pages for static site deployment.
   • Use Case: "When would you use a static site?" → Portfolios, blogs, marketing pages.

4. Combined Questions:

   • Expect questions like: "Design a static homepage for a Nepali travel agency using meta tags and cookies for language preference."
   • Structure:
     1. HTML <head> with meta tags.
     2. JavaScript to read/write cookies.
     3. Static file structure (e.g., index.html, styles/).

In the real world

• eSewa: Uses meta tags (<meta name="viewport">) to ensure its mobile payment interface works on low-end phones like the Nepali-made Ncell phone. The og:image tag ensures the app’s logo appears correctly when shared on WhatsApp.
• Ncell’s Recharge Portal: Relies on session cookies (HttpOnly flag) to keep users logged in securely while checking balance or making payments, even on shared devices in cyber cafés.
• Nepal Stock Exchange (NEPSE) Archives: Hosts static PDFs of historical stock prices (e.g., nepse.com.np/archives/2079.pdf) for fast, secure access without server processing, reducing costs during high-traffic periods like budget announcements.