בניית FinZone
מ-א עד ת

מה זה FinZone

FinZone (finzone.co.il) הוא אתר חינוך פיננסי ישראלי בעברית, המיועד לקהל רחב — משפחות, משקיעים ואנשי עסקים. האתר משלב כתבות עומק, ניתוחים מקצועיים וכלים פרקטיים בתחומים:

• נדל"ן ומשכנתאות בישראל
• שוק ההון והשקעות
• אפליקציות AI וטכנולוגיה
• ניהול עסקי
• ניהול משפחתי ותקציב
• טכנולוגיה ודיגיטל

מטרות עסקיות

ה-Stack הטכנולוגי

נקודת הפתיחה

בתחילה היה אתר סטטי פשוט — HTML קבוע ללא מערכת ניהול תוכן. כל עדכון כתבה דרש עריכה ידנית של קוד. זה לא הסתדר עם הצורך לפרסם כתבות בתדירות גבוהה.

ההחלטה הראשונה הייתה לא ללכת על WordPress — כדי לשמור על מהירות, שליטה מלאה בקוד, ועלויות אחסון נמוכות.

ההחלטות הגדולות מהשלב הראשון

מפת הקבצים בשרת

תפקיד כל קובץ

ארכיטקטורה: SPA עם Hash Routing

האתר פועל כ-Single Page Application. כל הניווט מתבצע דרך שינוי ה-URL hash, ללא טעינה מחדש של הדף:

finzone.co.il/           → ראשי (Home)
finzone.co.il/#article/SLUG → קריאת כתבה
finzone.co.il/#category/ai   → כתבות לפי קטגוריה

ה-JavaScript מאזין לשינויי hash ומציג את התצוגה המתאימה, תוך עדכון SEO meta tags דינמי.

טעינת כתבות מהשרת

בראש ה-index.php, PHP קורא את articles.json ומכניס אותו ל-JavaScript:

<?php
$articles_file = __DIR__ . '/articles.json';
$articles_json = '[]';
if (file_exists($articles_file)) {
    $raw = file_get_contents($articles_file);
    $test = json_decode($raw);
    if (is_array($test)) $articles_json = $raw;
}
?>

<script>
const serverArts = <?php echo $articles_json; ?>;
allArts = Array.isArray(serverArts) ? serverArts : [];
</script>

כך הכתבות זמינות לכל מבקר, ולא רק לדפדפן של המנהל.

הרכיבים הראשיים של האתר

• Topbar — רצועת ידיעות גוללת אוטומטית בחלק העליון
• Header + Nav — לוגו, ניווט לפי קטגוריות, כפתור "דבר איתנו"
• Hero Section — באנר ראשי עם כתבת הדגשה הכי חדשה
• Categories Bar — 6 קטגוריות עם אייקונים וצבעים ייחודיים
• כרטיסי כתבות — רשת כתבות עם תמונה, קטגוריה, תאריך, תקציר
• תצוגת כתבה מלאה — עמוד כתבה עם שיתוף WhatsApp/Facebook
• TradingView Widget — גרף שוק חי
• חנות ספרים — (בהמתנה לאינטגרציית Cardcom)
• ניוזלטר — טופס הרשמה לרב מסר
• צ'אטבוט לידים — שאלון שמאסף שם, טלפון ותחום עניין ושולח לוואטסאפ
• ויג'ט נגישות — שינוי גודל פונט, ניגודיות, סמן גדול
• עמודים משפטיים — פרטיות, תנאים, כתב ויתור, נגישות, צור קשר
• Cookie Consent — לפי תיקון 13 לחוק הגנת הפרטיות הישראלי
• Footer — קישורים, כתב ויתור, זכויות יוצרים 2026

6 הקטגוריות ומזהיהן

כניסה ואבטחה

הפאנל מוגן בסיסמה דרך PHP session. הניסיון לגשת ל-admin.php ללא התחברות מציג מסך login. לאחר כניסה מוצלחת — ה-session נשמר לכל הבקשות.

הכרטיסיות בפאנל

עורך הכתבות — פיצ'רים מיוחדים

• שורת כלים צפה (sticky) — נשארת גלויה בזמן גלילה
• בוחר צבעים — לסימון טקסט בצבע
• ספירת תווים Meta — Meta Title: 50-60 תווים, Meta Description: 150-160 תווים
• מצב HTML גולמי — toggle בין עורך ויזואלי לקוד HTML
• תצוגה מקדימה — רואים את הכתבה כפי שתיראה לגולש
• שמירה אוטומטית — AJAX שמירה ל-articles.json ללא רענון
• Slug אוטומטי — נוצר מהכותרת, אפשר לערוך ידנית

מבנה כתבה ב-articles.json

{
  "id": "1717000000000",
  "title": "כותרת הכתבה",
  "metaTitle": "Meta Title (50-60 תווים)",
  "metaDescription": "Meta Description (150-160 תווים)",
  "keywords": "מילת מפתח1, מילת מפתח2",
  "excerpt": "תקציר קצר של הכתבה...",
  "content": "<h2>כותרת</h2><p>תוכן...</p>",
  "category": "realestate",
  "image": "https://images.unsplash.com/...",
  "imageAlt": "תיאור תמונה בעברית",
  "author": "צוות FinZone",
  "slug": "article-slug-here",
  "publishDate": "2026-06-08",
  "published": true,
  "createdAt": 1717000000000,
  "updatedAt": 1717000000000
}

הרעיון הכללי

במקום לכתוב כתבות ידנית, מזינים נושא ותוך 30-60 שניות מקבלים כתבה מלאה בעברית עם כל שדות SEO, תמונה מ-Unsplash, ועיצוב HTML מוכן לפרסום.

שני קריאות API — הפתרון לבעיית ה-JSON

הבעיה המרכזית: Claude מחזיר HTML ארוך עם שורות חדשות בתוך JSON — זה שובר את ה-JSON parsing לחלוטין.

קריאה 1: META

// שדות: title, metaTitle, metaDescription, 
// keywords, excerpt, slug, imageQuery, imageAlt, author
// דרישה: JSON נקי, כל ערך בשורה אחת (no newlines)

'messages' => [
  ['role' => 'user',      'content' => $promptMeta],
  ['role' => 'assistant', 'content' => '{']  // ← force JSON start
]

קריאה 2: CONTENT

// מחזיר HTML גולמי בלבד — לא JSON
// h2/h3/p/ul/li/strong

'messages' => [
  ['role' => 'user', 'content' => $promptContent]
]
// תוצאה: HTML ישיר, ללא עטיפת JSON

תיקוני SEO אוטומטיים בשרת

גם אם Claude מחזיר ערכים לא מדויקים — PHP מתקן אוטומטית:

// Meta Title: חייב 50-60 תווים
if ($mtLen > 60) $article['metaTitle'] = mb_substr($mt, 0, 57) . '...';
elseif ($mtLen < 50) $article['metaTitle'] = $mt . ' | ' . $kw;

// Meta Description: חייב 150-160 תווים  
if ($mdLen > 160) $article['metaDescription'] = mb_substr($md, 0, 157) . '...';
elseif ($mdLen < 150) $article['metaDescription'] = $md . ' קרא עוד באתר FinZone.';

// כותרת: חייבת להכיל מילת מפתח ראשית
if (mb_stripos($article['title'], $kw) === false)
    $article['title'] = $kw . ' — ' . $article['title'];

Unsplash — תמונה אוטומטית

לאחר קבלת ה-imageQuery מ-Claude (2-3 מילים באנגלית), מתבצעת קריאה ל-Unsplash API:

GET https://api.unsplash.com/photos/random
  ?query={imageQuery}
  &orientation=landscape
  &content_filter=high
Authorization: Client-ID {UNSPLASH_KEY}

מוחזרת תמונה אקראית רלוונטית מ-Unsplash (חינמית לשימוש מסחרי).

הגדרות המחולל

מה נבנה ברמת עמוד הבית

• Title Tag מותאם ל-60 תווים עם מילות מפתח ראשיות
• Meta Description 150-160 תווים עם CTA
• Meta Keywords — מילות מפתח בעברית
• Open Graph — og:title, og:description, og:image, og:type, og:locale
• Twitter Card — summary_large_image
• Canonical URL — נוצר דינמית לפי ה-hash
• lang="he" dir="rtl" — הצהרת שפה ל-Google
• robots: index, follow
• hreflang — לעברית ישראלית

Schema Markup — Structured Data

בנינו 3 סוגי Schema שמשפרים את הופעת האתר בגוגל:

// Article Schema — מתעדכן דינמית בכל כתבה
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": art.title,
  "description": art.excerpt,
  "image": art.image,
  "author": {"@type": "Person", "name": art.author},
  "publisher": {"@type": "Organization", "name": "FinZone"},
  "datePublished": art.publishDate,
  "keywords": art.keywords
}

עדכון SEO דינמי בכתבות

כל פתיחת כתבה מעדכנת את כל meta tags בזמן אמת:

function updateSEO(art) {
  document.title = art.title + ' | FinZone';
  sm('description', art.metaDescription);
  sm('keywords', art.keywords);
  sm('og:title', art.title);
  sm('og:description', art.metaDescription);
  sm('og:image', art.image);
  sm('og:type', 'article');
  sm('twitter:title', art.title);
  // canonical URL
  document.getElementById('canonical-link').href = window.location.href;
  // Schema
  ld({...articleSchema...}, 'ld-article');
  ld({...breadcrumbSchema...}, 'ld-bc');
}

Google Search Console

למה Sitemap דינמי?

Sitemap סטטי מיושן ברגע שמפרסמים כתבה חדשה. sitemap.php קורא ב-runtime את articles.json ובונה XML מעודכן עם כל הכתבות המפורסמות.

הלוגיקה

<?php
header('Content-Type: application/xml; charset=utf-8');

$articles = json_decode(file_get_contents('articles.json'), true);
$published = array_filter($articles, fn($a) => !empty($a['published']));

// עמוד הבית — priority 1.0
echo "<url>
  <loc>https://finzone.co.il/</loc>
  <changefreq>daily</changefreq>
  <priority>1.0</priority>
</url>";

// כל כתבה מפורסמת — priority 0.8
foreach ($published as $article) {
  echo "<url>
    <loc>https://finzone.co.il/#article/{$article['slug']}</loc>
    <lastmod>{$article['date']}</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.8</priority>
  </url>";
}
?>

Priority לפי סוג עמוד

סקירת כל ה-APIs

פרטי ה-API Keys

בעיה 1: localStorage לא עבד לאורחים

בעיה 2: JSON Parsing נשבר בגלל HTML

בעיה 3: .htaccess גרם לקריסת האתר

בעיה 4: Meta Title/Description לא בטווח

בעיה 5: כותרת ללא מילת מפתח

בעיה 6: טעינת כתבות ב-admin לא עדכנית

פרטי האחסון

העלאת קבצים לשרת

הגדרות PHP שחשוב לדעת

// בראש ai-generate.php
@set_time_limit(180);  // 3 דקות — מספיק לשתי קריאות API

// CURL הגדרות
CURLOPT_TIMEOUT        => 120   // 2 דקות לקריאה
CURLOPT_CONNECTTIMEOUT => 30    // 30 שניות לחיבור

מסלול A: כתבה עם AI (30-60 שניות)

מסלול B: כתבה ידנית

סטטוס פיצ'רים

הצעדים הבאים