המדריך המוחלט ל-SEO ב-WordPress

הפניות מחדש של תת-דומיין - עם או בלי www?

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

אם דילגת על השלב הזה, תצטרך לעבוד עם הקובץ htaccess. יש תוספים כמו WP HTACCESS EDITOR שעושים את עריכת הקובץ קלה יותר, אבל אני ממליץ שאם אתה לא בטוח במה שאתה עושה, תבקש עזרה, כי הקובץ הזה יסודי לפעולת האתר.

אם בכל זאת תחליט לעבוד עם האפשרות הזו, זה הקוד שעליך להוסיף.

הפניית דומיין בלי www לעם www

RewriteEngine On

RewriteCond %{HTTP_HOST} ^yourdomain.com [NC]

RewriteRule ^(.)$ http://www.yourdomain.com/$1 [L,R=301]*

הפניית דומיין עם www לבלי www

RewriteEngine on RewriteCond %{HTTP_HOST} ^www.yourdomain.com RewriteRule ^(.*)$ http://yourdomain.com/$1 [R=301,L] עם זאת, אני רוצה להדגיש שוב שעריכת הקובץ htaccess היא משהו שאתה צריך להיות מאוד ברור לגביו, אז אם אתה הולך לערוך אותו, בצע גיבוי קודם.

התקנת WordPress: צעדים ראשונים באופטימיזציה

קודם כול, אתה צריך להבין איך Google עובדת ושכל פעולה שאתה לוקח צריכה - ככל האפשר - להפוך את העבודה של Googlebot לקלה יותר כשהוא מבקר באתר שלנו.

למה אני אומר את זה?

כי הנקודה הזו היא אחת הטעויות הנפוצות ביותר שמשתמשים עושים - לא רק של WordPress, אלא של כל מעצב אינטרנט או webmaster.

אם התוכן שלך לא גמור, אל תאפשר ל-Googlebot לגשת אליו, כי תאט את התהליך של דירוג ה-URLs שלך.

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

אינדקס WordPress: מתי עליי לאנדקס את האתר שלי?

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

אפשרות לחסום גישת רובוטים

ה"איסור" הזה ניתן לעשות גם מהקובץ Robots.txt הפופולרי. אם אתה משתמש עם יותר ניסיון בפיתוח אינטרנט, דרך חשבון FTP שנוצר או סופק על ידי ספק האחסון שלך, תוכל להוסיף את הקובץ הזה לנתיב הראשי שבו האתר שלך מאוחסן.

הקובץ Robots.txt יכול להיווצר פשוט עם Notepad (Windows) או TextEdit (Mac), אבל זכור שהוא חייב להיות קובץ טקסט; שבו נוסיף את שתי השורות האלה:

*User-agent: **

Disallow: / ברשימה הזו נוכל לראות את קראולרי Google הפופולריים ביותר (User-Agents)

user agents של Google שונים

בקוד שלנו, אם נציין User-agent: * אנחנו אומרים שאנחנו מתייחסים לכל הבוטים - אף אחד מהם לא יוכל לגשת לאתר שלנו. אנחנו יכולים גם להתייחס לבוט יחיד (Googlebot, Googlebot-Video וכו') אבל בנקודה הזו אני לא ממליץ על זה. אז, כולם חסומים.

מבנה URL ו-URLs ידידותיים

ברגע שהבהרנו מהו הדומיין המועדף שלנו וחסמנו גישה לרובוטים, אנחנו הולכים לעבור למבנה URL.

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

WordPress מספק לך כברירת מחדל אפשרויות כדי שתוכל לבחור את זו שתבנה את התוכן של האתר שלך הכי טוב. הבחירה הזו תלויה בפרויקט ובכל אדם; כל האפשרויות אפשריות אם הפרויקט דורש זאת.

תן לי להסביר:

ברגע שאנחנו בתוך דשבורד WordPress נלך ל-Settings > Permalinks

ונמצא את המסך הזה:

מבנה URL עם permalinks

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

מהם URLs ידידותיים?

אנחנו קוראים URLs ידידותיים לאותם URLs שהם מובנים למשתמש ומספקים, במבט אחד, פרשנות סמנטית של תוכן ה-URL.

• ›URL ידידותי: /blog/
• ›URL לא ידידותי או דינמי:* https://seocrawl.com/?ref=13535?sfas*

ה-URL הראשון נותן לך מידע על התוכן שאתה הולך למצוא, השני לא, אבל זה לא אומר ש-Amazon עושה דברים לא נכון - אלא, היא משתמשת בפרמטרי בקרה שונים כדי לזהות את ה-URLs שלה באופן פנימי.

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

ברגע שההבהרה הזו נעשתה ומסתכלים על האפשרויות, יש לנו 3 סוגים של URLs:

• ›עם תאריך
• ›עם שם הרשומה או הפוסט
• ›ניתנים להתאמה אישית דרך משתנים.

Permalinks ב-WordPress

URLs עם תאריך

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

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

• ›https://elpais.com/tecnologia/2019/11/25/actualidad/1574676898_992149.html

El País משתמשת בסוג מעורב של URL, מכיוון שיש לה מידע סמנטי כמו שם קטגוריה, תאריך ותת-קטגוריה ומסיימת במזהה חדשות.

עיתונים אחרים, בנוסף למזהה החדשות, גם כוללים מונחים מכותרת החדשות ב-URL.

• ›https://www.levante-emv.com/sucesos/2019/12/12/marta-calvo-asesino-serie-valencia/1955157.html

בעת עבודה עם תחביר URL, יש אפשרות מאוד מעניינת שלעיתים קרובות מסוננת: stop words.

Stop words הן מונחים שאנחנו רוצים להימנע מהם בעת יצירת URL חדש. הפעולה הזו נעשית דרך תכנות - במקרה שלנו של WordPress, דרך PHP.

דוגמאות ל-stop words יהיו: תוויות, כינויים, מספרים וכו'.

ל-Rank Math יש אפשרות שמאפשרת לך להימנע מהסוג הזה של מונח.

הסרת stop words בעת יצירת URLs

URL עם שם הרשומה או הדף

אפשרות פשוטה ובשימוש רחב. ה-URLs שלנו ייווצרו עם שם הרשומה או עם ה-slug ששונה.

ה-Slug או permalink ניתן לעריכה ברשומות, אז אם אנחנו לא רוצים את האפשרות האוטומטית ש-WordPress נותנת לנו, נשנה ידנית את ה-URL (רק את הרשומה, לא את הדומיין).

URL מותאם אישית באמצעות משתנים

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

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

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

https://seocrawl.com/%category%/%year%/%postname%/%post_id%/

ארכיטקטורת מידע: קטגוריות, דפים אבא ותגים

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

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

בניית תוכן היא חלק יסודי של SEO כדי לעבוד על קישור והקשר של תוכן דומה - מה שמוכר כ-content clusters.

לזה אנחנו יכולים לעבוד עם:

• ›קטגוריות
• ›תגים
• ›רשומות (פוסטים)
• ›דפים
• ›תתי-דפים

קטגוריות, תגים ורשומות (פוסטים)

יש שתי דרכים לקבץ באופן אוטומטי רשומות ב-WordPress: עם קטגוריות ועם תגים.

מתי אנחנו משתמשים בקטגוריות ומתי אנחנו משתמשים בתגים?

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

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

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

נשתמש בתגים אם בתוך נושאים ספציפיים יש כמות גדולה של תוכן שיש לו משהו במשותף.

אתן לך דוגמה:

ספורט יהיה קטגוריה, אבל Cristiano Ronaldo יכול להיות תג - עם זאת, עליך לשאול את עצמך: כמה סיפורים אני הולך לייצר על Cristiano Ronaldo?

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

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

Breadcrumb או נתיב ניווט

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

אז הפוסט שלנו ייראה כך:

• ›URL : sitename.com/category/category-name/post-name
• ›Breadcrumb: בית > שם קטגוריה > שם פוסט

יש תוספים להוסיף breadcrumbs אבל כולם מושכים ממבנה ה-DB שיש לנו ב-WordPress; עד עצם היום הזה אני לא מכיר תוסף שנותן לך גמישות בהגדרה שלו.

כפי שכבר הבחנת, ה-URL של פוסט עם קטגוריה מציג את המונח CATEGORY.

זה מגיע במלאי עם WordPress, כלומר תמצא את זה בכל WordPress והאפשרות שניתנת לך ב-permalinks רק מאפשרת לך לשנות שם אחד לאחר (קטגוריה למונח אחר).

יש לנו כמה אפשרויות לפתור את זה - שוב Rank Math נותנת לנו את האפשרות:

ויש גם תוספים שעוזרים לך לבטל את המונח הזה ולהשאיר URL נקי יותר.

תוספים להסרת Category מה-URL של WordPress

דף אבא ותת-דף

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

ההבדל הוא בעיקר בגמישות העיצוב שדף נותן לך וקטגוריה לא. גם קטגוריות וגם פוסטים מוכתבים על ידי WordPress Theme או template, אבל דפים יכולים להיות מעוצבים לפי טעמך בעזרת Page Builders (תוסף או תוספת להתאים אישית את האתר באמצעות בלוקים).

מתי עלינו להשתמש בדף ובתת-דף?

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

• ›Landing Page גנרי: עיצוב
• ›Landing Page ספציפי: עיצוב אינטרנט, עיצוב גרפי, עיצוב מוצר, עיצוב תעשייתי...

דוגמת URL:

sitename.com/design/web/

sitename.com/design/graphic/

sitename.com/design/product/

Breadcrumb: בית > עיצוב > עיצוב אינטרנט

כדי לעשות זאת, מעורך המאמרים (פוסט או רשומה) אנחנו צריכים להפעיל את פאנל Page Attributes, שנמצא בראש.

עכשיו, בצד הימני של הדף שלנו, נוסף מודול עם תכונות הדף.

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

תוסף SEO ל-WordPress: Rank Math, Yoast...

ברגע שיש לנו ברור את מבנה ה-URL וחלק מארכיטקטורת המידע, רציתי לכלול בנקודה הזו את התקנת תוסף ה-SEO (Rank Math, Yoast, All In One SEO...). נכון לעכשיו התוספים האלה עושים את החיים שלך קלים יותר מבחינת SEO, מכיוון שיש להם את הכלים החיוניים לעבוד על SEO בתוכן שלך.

ברגע שהתוסף הזה מותקן, זה הזמן להוסיף את קוד המעקב והאימות של האתר שאנחנו רוצים לעקוב. ככלי analytics, אין כלים טובים יותר מ-Google Analytics ו-Search Console.

קוד מעקב או קוד Google Analytics

כפי שתראה ב-WordPress - אם עוד לא - תמיד יש כמה דרכים לעשות תהליך.

כדי להכניס את קוד המעקב או ה-ID של מעקב Analytics נוכל לעשות זאת דרך קוד ב-HTML של הדף עצמו, דרך התבנית שבדרך כלל מספקת מקום להכניס קוד ב-Header או עם תוסף.

אם אתה לא יודע איך להשיג את ה-ID של מעקב Analytics, מדף התמיכה של Google הם מראים לך את הדרך https://support.google.com/sites/answer/97459?hl=en

ל-Google יש תוסף משלה ל-WordPress (Site Kit Google), שבו נוכל להחזיק את החלק השלם של analytics.

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

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

אימות ה-WordPress שלנו ב-Search Console

יש דרכים שונות לאמת דומיין ב-Search Console, אני הולך לספר לך על 2: אחת עם קובץ האימות של Google ואחת עם תוסף ה-SEO שאנחנו הולכים לעבוד איתו.

• ›קובץ אימות Google Search Console.
• ›עם קוד האימות של הנכס

לאימות קל נוכל להשתמש שוב ב-Rank Math.

בשדה הראשון נוכל להזין ישירות את ה-ID שאנחנו מוצאים בחלק האימות של Search Console (אם נלחץ על הטקסט בתיבה זה לוקח אותנו ישירות ל-URL שנותן לנו את המידע הזה).

אז אנחנו רק צריכים להוסיף את ה-ID המסומן באדום למטה.

<meta name="google-site-verification" content="example code" />

איך לעשות Sitemap ב-WordPress

נקודה אחרת שמייצרת מחלוקת במגזר ה-SEO היא sitemaps. הקובץ הזה היה חשוב כדי ש-Google תוכל לגשת לכל ה-URLs שלנו.

זה נכון שהדברים השתנו ו-Google לא צריכה קובץ כדי לסרוק את האתר שלך לחלוטין. אבל באותה מידה זה נכון שעם Search Console ו-sitemaps יהיה לך מידע נוסף שיכול לעזור לך לפתור בעיות עתידיות של URL.

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

בין אם אנחנו משתמשים ב-Yoast או ב-Rank Math או בכל סוג אחר של תוסף SEO, כדי לגשת לפונקציונליות הזו אנחנו רק צריכים לציין את זה.

כדי להסביר את זה אני הולך להשתמש בכלי שמסופק על ידי Rank Math ואנחנו הולכים ללכת לאפשרות Sitemap Settings.

דוגמה לקונפיגורציית sitemap ב-Rank Math

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

• ›Links per sitemap: 1000 (אנחנו משאירים את האפשרות המוגדרת מראש, זה מתייחס למספר ה-URLs שאנחנו רוצים בקובץ שלנו)
• ›תמונות ב-sitemaps: אני ממליץ להפעיל את האפשרות הזו אם התמונות שלך מקוריות ומספקות מידע למאמר.

בכל מקרה, אם אתה משתמש בתמונות בתוכן שלך, Google תסרוק אותן בקלות.

שתי התיבות הראשונות של החלק הזה של הקונפיגורציה הן להחריג רשומות או דפים שאתה לא רוצה להוסיף ל-sitemap.

זה נעשה דרך המזהה ונוכל למצוא אותו כך.

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

אם נסתכל בתחתית, בתיבה האדומה, נראה post=5745 - המספר הוא המזהה שעלינו להשתמש בו כדי למנוע מהדף הזה להופיע ב-sitemap.

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

האפשרות של Rank Math מוגבלת ומגיעה מוגדרת מראש לייצר 5 סוגי sitemaps (רשומות, דפים, מדיה, קטגוריה ותגים)

זה תלוי בך להחליט איזה sitemap אתה לא רוצה - העצה שלי היא שלא תעשה sitemap של URLs שאתה לא רוצה ש-Google תראה (noindex או חסומים על ידי robots).

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

אופטימיזציית תוכן ל-WordPress

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

התגים החשובים ביותר באופטימיזציית תוכן הם:

• ›Title <title> ב-HTML
• ›Description <meta name="description" content=" descriptive text" >
• ›היררכיית headings <h1, h2, h3, h4… >
• ›תג ALT <img src="image url" alt="image description">

אופטימיזציית מהירות דף WordPress (WPO)

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

מושגים בסיסיים

ניתוח WPO (Web Performance Optimization) מבוצע כדי לשפר את הטעינה של האתר שלך. הכלים שבשימוש אינם מדויקים 100% וכל משתמש יכול לקבל זמני טעינה שונים לאתר.

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

כשאנחנו עובדים על WPO, מה שאנחנו מנסים לבצע אופטימיזציה זה מה שבהישג ידנו:

• ›Request: בקשות שמבוצעות על ידי משאבים למקור (השרת שלנו או שרת חיצוני אחר)
• ›Total Page Size: גודל המשאבים שדף טוען.
• ›Fully Loaded Time: זמן טעינה כולל של דף.

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

Gtmetrix ו-Lighthouse

אנחנו הולכים לקחת גישה עם שני כלים נגישים וחינמיים - ובכן, ל-Gtmetrix יש גרסה בתשלום אבל התכונות של הגרסה החינמית מספיקות לנו.

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

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

זכור, אם אתה רוצה גרסת מטמון חדשה, הוסף ? ל-URL שלך ואחריו כל סוג של תו, לדוגמה url?version1

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

Waterfall

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

איך אנחנו מתחילים לעבוד?

תמונות

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

הפחת את הרזולוציה שלהן

יש מיליוני כלים להשתמש, גם מקוונים וגם ל-PC או MAC. אני אוהב לעשות הכול עם Photoshop, אבל כמובן הכול תלוי במספר התמונות שאתה צריך לבצע אופטימיזציה. כלי מקוון אתה יכול להשתמש ב-Kraken.io אבל כפי שאמרתי לך לפני, אני נשאר עם Photoshop כי הוא יכול לבצע אופטימיזציה מדויקת יותר.

הגיש תמונות בגודל הקריאה המקסימלי

זו טעות מאוד נפוצה. שימוש באתר תמונות מלאי, הורדת תמונה 2800 x 1600 ושימוש בה באתר שלנו ברזולוציה של 900 x 400.

ההמלצה שלי היא שתשתמש ב-inspector עם הגודל המקסימלי של הדף ותסתכל על הגודל שבשימוש.

אנחנו רואים איך ה-inspector אומר לנו את הגודל המקסימלי בשימוש בתמונות הבלוג שלנו - זה צריך להיות הגודל של התמונה שלנו.

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

אם אתה לא רוצה לסבך את חייך יותר מדי עם פורמטים כמו webp (פותח על ידי Google אבל עדיין לא נתמך על ידי 100% מהדפדפנים), השתמש ב-JPEG והימנע מ-PNG אלא אם אתה צריך ערוץ שקוף.

השתמש בפונקציית lazy loading

Lazy load או טעינה מושהית היא אחת מהתכונות המעניינות ביותר למנוע מרכיבים כמו תמונות או סרטונים מלהיטען בהתחלה. מה שזה עושה זה לעכב את הטעינה של תמונות ברגע הראשון.

חשוב על התמונות שיש לנו בתחתית הדף שלנו - למה אנחנו רוצים לטעון אותן אם המשתמש עוד לא הגיע אליהן?

תוספים לאופטימיזציית תמונות

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

• ›Imagify
• ›EWWW Image Optimizer
• ›WP Smush

Minify ו-Combine של CSS, HTML ו-JavaScript

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

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

מצד שני, פעולת השילוב תהיה שימושית יותר, אבל היא יותר עדינה.

מה היה אידיאלי?

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

29 בקשות ל-JavaScript לבד. זה זועם אבל זכור שכשאתה עושה משהו כמו הטמעת סרטון Youtube, אתה טוען משאב JS (Javascript), אז אם יש לך כמה סרטונים, זה הכול מתרבה.

ועכשיו אני הולך להראות לך את טעינת המשאבים ברגע שמותאם.

עכשיו יש לנו רק 4 JS. זה בגלל פונקציית השילוב.

עם ה-CSS אותו דבר קרה - אנחנו רואים את הלפני:

ואחרי:

ההפחתה בבקשות לא הייתה רק בגלל שילוב CSS ו-JS - גם הפסקנו לטעון משאבים מסוימים שלא היו נחוצים, כמו ה-Wp-emoji-release.js האופייני (אמוג'ים ב-WordPress).

מה נשאר לנו לעשות?

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

• ›JS Async: המשאב מורד מבלי לעצור את טעינת ה-HTML אבל ברגע שהורד הוא כן עוצר את הטעינה כדי לבצע את ה-JS.
• ›JS defer: המשאב גם מורד במקביל לטעינת ה-HTML אבל הוא מבוצע בסוף הטעינה - אין חסימה על ידי הסקריפט.

חייב להיות ברור שהתכונה הזו היא ל-JS חיצוני ולא לאלה שמבוצעים INLINE (באותו HTML).

אופטימיזציית מטמון

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

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

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

מה תוסף מטמון עושה?

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

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

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

יש לנו כמה שיטות מטמון:

• ›Last-Modified
• ›ETag (Entity Tag)
• ›Expires
• ›Max-age

בוא נטען את האתר שלנו עם כלי המפתחים של Chrome פתוחים ונבחר באפשרות Network - עכשיו נוכל לראות את כל בקשות המשאבים שהדפדפן שלנו עושה. על ידי לחיצה על כל אחד מהמשאבים האלה ובחירה באפשרות Headers, נוכל לראות את התגובה של headers הקבצים האלה ואם יש לנו caching מופעל ואיזו שיטה בשימוש.

ב-SEO Alive, אנחנו רואים שזה דרך MAX-AGE. בחלק הזה, אנחנו גם רואים אם דחיסת GZIP מבוצעת מהשרת.

• ›מטמון למשתמשים מחוברים: הפונקציה הזו חשובה כדי לא להגיש דפים במטמון למשתמשים מחוברים אם הם הולכים לעדכן WordPress, כי אחרת הם לא יראו את השינויים שהם עושים.
• ›מטמון מובייל: הרבה תוספים נותנים את האפשרות לייצר "caches" שונים למכשירים שונים - אני ממליץ על זה אם גרסת המובייל שלך מותאמת אישית ולא גרסה responsive.

תוספים לאופטימיזציית מהירות טעינה ב-WordPress

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

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

• ›WP Rocket
• ›W3 Total Cache
• ›WP Fastest Cache
• ›Autooptimize

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

כלים למדידת מהירות טעינה

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

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

• ›בית
• ›קטגוריות
• ›דפים
• ›רשומות

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

אלה הכלים הפופולריים ביותר לבצע ביקורת WPO:

• ›Google PageSpeed Insights
• ›GTmetrix
• ›Pingdom Tools

נתונים מובנים ב-WordPress

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

Google עובדת מדי יום לשפר את הקריאה והפרשנות של אתרים וסימון נתונים דרך יישום של מטא-נתונים סמנטיים עושה את העבודה הזו קלה יותר.

לזה יש לנו תוספים שונים שעוזרים לנו לסמן את התוכן השונה של דפי האתר שלנו.

אם התקנת Rank Math יש לך רשימה של מטא-נתונים לתוכן שלך דרך התוסף, נראה בטאב Rich Snippet.

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

אתה יכול לתייג תוכן כ-Blog Posting ולהחזיק 3 סרטונים לא מסומנים בתוכן.

אם אתה מכיר נתונים מובנים, אתה יכול להוסיף בלוקי HTML עם Gutenberg (עורך הבלוקים של WordPress) ולהוסיף את זה ידנית.

Google מעמידה כלי לרשותך לאמת שהנתונים המובנים שלך מיושמים נכון.

תוספים מומלצים לשיפור SEO ב-WordPress

לסיום המאמר הזה, ארצה להמליץ על כמה תוספי SEO ל-WordPress שיכולים לעזור לך לשפר את האתר שלך.

תוכן עניינים

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

פוסטים קשורים

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

אני אשאיר אותך עם התוסף הזה שעזר לי הרבה עם תבניות מסוימות.

AMP

פיתוח דף ב-AMP יכול להיות אפשרות טובה מסיבות שונות: מהירות, שימושיות... או לעבוד על דירוג בקרוסלות כמו קרוסלת החדשות בגרסת המובייל שבה הסוג הזה של טכנולוגיה מקבל קדימות.

אז אני אשאיר אותך עם תוסף אם אתה רוצה שיהיו לך את הדפים שלך ב-AMP - למרות שיש הרבה אפשרויות זמינות.

Sitemap לוידאו ו-Google News

למרות שהרבה אנשי SEO כבר לא משתמשים ב-sitemaps, אני תמיד פונה אליהם כדי שיהיה לי בקרה טובה יותר על האינדקס של התוכן שלי. כאן אני משאיר לך תוסף ליצירת sitemap וידאו ועוד אחד ל-Google News.

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