קידום אורגני S.E.O לאתרי וורדפרס ואלמנטור פרו-מדריך מקיף

קידום אורגני S.E.O לאתרי וורדפרס ואלמנטור פרו
קידום אורגני S.E.O לאתרי וורדפרס ואלמנטור פרו

5 תגי HTML העוטפים את דפי האתר וחשובים לקידום בגוגל.

מבנה נכון של האתר וההגדרה נכונה של תגי HTML מסייע לגוגל להבין את מבנה האתר.
לכן ישנה חשיבות רבה להגדרה נכונה של כל אזור באתר לפי התגים הבאים:
<footer> <main> <header>
<section> <nav>
ערכתנו לכם כאן מדריך מקיף כולל צילומי מסך איך להגדיר את התגים הנכונים באתר וגם סרטון קצר על ההגדרות תגי html.

נגן וידאו אודות קידום אורגני S.E.O לאתרי וורדפרס ואלמנטור פרו

<header>

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

<main>

החלק העוטף בתוכו את האלמנטים בשונים והוא ממוקם. בין ההידר לפוטר

<section>

אזור בתוך ה-main וכמובן שיכולים להיות כמה כאלה.

<footer>

החלק התחתון האתר בדרך כלל קיים בכל האתר

את כל האלמנטים הללו עוטף תג ה-<body>
יש תג נוסף שהוא מיועד לסיידבר סרגל צידי והתג שלו הוא:<aside>

תרשים מבנה העמודים:

<body>

<header>

<nav>

<main>

<section>

<section>

<section>

<footer>

היכן באלמנטור נגדיר את התגים הנכונים?

1. ההידר <header>

איך מגדירים באלמנטור את ההידר?
1. מסמנים את הקונטיינר של ההידר
2. בפריסה (תפריט של אלמנטור) בוחרים באפשריות נוספות.
3. בוחרים ב-תגית html
4. לוחצים על החץ לפתיחת תפריט ובוחרים : header.

הסבר היכן באלמנטור מגדירים תג header
הסבר היכן באלמנטור מגדירים תג header

בדיקת ההגדרה הנכונה
1. ניגשים להידר ומציגים אותו בחלון חדש.
2. לוחצים F12 או לחילופין קליק ימני בעכבר ובחלונית שנפתחת בוחרים בדיקה.
3. בוחרים ב-חץ האפור ומסמנים את האלמנט הרצוי לבדיקה במקרה שלנו ההידר.
4. בודקים את הקוד.

בדיקת הקוד האם ההידר מוגדר נכון
בדיקת הקוד האם ההידר מוגדר נכון

2. בהידר לרוב נרצה לשים תפריט ניווט באתר <nav>

מבחינת קידום עדיף לא להתחכם ולבחור בוידג'ט המיועד לכך שנקרא: תפריט וורדפרס 

וידגט של אלמנטור שנקרא תפריט וורדפרס
הסבר היכן באלמנטור מגדירים תג nav
הסבר היכן באלמנטור מגדירים תג nav

בדיקת ההגדרה הנכונה
1. ניגשים להידר ומציגים אותו בחלון חדש.
2. לוחצים F12 או לחילופין קליק ימני בעכבר ובחלונית שנפתחת בוחרים בדיקה.
3. בוחרים ב-חץ האפור ומסמנים את האלמנט של התפריט שבנינו.
4. בודקים את הקוד.

הקוד צריך להיות בנוי כך שהוא מוגדר כתפריט navigator וכרשימה
<ul>
<li>
<li>
</ul>

בדיקת הקוד האם התפריט מוגדר נכון
בדיקת הקוד האם התפריט מוגדר נכון

3. פוטר <footer>

איך מגדירים באלמנטור את הפוטר?
1. מסמנים את הקונטיינר של הפוטר
2. בפריסה (תפריט של אלמנטור) בוחרים באפשריות נוספות.
3. בוחרים ב-תגית html
4. לוחצים על החץ לפתיחת תפריט ובוחרים : footer.

הסבר היכן באלמנטור מגדירים תג footer
הסבר היכן באלמנטור מגדירים תג footer

בדיקת ההגדרה הנכונה
1. ניגשים לפוטר ומציגים אותו בחלון חדש.
2. לוחצים F12 או לחילופין קליק ימני בעכבר ובחלונית שנפתחת בוחרים בדיקה.
3. בוחרים ב-חץ האפור ומסמנים את האלמנט הרצוי לבדיקה במקרה שלנו הפוטר.
4. בודקים את הקוד.

בדיקת הקוד האם התפריט מוגדר נכון
בדיקת הקוד האם התפריט מוגדר נכון

4. הגדרת אזור<section>

איך מגדירים באלמנטור אזור?
טיפ: בזמן פתיחת הקונטיינר בצעו את הפקודה באופן קבוע.
1. מסמנים את הקונטיינר הרצוי
2. בפריסה (תפריט של אלמנטור) בוחרים באפשריות נוספות.
3. בוחרים ב-תגית html
4. לוחצים על החץ לפתיחת תפריט ובוחרים : section

הסבר היכן באלמנטור מגדירים תג section
הסבר היכן באלמנטור מגדירים תג section
  • בדיקת ההגדרה הנכונה
    ניגשים לעמוד הרצוי ומציגים אותו בחלון חדש.
  • לוחצים F12 או לחילופין קליק ימני בעכבר ובחלונית שנפתחת בוחרים בדיקה.
  1. בוחרים ב-חץ האפור
  2. מסמנים את האזור הרצוי לבדיקה. 
  3. בודקים את הקוד.
בדיקת הקוד האם ה אזור מוגדר נכון
בדיקת הקוד האם ה אזור מוגדר נכון

מבנה של פוסט ותגיות HTML

2 תגים נוספים הם:
 <article>

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

  <aside>
עמודה הנמצאת בצידי העמוד ומוצגת לאורך האתר, או בחלקים ממנו.

תרשים מבנה פוסט יחיד

<body>

<header>

<nav>

<aside>

<article>

<footer>

5. הגדרת עמודה<aside>

איך מגדירים באלמנטור סיידבר sidbar?
טיפ: בזמן פתיחת הקונטיינר בצעו את הפקודה באופן קבוע.
1. מסמנים את העמודה הרצויה
2. בפריסה (תפריט של אלמנטור) בוחרים באפשריות נוספות.
3. בוחרים ב-תגית html
4. לוחצים על החץ לפתיחת תפריט ובוחרים : aside

הסבר היכן באלמנטור מגדירים תג aside
הסבר היכן באלמנטור מגדירים תג aside
  • בדיקת ההגדרה הנכונה
    ניגשים לעמוד הרצוי ומציגים אותו בחלון חדש.
  • לוחצים F12 או לחילופין קליק ימני בעכבר ובחלונית שנפתחת בוחרים בדיקה.
  1. בוחרים ב-חץ האפור
  2. מסמנים את האזור הרצוי לבדיקה. 
  3. בודקים את הקוד.
בדיקת הקוד האם התג ASIDE מוגדר נכון
בדיקת הקוד האם התג ASIDE מוגדר נכון

6. הגדרת עמודה <article>

איך מגדירים באלמנטור סיידבר sidbar?
טיפ: בזמן פתיחת הקונטיינר בצעו את הפקודה באופן קבוע.
1. מסמנים את העמודה הרצויה
2. בפריסה (תפריט של אלמנטור) בוחרים באפשריות נוספות.
3. בוחרים ב-תגית html
4. לוחצים על החץ לפתיחת תפריט ובוחרים : aside

הסבר היכן באלמנטור מגדירים תג article tag html
הסבר היכן באלמנטור מגדירים תג article tag html
  • בדיקת ההגדרה הנכונה
    ניגשים לעמוד הרצוי ומציגים אותו בחלון חדש.
  • לוחצים F12 או לחילופין קליק ימני בעכבר ובחלונית שנפתחת בוחרים בדיקה.
  1. בוחרים ב-חץ האפור
  2. מסמנים את האזור הרצוי לבדיקה. 
  3. בודקים את הקוד.
בדיקת הקוד האם התג article מוגדר נכון
בדיקת הקוד האם התג article מוגדר נכון
דילוג לתוכן