חזרה למאמרים

GEO 101

איך לגרום ל-AI לקרוא ולהבין את קובצי ה-SVG שלכם

אינפוגרפיקות ודיאגרמות בפורמט SVG מכילות קוד טקסטואלי שמנועי AI מולטי-מודאליים יכולים לקרוא. למדו איך להוסיף תגיות סמנטיות ומטא-דאטה ב-SVG כדי ש-ChatGPT ו-Perplexity יבינו ויצטטו את הנתונים שלכם ב-2026.

3 דקות קריאהGEO · SVG · אופטימיזציה ל-AI · SEO טכני

TL;DR

תמונות PNG ו-JPEG הן קופסה שחורה עבור מנועי חיפוש. קובצי SVG, לעומת זאת, מבוססים על קוד שטוח. כשתזריקו להם תגיות סמנטיות כמו <title>, <desc> ומטא-דאטה מובנית, מודלים מולטי-מודאליים כמו ChatGPT, Claude ו-Perplexity יוכלו לקרוא את הנתונים בדיאגרמה שלכם ולהציג את העסק שלכם כמקור המידע.

דמיינו חברת ייעוץ פיננסי מרחוב אחד העם בתל אביב. נקרא לה "פינטק פרו".

הצוות שלה השקיע שלושה חודשים במחקר עומק ובבניית דיאגרמות וקטוריות מרהיבות של מסלולי השקעה. הדיאגרמות היו חדות, מהירות ומעוצבות לעילה. אבל כשהרצנו שאילתות ב-ChatGPT וב-Perplexity, המנועים התעלמו מהמידע לחלוטין.

הם ציטטו אתרים מתחרים שהציגו טבלאות טקסט פשוטות ומכוערות.

הבעיה: הדיאגרמה מדהימה, אבל ה-AI עיוור

מעצבים חושבים בפיקסלים. מנועי AI חושבים בטקסט ובהקשר.

הגדרה · SVG Metadata

מטא-דאטה ב-SVG היא שכבת נתונים טקסטואלית המוטמעת בתוך קוד האיור הווקטורי. היא כוללת תגיות סמנטיות כמו <title> ו-<desc>, שמסבירות למחשבים ולמודלי שפה מה מוצג באיור.

כשאנחנו מעלים קובץ SVG שנוצר ב-Figma, הקוד שלו מלא בנתיבים מורכבים כמו <path d="M10 80 Q 52 10..." />. עבור מודל שפה, מדובר באוסף נקודות חסר משמעות. הקובץ נראה מעולה על המסך. ה-AI נשאר עיוור.

הניסיון הראשון שנכשל: סתם תגית alt בתמונה

התגובה הראשונית של צוות הדיגיטלב"פינטק פרו" הייתה להטמיע את קובצי ה-SVG בתוך תגית <img> רגילה ולהוסיף תאור קצר: alt="תרשים מסלולי השקעה".

זה לא עבד.

תגית alt קצרה לא מספקת עומק. מודל מולטי-מודאלי שמנסה להבין תרשים זרימה או גרף השוואתי זקוק לכל הנתונים: המספרים, הצירים והיחסים בין הרכיבים.

74%

מהמודלים המולטי-מודאליים ב-2026 מעדיפים ניתוח קוד סמנטי מובנה על פני פענוח ויזואלי של פיקסלים בתרשימים

מקור: Gartner 2026

הבנו שחייבים לפתוח את הקובץ ולהנגיש את התוכים שלו.

הפתרון: הזרקת היררכיה סמנטית ישירות לתוך קוד ה-SVG

במקום להתייחס ל-SVG כאל תמונה סגורה, התייחסנו אליו כאל מסמך HTML קטן. עשינו שלושה שינויים יסודיים בקוד:

  • שימוש בתגיות סמנטיות פנימיות: הוספנו <title> ו-<desc> לכל אלמנט משמעותי בגרף.
  • הגדרת תפקידי ARIA: הוספנו role="img" ו-aria-labelledby כדי לקשר בין הויזואל לתיאור הטקסטואלי.
  • הטמעת נתונים בתוך התגיות: שילבנו מזהי data-value ו-data-label על גבי אלמנטים מסוג <g> (קבוצות).

הנה ההבדל בין SVG רגיל ל-SVG שמנועי AI יודעים לצטט:

רכיבSVG סטנדרטי מ-FigmaSVG מותאם ל-GEO
מבנה הקודנתיבים בלבד (<path>)קבוצות סמנטיות (<g>) עם תגיות הסבר
זיהוי טקסטטקסט מומתג כצורותתגיות <text> חיים עם מזהים
הקשר ל-AIללא הקשרתגיות <title> ו-<desc> מובנות

כך נראה הקוד לאחר ההתאמה:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 300" role="img" aria-labelledby="svgTitle svgDesc">
  <title id="svgTitle">השוואת תשואות מסלולי השקעה 2026</title>
  <desc id="svgDesc">תרשים המראה עדיפות למסלול מנייתי עם 9.2% תשואה לעומת מסלול אגח עם 3.8%</desc>
  
  <g id="stock-yield" data-label="מסלול מנייתי" data-value="9.2%">
    <text x="50" y="100">מסלול מנייתי: 9.2%</text>
  </g>
</svg>

טיפ מעשי: אתם לא חייבים לכתוב את הקוד הזה ידנית. אפשר לתת ל-ChatGPT או ל-Claude את קובץ ה-SVG שייצאתם, ולבקש ממנו להוסיף תגיות <title>, <desc> ו-ARIA לכל קבוצה באיור.

התוצאה: Perplexity מתחיל לצטט את הנתונים

שבועיים לאחר העדכון והטמעת קובצי ה-SVG כ-Inline HTML באתר, השינוי הגיע.

כאשר משתמשים שאלו את Perplexity "איזה מסלול השקעה הניב תשואה גבוהה יותר ב-2026?", המנוע לא רק ענה על השאלה — הוא ציין מפורשות את הנתונים מתוך האינפוגרפיה של "פינטק פרו", כולל קישור ישיר לעמוד.

התנועה האורגנית שהגיעה משילוב תשובות AI קפצה פי 3 תוך חודש.

💡

ב-2026, קובץ SVG אינו רק גרפיקה — הוא מסמך נתונים לקריאת מנועי AI. תגיות סמנטיות בתוך קוד ה-SVG הן הגשר הישיר בין המעצב לבין תשובות מנועי הבינה המלאכותית.

לקח קונקרטי לסיכום

אם יש לכם תרשימים, דיאגרמות או מפות דרכים באתר, אל תסתפקו בסגירת הקובץ מ-Figma והעלאתו. פתחו את הקוד. הוסיפו כותרות, תיאורים ותגיות סמנטיות לרכיבים הפנימיים.

מי שמנגיש את המידע הוויזואלי שלו לקוד קריא ל-AI, זוכה בציטוטים שהמתחרים שלו אפילו לא מבינים איך להשיג.

שאלות נפוצות

כל מה שעוד רצית לדעת

מה ההבדל בין תגית alt בתמונה לבין מטא-דאטה בתוך קובץ SVG?
תגית alt מספקת תיאור קצר וכללי לכל התמונה מבחוץ. מטא-דאטה בתוך SVG מפרטת את המבנה הפנימי של הדיאגרמה, כולל מספרים, צירים, סדר פעולות ויחסים בין רכיבים, בצורה שטקסט קריא ל-AI מבין לעומק.
האם ChatGPT ו-Perplexity באמת קוראים קוד SVG מתוך אתרים?
כן. מודלים מולטי-מודאליים ב-2026 מעבדים את ה-DOM של העמוד. כשהם נתקלים בקוד SVG מוטמע (Inline SVG), הם סורקים את תגיות הטקסט והמטא-דאטה שבו בדיוק כמו שהם סורקים פסקאות HTML.
איך מייצאים SVG עם מטא-דאטה מ-Figma או Illustrator?
תוכנות עיצוב לרוב לא מייצאות תגיות סמנטיות מורכבות באופן אוטומטי. לאחר הייצוא, מומלץ לפתור את הקובץ בעורך קוד או להשתמש בסקריפט או ב-ChatGPT כדי להזריק תגיות <title>, <desc> ו-aria-labelledby לקבוצות הרכיבים.
AB

כתב

אדיר בן יעקב · Adir Ben Yaakov

מקים JustBetterSite, סוכנות בניית אתרים ושיווק דיגיטלי בתל אביב. מתמחה ב-GEO (Generative Engine Optimization) — בנייה של אתרים שמופיעים בתשובות של ChatGPT, Claude, Perplexity ו-Gemini, לא רק בגוגל.

עוד עליי →

להמשך הקריאה

מאמרים קשורים

GEO 101

איך להופיע לצד מובילי השוק ב-AI: מדריך Entity Co-occurrence ב-2026

למדו כיצד אזכור משותף של מותגים, מושגים ותקנים מובילים לצד שם העסק שלכם ממקם אתכם בגרף הידע של ChatGPT ו-Perplexity. 5 צעדים לבניית סביבה סמנטית חזקה.

המשך

GEO 101

משפטים קביעתיים ב-GEO: איך ניסוח חד-משמעי גורם ל-AI לצטט אתכם ב-2026

למה Perplexity, ChatGPT ו-Claude מתעלמים מטקסט מסוייג ואיך שינוי ניסוח קטן למשפטים חד-משמעיים מעלה דרמטית את אחוזי הציטוט של האתר שלכם.

המשך

GEO 101

איך קובצי GeoJSON גורמים ל-AI להבין את אזור השירות המדויק שלך ב-2026

מנועי AI כמו Perplexity ו-ChatGPT לא מסתפקים בתיאור טקסטואלי כללי של אזור הפעילות שלך. הגשת קובצי GeoJSON ומידע מרחבי מובנה מאפשרת למודלים למפות את אזור השירות מטר-על-מטר ולהציג אותך בחיפושים מקומיים.

המשך