חיפוש

מספר מילים על התכונה Hreflang באתרים מרובי שפות

hreflang, אליה מתייחסים גם כ rel="alternate" hreflang="x", היא מתודה באתרים מרובי שפות לסימון עמודים הזהים בתוכן שלהם אך מיועדים לשפות או/ו איזורים שונים. התכונה מהווה סיגנל עבור מנועי החיפוש ונועדה בכדי לציין באיזו שפה ולאיזה איזור גיאוגרפי התוכן שלכם מיועד.

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

יש כאלו המתייחסים ל hreflang כתכונה (attribute) וכאלו המתייחסים ל hreflang כתגית (tag). הכוונה זהה בשני המקרים.

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

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

השימוש בתכונה זו מתבצע בצורה הבאה:

<link rel="alternate" href="http://example.com/" hreflang="en-us" />

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

תרחישים בהם יש להשתמש בתכונה Hreflang

הנה שלוש סיטואציות שכיחות בהן עליכם להשתמש בתכונה זו:

  • כאשר ישנו תוכן באותה שפה אך עם ״וריאציות איזוריות״, לדוגמה כזה המיועד עבור בריטניה (en-gb) ועבור ארה״ב (en-us).
  • כאשר קיים תוכן בשפות לגמרי שונות, לדוגמה עברית אנגלית וצרפתית.
  • שילוב של השניים – תוכן המיועד עבור שפות שונות ואיזורים שונים.
התכונה hreflang מהווה סיגנל לגירסאות עמודים מתורגמות

התכונה hreflang מהווה סיגנל לגירסאות עמודים מתורגמות – Credit: contentkingapp.com

תגית Hreflang – יתרונות מבחינת קידום ו SEO

מדוע אנו מדברים על תכונה זו, מהן היתרונות מבחינת קידום האתר? מנקודת המבט של קידום אתרים ו Technical SEO, ישנן שתי סיבות מרכזיות להטמעה של התכונה hreflang:

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

הסיבה השנייה היא ש hreflang מונעת את הבעיה של תוכן כפול או תוכן משוכפל. אם יש ברשותכם תוכן זהה באנגלית בכתובות URL שונות, נאמר עבור בריטניה וארה״ב, השוני ביניהם יכול להיות מזערי כגון מחירים שונים ושימוש במטבע שונה.

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

כיצד להשתמש בתגית Hreflang?

ניתן להודיע לגוגל כי ישנם מספר גרסאות של שפה/שילוב של שפה ואזור לדף בשלוש דרכים:

  • על ידי הוספת תגית HTML ב בראש העמוד, כלומר ב head.
  • באמצעות HTTP Header (מיועד בעיקר לסיטואציות בהם התוכן שאתם מגישים אינו HTML Documents אלא קבצי PDF's וכדומה).
  • באמצעות קובץ ה  XML Sitemap.

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

1. כתגית <link> אותה מוסיפים ל <head> של העמוד

התכונה hreflang נכתבת בצורה הבאה:

<link rel="alternate" href="(url here)" hreflang="x" />

rel="alternate" מציינת למנועי החיפוש כי ישנה גירסה אלטרנטיבית לעמוד זה. התכונה hreflang מציינת את קוד השפה והאיזור של אותו עמוד אלטרנטיבי. ה URL שמגיע בתכונה href מצביע כמובן על הכתובת של אותו עמוד אלטרנטיבי.

על קוד השפה (language code) לעקוב אחר הגדרות ISO 639-1 כאשר נכתב בתכונה. אם אתם מתרגמים עמוד מסויים עבור אותה מדינה, קוד המדינה (country code) אינו נחוץ. אך אם אתם משתמשים בקוד המדינה עליו לעקוב אחר הגדרות ISO 3166-1 alpha-2.

שימו לב כי כאשר אתם כותבים את קוד השפה וקוד המדינה בתכונה hreflang על קוד השפה להופיע לפני קוד המדינה

נראה דוגמה – אם אתם מעוניינים להציג את עמוד הבית של example.com לדוברי אנגלית ודוברי ספרדית בארצות הברית, עליכם להשתמש בתגיות הבאות ב <head> של העמוד:

<link rel="alternate" href="http://www.example.com/" hreflang="en-us" />
<link rel="alternate" href="http://www.example.com/es/" hreflang="es-us" />

אם אתם מעוניינים להציג את עמוד הבית לדוברי ספרדית בונצואלה ומקסיקו, על תגיות ה hreflang להראות בצורה הבאה:

<link rel="alternate" href="http://www.example.com/ve/" hreflang="es-ve" />
<link rel="alternate" href="http://www.example.com/mx/" hreflang="es-mx" />

באפשרותכם להשתמש ב hreflang tags generator ולהעזר בו ליצירת תגיות hreflang נכונות עבור השפות והמדינות השונות.

מכיוון ועל כל וריאציה לקשר לכל אחת מהוריאציות האחרות, במידה ויש לכם המון שפות באתר הטמעה בשיטה זו יכולה להיות קצת בעייתית ובעלת השפעה שלילית על ביצועי האתר שלכם. חשבו על אתר בעל 25 שפות – תאלצו להוסיף עשרים וחמישה תגיות <link> בכל אחד מהעמודים.

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

אם אתם עובדים עם וורדפרס, תוספים כמו Polylang ו WPML מייצרים את תגיות ה hreflang באופן אוטומטי עבור כל גירסת שפה, ללא צורך בהטמעה ידנית.

2. הטמעה באמצעות HTTP Headers

האפשרות השנייה להטמעה היא האמצעות HTTP Headers. השימוש ב HTTP Headers מיועד עבור קבצי PDF לדוגמה ועבור כל תוכן שאינו HTML Document.

השימוש בשיטה הקודמת יעבוד כראוי עבור HTML Documents אך לא עבור סוגי תוכן אחרים מכיוון ולא ניתן להוסיף תגיות <link> בקבצים אלו. בסיטואציה זו נכנס השימוש ב HTTP Headers וזה נראה בצורה הבאה:

Link: <https://es.example.com/document.pdf>;
rel="alternate"; hreflang="es",
<https://en.example.com/document.pdf>;
rel="alternate"; hreflang="en",
<https://de.example.com/document.pdf>;
rel="alternate"; hreflang="de"

הבעיתיות עם הטמעה של HTTP Headers דומה לבעיתיות של השיטה הקודמת וגם זו בעלת השפעה שלילית על ביצועי האתר באתרים עם הרבה מאד שפות.

3. הטמעה באמצעות Sitemap

האפשרות השלישית היא הטמעה של hreflang באמצעות XML Sitemap.  על מנת להוסיף את האנטוציות הנדרשות יש להשתמש בתכונה xhtml:link בקובץ ה XML ואלו נראות בצורה הבאה:

<url>
  <loc>http://www.example.com/uk/</loc> 
  <xhtml:link rel="alternate" hreflang="en" 
 href="http://www.example.com/" /> 
  <xhtml:link rel="alternate" hreflang="en-au" 
 href="http://www.example.com/au/" /> 
  <xhtml:link rel="alternate" hreflang="en-gb" 
 href="http://www.example.com/uk/" />
</url>

היתרון של שימוש ב XML Sitemap הוא שלא נוסף שום html, משקל העמוד אינו גדול יותר ואין שימוש בקריאות נוספות למסד הנתונים. יתרון נוסף לשימוש ב XML Sitemap הוא שהרבה יותר קל יהיה לשנות את כל העמודים באתר שלכם במקרה הצורך באמצעות סקריפטים כאלו ואחרים.

טעויות נפוצות בהטמעת Hreflang

מחקרים מצביעים על כך ש 65-75% מהאתרים הבינלאומיים מכילים שגיאות משמעותיות בהטמעת hreflang. הנה הטעויות הנפוצות ביותר:

היעדר תגיות חזרה (return tags). אנוטציות hreflang חייבות להיות דו-כיווניות. אם עמוד A מצביע לעמוד B כגירסה אלטרנטיבית, עמוד B חייב להצביע חזרה לעמוד A. ללא קישור הדדי, גוגל מתעלמת מה hreflang לחלוטין.

היעדר תגית עצמית (self-referencing). כל עמוד חייב לכלול תגית hreflang שמצביעה אליו עצמו, בנוסף לתגיות המצביעות לכל גירסאות השפה האחרות. דילוג על תגית עצמית עלול לגרום למנועי החיפוש להתעלם מכל אנוטציות ה hreflang בעמוד.

קודי שפה או מדינה שגויים. שימוש ב uk במקום en-gb, או jp במקום ja – שגיאות אלו שוברות את ההטמעה לחלוטין. תמיד אמתו את הקודים מול תקני ISO 639-1 ו ISO 3166-1.

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

שילוב שיטות הטמעה. בחרו שיטה אחת והישארו איתה. הצבת תגיות hreflang גם ב <head> של ה HTML וגם ב XML Sitemap יוצרת התנגשויות שמבלבלות את הזחלנים.

שימוש בכתובות יחסיות. תגיות hreflang דורשות כתובות אבסולוטיות (כאלו שמתחילות ב https://). כתובות יחסיות פשוט יתעלמו.

אספקטים טכניים נוספים של הטמעת Hreflang

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

hreflang x-default

x-default היא תכונה מיוחדת עבור hreflang המגדירה לאן יופנה המשתמש במידה ואף אחת מהשפות שהגדרתם בתגיות ה hreflang אינן תואמות את הגדרות שפת הדפדפן של המשתמש. באלמנט מסוג <link> זה נראה כך:

<link rel="alternate" href="http://example.com/" hreflang="x-default" />

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

hreflang וכתובות קנוניות (Canonical URL's)

על rel="canonical" וhreflang="x" לעבוד יחד. לכל שפה דרושה כתובת קנונית המצביעה לעצמה. הדוגמה הבאה יכולה להסביר את העניין, וזאת בהנחה ואנו נמצאים בעמוד הבית של example.com:

<link rel="canonical" href="http://example.com/">
<link rel="alternate" href="http://example.com/" hreflang="en" />
<link rel="alternate" href="http://example.com/en-gb/" hreflang="en-gb" />
<link rel="alternate" href="http://example.com/en-au/" hreflang="en-au" />

במידה והיינו נמצאים בעמוד ב en-gb הדבר היחיד שהיה משתנה הוא הכתובת הקנונית כבדוגמה הבאה:

<link rel="canonical" href="http://example.com/en-gb/">
<link rel="alternate" href="http://example.com/" hreflang="en" />
<link rel="alternate" href="http://example.com/en-gb/" hreflang="en-gb" />
<link rel="alternate" href="http://example.com/en-au/" hreflang="en-au" />

אל תטעו ותקבעו כי הכתובת הקנונית בעמוד ה en-gb תצביע ל http://example.com מכיוון וזה ישבור את ההטמעה. יש לשים לב כי הקישור ב hreflang יהיה זהה לכתובת הקנונית של כל URL מכיוון ועל אלו לעבוד יחד.

בקישור הבא תמצאו מדריך מקיף על כתובות קנוניות והתגית הקנונית.

שאלות נפוצות

שאלות נפוצות בנושא הטמעת hreflang:

מהי התכונה hreflang ומתי צריך להשתמש בה?
התכונה hreflang היא אנוטציית HTML שמציינת למנועי החיפוש איזו גירסת שפה ואיזור של עמוד להציג למשתמשים. יש להשתמש בה כאשר לאתר שלכם יש עמודים עם תוכן זהה בשפות שונות, או באותה שפה אך עבור מדינות שונות (למשל en-us לעומת en-gb).
האם נדרשת תגית hreflang עצמית (self-referencing)?
כן. כל עמוד בסט ה hreflang חייב לכלול תגית שמצביעה אליו עצמו, בנוסף לתגיות עבור כל גירסאות השפה האחרות. ללא תגית עצמית, מנועי החיפוש עלולים להתעלם מכלל אנוטציות ה hreflang באותו עמוד.
מהו hreflang x-default?
x-default הוא ערך hreflang מיוחד שמציין את עמוד ברירת המחדל - העמוד שגוגל צריכה להציג כאשר השפה או האיזור של המשתמש לא תואמים אף אחת מתגיות ה hreflang שהגדרתם. בדרך כלל הוא מצביע לעמוד השפה הראשית שלכם. גוגל ממליצה תמיד לכלול אותו.
האם ניתן להשתמש במספר שיטות הטמעה של hreflang בו-זמנית?
לא. יש להשתמש בשיטה אחת בלבד - תגיות HTML מסוג <link>, כותרות HTTP, או XML Sitemap. שילוב שיטות יוצר סיגנלים סותרים ועלול לגרום למנועי החיפוש לפרש את אנוטציות ה hreflang שלכם בצורה שגויה או להתעלם מהן לחלוטין.
האם hreflang מבצעת הפניה אוטומטית לשפה אחרת?
לא. התכונה hreflang משפיעה רק על איזו גירסת עמוד מופיעה בתוצאות החיפוש. היא לא מבצעת הפניה אוטומטית. אם אתם רוצים להפנות מבקרים על בסיס שפה או מיקום, תצטרכו להטמיע זאת בנפרד באמצעות זיהוי מיקום גיאוגרפי בצד השרת או זיהוי שפת הדפדפן.
איך hreflang ותגיות קנוניות עובדות יחד?
כל גירסת שפה של עמוד צריכה תגית rel="canonical" שמצביעה אל עצמה, ותגיות hreflang שמצביעות לכל הגירסאות (כולל עצמה). הכתובת הקנונית וכתובת ה hreflang של כל עמוד חייבות להיות זהות. אם הן מתנגשות - למשל, אם הכתובת הקנונית בעמוד en-gb מצביעה לעמוד ה en - ההטמעה נשברת.
איך מוסיפים תגיות hreflang בוורדפרס?
הדרך הפשוטה ביותר היא להשתמש בתוסף רב-לשוני כמו Polylang או WPML, ששניהם מייצרים תגיות hreflang באופן אוטומטי עבור כל גירסת שפה. אם אתם צריכים שליטה רבה יותר, תוספים ייעודיים כמו Hreflang Manager מאפשרים הגדרת תגיות באופן ידני. ניתן גם להוסיף אותן באופן תכנותי דרך ה hook של wp_head.

לסיכום

בואו נסכם את הנקודות החשובות והמרכזיות לשימוש בתכונה:

  • כאשר את מוסיפים תכונה זו בעמוד מסויים הצביעו גם לעמוד הנוכחי וגם לגירסאות המתורגמות.
  • ודאו כי הרפרנס הוא דו כיווני – כלומר אם סיפקתם רפרנס לגירסה מתורגמת של עמוד מסוים, על עמוד זה להצביע בחזרה לעמוד המקורי.
  • וודאו כי אתם מגדירים את קוד השפה והאיזור בצורה הנכונה.
  • קבעו תמיד כתובת ברירת מחדל באמצעות hreflang="x-default".
  • על התכונה hreflang והכתובת הקנונית להיות זהות.
  • השתמשו בכתובות אבסולוטיות כאשר אתם מגדירים את התכונה.
  • השתמשו אך ורק במתודה אחת משלושת אפשרויות ההטמעה של התכונה.
  • בחרו מבנה URL ברור (תתי-תיקיות, תתי-דומיינים, או ccTLD) עבור גירסאות השפה שלכם.

הנה מספר כלים שיכולים לעזור בתהליך ההטמעה:

התכונה hreflang היא רק חלק אחד מהפאזל של SEO בינלאומי. אם אתם מתמודדים גם עם תוכן מחולק לעמודים במספר שפות, כדאי לעיין במדריך על שימוש בתגיות rel=next ו rel=prev עבור עימוד.
מקווה שמדריך זה שפך מעט אור על הנושא ואולי אף יעזור לכם בפעם הבאה שתבנו אתר מרובה שפות.

דיון ותגובות
5 תגובות  ]
  • רוב 26 אוגוסט 2018, 8:48

    זה לא משהו שיוצר שפות, נכון? האם זה רק מסביר לדפדפן ולגוגל מה השפה שהעמוד מוצג?

    • רועי יוסף 27 אוגוסט 2018, 21:33

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

      • רוב 28 אוגוסט 2018, 9:08

        תודה על התשובה. יצא לך לשמוע או להשתמש בתוסף של Hyyan WooCommerce Polylang Integration?
        https://wordpress.org/plugins/woo-poly-integration/
        אני צריך להקים אתר דו לשוני עם חנות דו לשונית וזה נראה כמו פתרון טוב במקום WPML והתוסף הנוסף לתרגום חנויות.

        • רועי יוסף 28 אוגוסט 2018, 16:23

          לא יצא לי, אבל זה נראה אחלה פלאגין ממבט ראשוני…

          • רוב 28 אוגוסט 2018, 16:45

            תודה, אני חושב לבדוק אותו בקשר של רמות מלאי.
            התוסף שעובד עם WPML לא ממש חברותי

השאירו תגובה

הוסיפו קוד באמצעות הכפתורים מטה. למשל, בכדי להוסיף PHP לחצו על הכפתור PHP והוסיפו את הקוד בתוך השורטקוד. מצאתם שגיאה בפוסט? עדכנו אותנו...

Savvy WordPress Development official logo