במדריך זה אציג הסבר מפורט לפיצ’ר Custom Extraction בתכנת הזחילה Screaming Frog. חילוץ בהתאמה אישית הוא פיצ’ר המאפשר לאסוף נתונים מתוך ה- HTML או מתוך כתובת האתר. החילוץ מיושם על HTML סטטי מעמודים המחזירים קוד תגובה 2XX. הזחלן של תכנת Screaming Frog מאפשר כמה דרכים לחילוץ המידע:

  1. XPath
  2. CSS
  3. Regex

לפני שאמשיך הלאה, חשוב לי רגע להרחיב מה משמעות פעולת החילוץ. כל מי שקורא את המדריך הזה וודאי יודע ש- Screaming Frog מאפשר זחילה והצגה נוחה למשתמש של תגיות כמו H1, Title, Description וכדומה. גם תגיות אלו חולצו מקבצי HTML אך מאחר שאלו תגיות פופולאריות מפתחי התכנה הנגישו את כל המידע על תגיות הללו בצורה של עמודות. מפתחי התכנה, למעשה, חילצו והנגישו את התגיות הפופולאריות למשתמשים. אמנם, הרבה פעמים אתם, כמקדמי אתרים, נדרשים לגשת לתגיות או פרטי מידע מאד ספציפים בקבצי ה- HTML שלא הונגשו על-ידי מפתחי התכנה.  הנה כמה דוגמאות שתוכלו לבצע רק באמצעות שימוש ב- XPath:

  • חילוץ כל תגיות ה- H3
  • חילוץ התוכן של תגיות HREFLANG
  • חילוץ סוג הסכמה שבה עמוד מסויים משתמש
  • חילוץ תוכן סכמת ה- Open Graph בעמוד מסוים
  • חילוץ מייל או פרטי יצירת קשר מרשימה ארוכה של אתרים שיש ברשותכם (Scraping)

אפרט על כל אחד משלוש השפות בהמשך, על מנת שתוכלו להבין יותר טוב באיזו דרך להשתמש ובאילו מצבים. כפי שמסבירים ב- Screaming Frog בעת השימוש ב- XPath או ב- CSS כדי לאסוף מידע מה- HTML, תוכלו לבחור איזה מידע בדיוק תהיו מעוניינים לחלץ:

  • Extract HTML Element – מחלץ את האלמנט הנבחר ואת התוכן הפנימי של ה- HTML שלו
  • Extract Inner HTML – מחלץ את התוכן הפנימי של ה- HTML עבור האלמנט הנבחר. במידה שהאלמנט הנבחר מכיל אלמנטים נוספים של HTML, אז הם גם יכללו ויחולצו.
  • Extract Text – התוכן הטקסטואלי של האלמנט הנבחר והתוכן הטקסטואלי של כל סאב-אלמנט
  • Function Value – התוצאה של הפונקציה בה נעשה שימוש, לדוגמה: (count(//h1 יחזיר את מספר תגיות ה- H1 בעמוד.

 

custom extraction all extractors

 

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

custom extraction tab

 

כך תוכלו לבחור אילו extractors להציג בעמוד:

custom extractors

 

אז בואו נתחיל…

 

 תוכן עניינים

1.1 XPath

     1.2 מה זה? ומתי תשתמשו ב- XPath ?

     1.3 דוגמאות חילוץ XPath

2. CSS

     2.1 מה זה? ומתי תשתמשו ב- CSS ?

     2.3 דוגמאות חילוץ CSS

3. RegEx

     3.1 מה זה? ומתי תשתמשו ב- RegEx ?

     3.2 דוגמאות חילוץ Regex

4. איך כל זה עוזר לכם לייעל את התהליך בקידום אתרים?

5. סיכום

 

1. XPath

1.1 מה זה ואיך תשתמשו ב- XPath?

XPath היא שפת שאילתות המיועדת לבחירת חלקים מתוך מסמך XML. בנוסף, XPath משמשת לחישוב ערכים (כמו מחרוזות, מספרים או ערכים בוליאניים) מתוך תוכן המופיע במסמך XML. שפת XPath הוגדרה על-ידי World Wide Consortium) W3C), הארגון הבינלאומי הראשי לסטנדרטיזציה של World Wide Web, שנוסד ועד היום מנוהל על-ידי Tim Berners-Lee. שפת XPath מבוססת על ייצוג-עץ של מסמכי XML, ומאפשר לנווט בתוך העץ דרך בחירת הענפיו השונים.

1.1 דוגמאות חילוץ XPath?

Screaming Frog תציג באופן דיפולטיבי את כותרות/תגיות H1, H2, אמנם היא לא תציג לכם את כותרת H3. הנה הדרך להציג את כל כותרות ה- H3 עם Custom Extraction:

//h3

h3 custom extraction

 

הסבר ביטוי
לספור כמה פעמים כל התגיות ב- body, כלומר באזר הטקסט הראשי, מכילות את המילה שאתם מחפשים count(//body//*[contains(text() ,”word”)])
הצגת כל תגיות כותרת רמה 3 //h3
הצגת רק המופע הראשון של כותרת רמה 3 /descendant::h3[1]
הצגת 10 המופעים הראשונים של כותרת רמה 3 /descendant::h3[position() >= 0 and position() <= 10]
הצגת התוכן של כל תגיות ה- Hreflang //*[@hreflang]
הצגת סוג הסכמה המופיע בעמוד //*[@itemtype]/@itemtype
הצגת הכותרת של סכמת Open Graph של פייסבוק //meta[starts-with(@property, ‘og:title’)]/@content
הצגת אנוטציות מובייל של אתר //link[contains(@media, ‘640’) and @href]/@href
חילוץ כתובת אימייל יצירת קשר מעמוד מסוים //a[starts-with(@href, ‘mailto’)]
הצגת כתובת AMP של העמוד //head/link[@rel=’amphtml’]/@href
מציאת הלינק השלישי בעמוד  (//a)[3]

 

2. CSS Path

2.1 מה זה? ומתי תשתמשו ב- CSS Path ?

המשמעות של הקיצור CSS היא Cascading Style Sheets, או בעברית – גיליונות סגנון מדורגים. CSS היא שפה המתארת כיצד האלמנטים ב- HTML מוצגים על המסך. CSS Selectors הן תבניות המשמשות לבחירת אלמנטים עיצוביים. ממליץ לכם להתנסות בטסטר של W3School כדי להבין על מה כל סלקטור משפיע.

 

 

2. דוגמאות חילוץ CSS Path

הנה דוגמה הממחישה כיצד ניתן לחלץ את כל האנקורים שיש להם title attribute:

דוגמה לשימוש ב- CSS SELECTOR

דוגמה ל- CSS PATH

 

סלקטור דוגמא הסבר
.class .intro מחזיר את כל האלמנטים שהקלאס שלהם שווה intro
#id #firstname מחזיר את האלמנט שה- id שלו שווה firstname
* * מחזיר את כל האלמנטים
a a[title] מחזיר רק אנקורים שיש להם title attribute
[attribute] [target] מחזיר את כל האלמנטים עם target attribute
[attribute=value] [target=_blank] מחזיר את כל האלמנטים עם target=”_blank”
[attribute~=value] [title~=flower] מחזיר את כל האלמנטים שה- title attribute שלהם מכיל את המילה flower
[attribute|=value] [lang|=en] מחזיר את כל האלמנטים שה-  lang attribute מתחיל באותיות en
[attribute^=value] a[href^=”https”] מחזיר את כל הקישורים בתגית a המתחילים ב- https
[attribute$=value] a[href$=”.pdf”] מחזיר קישורים המופילים לקובץ pdf

 

3. RegEx

3.1 מה זה RegEx? ומתי תשתמשו בזה?

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

ביטוי רגולרי הוא רצף של תווים שהמאפיין העיקרי שלו הוא היותו כולל תווי-מטא (Meta characters), לצד תווים רגילים (כמו אותיות רגילות דוגמת A או B). תווים אלו כוללים למשל נקודה (.), לוכסן אחורי (\), משולש עילי (^) ועוד, אשר מאפשרים לבצע בעמוד HTML פעולות שונות של טיפול במידע, ובעיקר חיפוש והחלפה. תווי המטא הללו נבדלים לפי הגדרה מתווים רגילים (כמו האותיות A ו-B); בעוד שתווים רגילים מסמלים את עצמם (למשל, האות א’ היא תו שמסמל כמובן את האות א’ עצמה), תווי-מטא מסמלים משהו אחר שאינו הם עצמם (למשל, משולש עילי משקף את הערך “תחילת השורה”) ולכן נהוג להגיד על תווי-מטא שהם מייצגים משהו אחר מאשר עצמם. ממליץ לכם להתנסות ב- RegEx tester – RegExr.

 

3.2 דוגמאות חילוץ RegEx

הנה כמה דוגמאות שימושיות של RegEx:

ביטוי הסבר
(?!<a[^>]*?>)(click here)(?![^<]*?<\/a>)
חשוב! מחלץ את כל כתובות שבהן יופיע הביטוי “click here” שלא כקישור (כך ניתן לייצר רשימת עמודים שבהן יש ביטוי שחשוב לכם לקדם ולא קישרתם אותו לעמוד הרלוונטי). אגב, על-אף שכאשר תחפשו ביטוי בעברית, וסקרימינג פרוג תציג את הטקסט בג’יבריש – זה עדיין עובד מצויין עם עברית בדו”ח הסופי.
(?:[a-z0-9!#$%&’*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&’*+/=?^_`{|}~-]+)*|”(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*”)@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\]) חילוץ כל המיילים בעמוד
/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/ חילוץ כתובת URL
[“‘](UA-.*?)[“‘] חילוץ ID של גוגל אנליטיקס
(“reviewCount”: “.*?”) חילוץ מספר הביקורות מסכמת JSON-LD
http(?:s?):\/\/(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-\_]*)(&(amp;)?‌​[\w\?‌​=]*)? חילוץ סרטון יוטיוב מעמוד
</?[hH]3[^>]*> חילוץ תוכן כותרות H3
<a.*?</a> חילוץ תגית קישור a href
/(?:https?:\/\/)?(?:www\.)?facebook\.com\/(?:(?:\w)*#!\/)?(?:pages\/)?(?:[\w\-]*\/)*([\w\-\.]*)/ חילוץ ID של עמוד פייסבוק מכתובת URL נתונה
<b.*?>(?<p>.*?)</b> חילוץ מילים מודגשות בעמוד
/<title[^>]*>([^<]+)<\/title>/im חילוץ טייטלים

 

4. איך כל זה עוזר בתהליך של קידום אתרים?

המטרה של שימוש ב- XPath, CSS Selector ו – RegEx היא בראש ובראשונה חסכון בזמן. במקום לסרוק עמודים שלמים ולבצע הכל ידנית על ידי שימוש בפילטרים של אקסל, תבניות השפה הללו מאפשרות Scraping בצורה הרבה יותר מתקדמת. בעת כתיבת המאמר נתקלתי בטענה מעניינת לפיה יש מתכנתים הנמנעים במכוון משפות אלו דווקא בשל העובדה שעיקרן הוא שימוש במטא-תווים – אותם תווים המייצגים משמעות אחרת מאשר הם עצמם. במילים אחרות, תו המייצג משהו אחר מאשר עצמו הוא בהגדרה קשה יותר לקריאה. המוח נאלץ לעשות מספר עיבודים למידע כדי להבין את המשמעות של הביטוי. אמנם, בעולם של קידום אתרים, המטרות לשימוש בביטויים כדוגמת RegEx הן מאד ממוקדות, ובעיקרן חילוץ תגיות מאד ספציפיות לשם אופטימיזציה. לכן, שימוש בשפות אלו לא אמור להרתיע מקדמי אתרים כלל וכלל.

 

5. סיכום

במאמר זה ניסיתי להציג את הפונקציה הכל-כך חשובה של Extraction לטובת ייעול תהליך האופטימיזציה של מקדמי אתרים. Sreaming Frog הוא אם-כן כלי אחד, אך יש כלים נוספים המאפשרים לעשות שימוש בביטויים שהוצגו לעיל. לדוגמה – SEOToolsforExcel מאפשר שימוש בפונציות הללו כמו:

  • =RegexpFind()
  • =RegexpFindOnUrl()
  • =XPathOnUrl()
  • =RegexpIsMatch()
  • =RegexpReplace()

כמובן, שיש לזכור שגבול המאמר מאד תחום וברור; הוא נועד לשמש כמבוא לאותן שפות, XPath, CSS Selector ו – RegEx, ואולי אפילו להציע Cheat Sheet של כמה ביטויים חיוניים לחילוץ תגיות מסוימות. אני ממליץ בחום לכל מקדם אתרים להרחיב את הידע שלו בנושאים הללו, והשתדלתי לאורך המאמר להפנות למקורות רלוונטיים. אני מזמין אתכם להגיב למטה ולכתוב באילו ביטויים אתם משתמשים לחילוץ תגיות? איזו מבין השפות יותר נוחה עבורכם? האם אתם עושים שימוש ב- RegEx גם באנליטיקס? או כל תובנה מעניינת שעולה לכם בנידון.

אם אתם חושבים שהמאמר יעזור לחבריכם – זה הזמן לשתף את הידע ולתייג אותם…

אודות המחבר

SEO Expert at 888 Holdings

עופר לנגר, בוגר תואר שני באוניברסיטת ת"א בפקולטה לתקשורת, כיום משמש בתפקיד SEO Expert בחברת 888 אחזקות, כמי שאמון על אסטרטגיית ה- SEO של הארגון. בעבר היה VP of SEO Services ב- Angora Media Group. במסגרת תפקידו כמנהל תחום קידום אורגני, היה אחראי על קידום תאגידים כמו תנובה, דואר ישראל, תאגיד התקשורת בינת, מיטב דש, אמריקן לייזר, השף הלבן ועוד.