דלג לתוכן הראשי

מחולל תגיות Meta ו-Open Graph בחינם

צור תגיות SEO meta, Open Graph וסימון Twitter Card עם תצוגה מקדימה חיה של Google ושיתוף חברתי. העתק ישירות לראש הדף שלך.

פועל לא-מקוון לאחר טעינה
0 · 0/580px
0 · 0/920px

הכי טוב: 1200×630 px, עד 5 MB, וקישור https:// מלא.

לכלול גם
כותרת 0/580px (מטרה 30–60)תיאור 0/920px (מטרה 70–160)

תצוגה מקדימה בחיפוש Google

example.com
כותרת העמוד שלך מופיעה כאן
תיאור ה-meta שלך מופיע כאן. הפוך אותו למשכנע כדי לשפר את שיעור ההקלקה מתוצאות החיפוש.

הרוחבים הם הערכה: Google חותך לפי פיקסלים ולא לפי תווים.

תצוגה מקדימה של כרטיס חברתי

תצוגה מקדימה og:image
example.com
כותרת עמוד
תיאור עמוד
הדבק ב-<head>

מלא לפחות שדה אחד למעלה כדי ליצור תגי מטא.

שימושים נפוצים

  • תגי Meta לפוסטים בבלוגצור כותרת, תיאור ותגים חברתיים כדי שהמאמרים שלך ייראו נהדרים כשמשתפים.
  • תגי Meta לעמודי מוצריםהפוך עמודי מוצרים להיות יפים לשיתוף וקלים לקריאה בתוצאות החיפוש.
  • תגי Meta לעמודי נחיתהשלוט בדיוק כיצד עמודי הנחיתה של הקמפיין שלך מופיעים כשהם משותפים ומחופשים.
  • צור תגי Meta לכל אפליקציית ובצור במהירות את הסט המלא של תגי Meta ראש לעמוד או אתר חדש.
  • תיקון סקירות קישור מכוערותאל תשאיר את הקישורים שלך מוצגים כ-URL בלבד — הוסף תגים היוצרים כרטיסי תצוגה עתירי תכונות.

כיצד זה עובד

כל הרכבת התגיות ופענוח הראש קורים ישירות בדפדפן שלך — ללא שרת מעורב. הכלי משתמש ב-useMemo של React כדי לבנות באופן ריאקטיבי מחרוזות HTML וב-DOMParser API המקורי של הדפדפן כדי לקרוא סימון דף קיים עבור תכונת הייבוא/ביקורת.

  1. 1
    קלט טופס מניע הרכבה חיה
    תוך כדי הקלדה, hook של useMemo מרכיב מיד מחדש את בלוק התגית המלא — כותרת, תיאור meta, מאפייני Open Graph, ומאפייני Twitter Card — בורח תווים מיוחדים (&, <, >, ") כך שהפלט בטוח להדבקה ישירות ל-HTML.
  2. 2
    אימות כתובת דרך בנאי ה-URL של הדפדפן
    כל שדה כתובת (כתובת דף, תמונת חברתית) מאומת באמצעות בנאי ה-URL המובנה של הדפדפן. רק כתובות http:// או https:// תקינות עם שמות מארח מנוקדים עוברות; ערכים לא תקינים חוסמים את כפתור ההעתקה ומציגים שגיאת inline.
  3. 3
    ייבוא: DOMParser קורא סימון ראש קיים
    אם אתה מדביק HTML של <head> קיים לביקורת, הכלי מריץ אותו דרך DOMParser במצב אינרטי — שום סקריפט לא רץ ואין בקשות רשת. הוא אז שואל את המסמך המפוענח עבור סלקטורי meta ידועים (og:title, twitter:description, קישור canonical וכו') וממלא מראש את שדות הטופס עם מה שהוא מוצא.
  4. 4
    תצוגות מקדימות חיות של Google וכרטיסי חברתיים
    הכלי מציג תוצאת חיפוש Google מעוצבת ותצוגה מקדימה של כרטיס Open Graph בזמן אמת באמצעות אותו מצב טופס, כך שתוכל לראות בדיוק איך הכותרת והתיאור ייחתכו לפני שתעתיק את הפלט.

כלים קשורים

שאלות נפוצות