# Teknav Growth Plan: Phase 15 (Viewership & Top-of-Funnel Scaling) This document outlines the detailed architectural and implementation plan for massively scaling Teknav's viewer base and organic reach. This plan strictly adheres to the core constraints: Zero CDNs, Persian-first RTL, and native Linux deployments. ## 1. Google Web Stories Integration Web Stories are full-screen, tappable visual narratives indexed by Google Discover and Search. They are extremely effective for driving mobile traffic. ### 1.1 Backend: Automated Story Generation - **`scripts/generate-web-stories.mjs`:** Create a new build script that iterates through published articles in `teknav-data.js` (or database) and generates static AMP HTML files for each story. - **Content Chunking:** Utilize the existing article structure to break content into 4-7 "slides" per article: - Slide 1: Cover (High-res `og:image`, Article Title, Author, "Swipe up to read"). - Slide 2-N: Key headings and brief summaries. - Final Slide: "Read the full technical deep-dive on Teknav", with a call-to-action link to the canonical article. - **AMP Validation:** The generated HTML must strictly follow the `` specification, using valid `` tags and local, non-CDN assets. ### 1.2 Frontend & SEO Artifacts - **Sitemap Integration:** Update `scripts/generate-seo.mjs` to include a new `` specifically for `/stories/*` in the main `sitemap.xml`. - **Article Linkage:** In `generate-article-pages.mjs`, inject `` into the `` of the standard article HTML so Google knows a story version exists. - **Local Assets Check:** Ensure all swipe animations and video/image assets used in the stories are served from `/public/images/stories` and bypass external CDNs. --- ## 2. Social Virality & Embeddable Widgets We want to empower readers to share snippets visually, and allow other websites to easily embed Teknav data. ### 2.1 Auto-Generated Quote Cards - **UI Component (`QuoteSharer.jsx`):** A new React component that appears as a tooltip when a user highlights text on an article page (similar to Medium). - **Client-Side Rendering (Canvas):** When the user clicks "Share Quote", utilize the native HTML5 `` API to draw a branded quote card. - Background: Teknav dark-mode gradient. - Text: The highlighted text in Persian (RTL). - Footer: Teknav logo, Article Title, and a QR code/shortlink. - **Export:** The user can instantly download the image (`.png`) or share it directly via the Web Share API. ### 2.2 Embeddable Teknav Widgets - **Widget Route (`/embed/*`):** Create a standalone React entry point (`embed.html` -> `embed.jsx`) that strips away the header, footer, and sidebars, leaving only pure data presentation. - **Supported Widget Types:** - `/embed/glossary/:slug`: Displays a definition card for a tech term. - `/embed/company/:slug`: Displays a company profile card with verification badges. - `/embed/article-card/:slug`: Displays a mini-preview of an article. - **Cross-Origin Configuration:** Update the Nginx configuration (`/etc/nginx/sites-available/teknav`) to explicitly allow `X-Frame-Options` for `/embed/*` paths, while keeping the rest of the site protected against clickjacking. - **Branding & Backlinks:** Every widget must contain a non-removable `` link back to the canonical Teknav page to drive SEO value from embedded domains. --- ## 3. Programmatic SEO & Data Hubs Leveraging the existing Tech Directory and Glossary models to generate thousands of high-intent search pages. ### 3.1 Comparison Pages Engine ("X vs Y") - **Data Model:** Create a mapping system (either in `teknav-data.js` or via a new Prisma `Comparison` model) that pairs similar glossary terms or companies (e.g., "Next.js vs Remix", "PostgreSQL vs MongoDB"). - **Template (`ComparisonPage.jsx`):** A highly optimized, static layout that dynamically pulls the definitions, pros/cons, and related articles for both entities and displays them side-by-side. - **Build Generation (`scripts/generate-comparisons.mjs`):** Loop through all valid comparison pairs and pre-render them to static HTML (`dist/compare/x-vs-y/index.html`) to guarantee instant load times and indexability. ### 3.2 Dynamic "Top Tools" Aggregation - **Category Taxonomy:** Ensure `CompanyProfile` entries have strict industry tags (e.g., "AI", "Fintech", "Cloud"). - **Listicles (`TopicHub.jsx` extension):** Automatically generate programmatic listicle pages based on tags. - Route example: `/directory/category/artificial-intelligence` generating the SEO title: *"Top Persian Artificial Intelligence Startups & Tools"*. - **Structured Data:** Inject `ItemList` and `CollectionPage` JSON-LD schemas into these programmatic pages so Google parses them as official rankings/lists in search results. --- ## 4. Execution Order & Verification 1. **Phase 15A:** Write `scripts/generate-web-stories.mjs` and deploy Google Stories to establish a presence in Google Discover. 2. **Phase 15B:** Build the `/embed/*` routes and Nginx frame allowances, then deploy the Client-Side Quote Card generator. 3. **Phase 15C:** Extend static generation scripts for programmatic comparison pages and directory listicles. 4. **Validation:** Run `npm run preflight:prod` and ensure no external CDN scripts crept in (especially critical for AMP valid HTML). Test embed iFrames in a blank local HTML file.