אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » פתרונות ומאמרים על פיתוח אינטרנט » העולם המופלא של ה-rel

העולם המופלא של ה-rel

רן בר-זיק יולי 26, 2020 7:07 am אין תגובות

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

האמת היא שמאוד מאוד קל, בעולם המופלא של ריאקט, vue, אנגולר או בעולם המהמם של Node.js, פייתון ובושות אבטחת המידע, לשכוח או להזניח את ה-HTML וחבל. כי יש בתחום הזה מהפיכות לא קטנות וידע שחשוב לדעת. במאמר הזה אנו נכתוב על rel בתגית anchor (שזה <a>) שהוא חלק משמעותי מ-HTML סמנטי.

למה לעזאזל חשוב להכיר את rel בתגיות anchor? כמה סיבות:

  1. SEO – כשאנו משתמשים ב-HTML סמנטי אנו מסייעים למנוע החיפוש להבין מה קורה באתר וכשהוא מבין מה קורה באתר זה עוזר לנו. כדאי לזכור ש-SEO לא אומר שאנחנו ״עובדים״ על מנוע החיפוש ויש SEO חיובי – אם אני עוזר לגוגל או למנועי חיפוש אחרים להבין מה קורה באתר שלי – הם יביאו לי גולשים טובים יותר. זה גם ימנע ענישה של מנוע החיפוש.
  2. נגישות – יש קוראים ודפדפנים שמשתמשים בתכונות האלו כדי לסייע למי שמשתמש בהם לקבל חווית שימוש יותר טובה.
  3. שימושיות – חלק מה-rel משנים את התנהגות הדפדפן לטובה (או לרעה) או יעשו כך בעתיד.

איך משתמשים? הכי פשוט שיש:

<a href="whatever.com" rel="ugc noopener">Link</a

ב-MDN יש רשימה אלפביתית מסודרת של כל ה-rel שאפשר להצמיד. פה אני אפרט את היותר מעניינים.

UGC – ראשי תבות של user generated content. אנו שמים את זה לקישורים בדפים שיש בהם reviews, תגובות, פורומים וכל מיני דברים שאנחנו לא יצרנו באתר שלנו (או באתר אחר) אלא הגולשים יצרו. למה? כדי לאותת שמדובר במשהו שאלוהים יודע מה המקור שלו. זה יכול להיות הערה של משתמש בתגובות או קונספירציה על הרפטליאנים ממרכז כדור הארץ. אם יש לכם משתמש איכותי, אתם יכולים להעיף את ה-UGC. אבל זה שימושי במיוחד לאור הנטייה של מנועי חיפוש/פייסבוק/טוויטר וחברותיהן להתחיל להעניש על שטויות. כך תוכלו להמנע מעונשים או הורדה באלגוריתם הקדוש רק כי איזה מתנגד חיסונים/ספאמר אחר שתל קישורים בכל מיני תגובות.

sponsored – לא צריך לומר, נכון? עבור קישורים ששילמו לנו כסף לשים אותם. זה לא ב-MDN אבל כן נדרש על ידי גוגל כתחליף ל nofollow. מצד אחד – מעולה כדי לא לחטוף עונשים מגוגל ומהצד השני עלול להעלים את הקישורים בגלל תוכנות anti-ad אגרסיביות.

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

noreferrer – מומלץ לשים את זה בכל קישור חיצוני (אפשר גם לשים את זה ב-Header של האתר, אבל זה סיפור אחר). וזה ימנע מהאתר החיצוני לדעת מאיפה אתם מגיעים – כלומר לא יהיה לו referrer בבקשה. למה זה חשוב? כי זה חושף את המשתמשים שלכם ואתכם. אם יש לכם מערכת אינטרה והמשתמש נכנס אליה, למשל בקישור my-inta.com/very/secret/path ולוחץ על קישור לאתר חיצוני, בעל האתר החיצוני יראה מאיפה הוא מגיע. נכון, security by obscurity זה לא רעיון טוב, אבל זה לא מזיק וגם מגן על פרטיות המשתמשים. כי אם יש לכם אתר לממכר דברים מביכים, לא בטוח שבא לכם שהמשתמשים שלוחצים על קישור מתוכו ייחשפו.

noopener – פותר את הבעיה שלאתר שהקישור מוביל אליו יש גישה אל window.Opener – תיארתי את הבעיה פה. מומלץ מאוד. גם פה יש Header שיחסוך לכם להוסיף את ה-rel לכל קישור.

prev\next – אולטרא שימושי בכל מיני ״אשפים״ (איזה תרגום נורא ל wizards)

author – כשרוצים לקשר לדף שמספר על הכותב של המאמר.

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
HTML

השארת תגובה

ביטול

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

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

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

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

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד