כאשר אתם בונים את האתר הג'ומלאי שלכם או למעשה אתר מכל סוג שהוא, וודאו על התוכן שלו והקוד (ה-HTML-י) נקי ככל האפשר, השתמשו ב-HTML סמנטי, וודאו שהוא תקין. אם אתם, כבני אנוש, תוכלו להבין בקלות את קוד ה-HTML שלכם אז סביר להניח שזה נכון גם לגבי מנועי החיפוש.

יש כמה עקרונות שכדאי לכם לישם:

• תמיד תכתבו את קוד ה-CSS וה-Javascript בקבצים חיצוניים. ניתן לאפשר למספר קבצים להכלל בתוך הקוד לצורך שיפור ביצועים, אבל זה צריך להיות היוצא מן הכלל.
• בנו את התוכן שלכם עם תגי HTML חוקיים. לכן את תשתמשו בתגי span בכל מקום, אלא עשו שימוש בתגים מתקדמים של HTML במקום השימוש בתגים אלו. לדוגמא, אם אתם נדרשים לציטוט, על תשתמשו ב'span, עם סוג פונט לכסוני, אלא עשו שימוש בתג "q"ת במיוחד עם אתם בונים אתר המבוסס על HTML5, אתם יכולים להשתמש בתגים רבים שיעזרו לכם ליצור מבנה טוב של התוכן שלכם. במקום להשתמש בתג "div'" עם התכונה "id", אתם יכולים להשתמש ב-<header>, <footer>, <aside> ועוד רבים אחרים. אם תעשו שימוש נכון בתגים, תעזרו למנועי החיפוש להפריד בין התוכן העיקרי בעמוד לבין כל העמוד.
• שימוש ב-micro-data (יוסבר במאמר שיתורגם בקרוב).

יצירת תוכן מובנה במאמרים שלכם

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

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

אפשרות אחת: תיקון ההגדרה בג'ומלה

אם תעשו זאת נכון, תוכלו להגיע למצב שבו הכותרת תקבל את התג <h1>:

• במנהל המאמרים (Article Manager) גשו לאפשרויות (Options) וסמנו את הפרמטר הצגת כותרת (Show Title) ב-לא (No).
• במקום זאת התחילו כל מאמר שלכם עם התג <h1>. זה אומר שאתם צרכים להקליד את אותה כותרת פעמיים גם בכותרת המאמר וגם בגוף המאמר, אבל באתרים קטנים זה לא גורם לאי נוחות מרובה.

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

אפשרות שניה: הרחבות

יש מספר הרחבות אשר אפשר להשתמש בהם ובעזרתם להגדיר את הכותרת שלכם שתשנה את התג <h2> לתג הרצוי <h1>. דוגמא פופולארית היא הרחבה בשם Header Tags. היא עובדת היטב, החסרון היחידי שנאלצתם להתקין הרחבה נוספת.

אפשרות שלישית: השתמשו בכתיבה עוקפת (override) בתבנית

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

במערכת הניהול, גשו ל-הרחבות > ניהול תבניות -< תבניות (Extensions > Template Manager > Templates) וביחרו בתבנית הפעילה. לאחר מכן לכו לתויין 'יצירת כתיבה עוקפת' (Create Overrides), הקליקו על com_content (אפשרויות ניסתרות יוצגו עתה) והקליקו על 'מאמר (Article). חלון עורך-קוד יפתח. עתה חפשו את האיזור הבא (סביב שורה 28, בערך):

<div class="page-header">
    <h2>
        <?php echo $this->escape($this->params->get('page_heading')); ?>
    </h2>
</div>

כפי שניתן לראות התג <h2> נמצא בשימוש. אם תחליפו אותו ואת התג הסוגר שלו עם התג <h1> הכותרות שלכם יוצגו בצורה נכונה.

שימו לב שאתם יכולים לקבל את אותה תוצאה גם בג'ומלה 2.5 (אפשרות שקבילה גם בג'ומלה 3) על ידי העתקה של הקובץ default.php שנמצא ב-components\com_content\views\article\tmpl אל המקום הבא - templates\YOUR_TEMPLATE\html\com_content\article (אם יש צורך בכך צרו את הסיפריות html ו-com_content בסיפרית התבנית שלכם) בצעו את השינוי שהוגדר למעלה באותה צורה כאן.

לאחר שהתג <h1> מופיע בכל עמוד של האתר שלכם, הבטיחו את המבנה של התוכן שלכם. השתמשו בתו <p> בגוף התוכן, ועבור כותרות משנה השתמשו בתו <h2> (רצוי לא יותר משלש עד ארבע פעמים בעמוד) ובתגי <h3>.

כמו כן, במקרים מסוימים השתמשו בתגים נוספים כגון <q>, <b>, <i> עם יש צורך בכך. הבטיחו את השימוש נעשה למטרות של מבנה העמוד ולא לצורה שלו!

מאמר זה הינו תרגום של מאמר שנכתב על ידי Simon Kloostra. ניתן לקרוא את המקור כאן