arsam
e9cd12dda6
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
70 lines
5.4 KiB
Markdown
70 lines
5.4 KiB
Markdown
# 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 `<html amp>` specification, using valid `<amp-story>` tags and local, non-CDN assets.
|
|
|
|
### 1.2 Frontend & SEO Artifacts
|
|
- **Sitemap Integration:** Update `scripts/generate-seo.mjs` to include a new `<urlset>` specifically for `/stories/*` in the main `sitemap.xml`.
|
|
- **Article Linkage:** In `generate-article-pages.mjs`, inject `<link rel="amphtml" href="https://www.teknav.ir/stories/:slug">` into the `<head>` 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 `<canvas>` 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 `<a href="https://www.teknav.ir..." target="_blank">` 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.
|