3 روش استفاده از Chrome DevTools برای عیب یابی سئو

یکی از مهمترین جعبه ابزارهای فنی در نوک انگشتان هر طرفدار SEO ، Google Chrome است.

مهم نیست که از چه نرم افزار SEO برای خودکار کردن ممیزی ها یا تشخیص مسائل مربوط به SEO در مقیاس استفاده می کنید ، Chrome DevTools همچنان به ارائه روش های اساسی برای بررسی مسائل SEO در حال انجام می پردازد.

در حال حاضر ، مقالات زیادی وجود دارد که برخی از راه هایی که DevTools می تواند به طور یکسان به متخصصان و توسعه دهندگان سئو کمک کند ، بیان شده است.

با این حال ، من می خواهم چندین مورد استفاده مختلف را که در آن طرفداران SEO می توانند به DevTools متکی باشند ، به اشتراک بگذارم.

  • عیب یابی عملکرد سایت.
  • نحوه مشاهده Google سایت شما را دوباره بررسی کنید.
  • خطاهای خزیدن در یک نقطه بررسی کنید.

1. تنظیم DevTools برای عیب یابی Ad Hoc SEO

برای هر کسی که وارد DevTools Chrome نشده است ، دسترسی به آن ساده است مانند کلیک راست روی یک صفحه وب و کلیک کردن بازرسی.

با نزدیک شدن به این موضوع از لنزهای متخصصان سئو ، من توصیه می کنم هم از پنجره Element استفاده کنید – به شما امکان می دهد تا به DOM و CSS نگاه کنید و هم چند ابزار مختلف را در کشوی کنسول فعال کنید.

تبلیغات

ادامه مطلب را در زیر بخوانید

برای شروع ، کلیک راست کرده و انتخاب کنید بازرسی.

به طور پیش فرض ، این پنل Elements را نمایش می دهد ، و یک نگاه اجمالی به DOM و سبک های مورد استفاده برای نوشتن صفحه ارائه می دهد.

این دیدگاه به تنهایی به ما پیشنهاد می دهد فراوانی مواردی که باید در آنها غوطه ور شوید ، اما برای استفاده کامل از جعبه ابزار ، کشوی کنسول را فعال کنید.

روی سه نقطه کنار نماد تنظیمات کلیک کنید و به پایین بروید کشوی کنسول را نشان دهید.

تبلیغات

ادامه مطلب را در زیر بخوانید

به طور متناوب ، روی کلید Escape کلیک کنید.

3 روش استفاده از Chrome DevTools برای عیب یابی SEO

با در اختیار داشتن کشوی کنسول و پانل عنصر ، کاربران می توانند یک نگاه اجمالی به کدی که در DOM ارائه می شود و سبک های مورد استفاده برای رنگ آمیزی این کد در مرورگر.

و همچنین مجموعه ای از ابزارهای دیگر که از کشوی کنسول قابل دسترسی هستند.

بسته به دفعات استفاده از DevTools ، کشوی کنسول ممکن است فقط خود کنسول را نشان دهد.

پانل کنسول به شما امکان می دهد پیام های ثبت شده را مشاهده کرده و JavaScript را اجرا کنید – اما امروز به آن وارد نخواهیم شد.

در عوض ، ما بر روی فعال کردن سه ابزار اضافی تمرکز خواهیم کرد:

  • شرایط شبکه
  • پوشش
  • تفسیر.

زیر ابزارهای بیشتر، هر یک از این سه مورد را انتخاب کنید تا زمانی که به عنوان زبانه در کشوی کنسول ظاهر شوند.

صفحه DevTools ما باید شبیه به این باشد:

3 راه استفاده از Chrome DevTools برای عیب یابی SEO

اکنون که این سه پنجره فعال شده است ، بیایید به عیب یابی برویم.

تبلیغات

ادامه مطلب را در زیر بخوانید

2. تغییر کاربر-عامل در DevTools

یکی از نادیده گرفته شده ترین روش های استفاده از DevTools تکیه بر توانایی داخلی Chrome برای تغییر User-Agent است.

این تست ساده با ارائه بینشی از نحوه مشاهده و پردازش اطلاعات Googlebot در یک سایت ، به کشف مسائل مختلف کمک کرده است.

برای متخصص SEO تحقیق ، DevTools اغلب می تواند به عنوان یک ذره بین قابل اعتماد عمل کند و به کاربران امکان می دهد تا روی مسئله خاصی بزرگنمایی کنند تا دلیل اصلی آن را کشف کنند.

مقاله پیشنهادی  Google Ads، Twitter Twitter سیاستها و منابع تبلیغی COVID را اصلاح کنید

چگونه نماینده کاربری خود را تغییر دهیم

برای تغییر کاربری عامل خود در Chrome ، از زبانه شرایط شبکه در کشوی کنسول استفاده کنید.

3 راه استفاده از Chrome DevTools برای عیب یابی SEO

علامت را بردارید به صورت خودکار انتخاب کنید، و می توانید محتوا را با استفاده از تلفن هوشمند Googlebot ، Bingbot یا تعداد دیگری از نمایندگان کاربر مشاهده کنید تا نحوه تحویل محتوا را ببینید.

تبلیغات

ادامه مطلب را در زیر بخوانید

پرونده سایت جایگزین تلفن همراه

به سایتی بروید که ممکن است Google برچسب عنوان یا متا توضیحات به روز شده را در SERP نشان ندهد.

ممکن است تشخیص اینکه چرا گوگل به طور کلی عنوان دیگری را به طور کلی انتخاب کرده یا در به روزرسانی عنوان در SERP ها از برچسب عنوان قبلی موفق نبوده ، دشوار باشد.

در یک مورد ، پس از تغییر User-Agent به اسمارت فون Googlebot ، به سرعت مشخص شد که این سایت هنوز در حال سرویس دهی یک سایت همراه دیگر به Googlebot است.

از آنجا که گوگل قبلاً به نمایه سازی همراه اول تغییر یافته بود ، گوگل در حال پردازش و نمایه سازی تغییرات در سایت تلفن همراه بود ، در حالی که موفق به دریافت به روزرسانی هایی که در نسخه دسک تاپ دامنه انجام شده بود نشد.

سایت های موبایل ممکن است یادگاری از گذشته های دور به نظر برسند ، اما قطعاً هنوز هم وجود دارند.

در حقیقت ، یک سایت: جستجو برای سایت های m.. com بیش از 2 میلیارد در جستجوی گوگل نشان می دهد:

3 راه استفاده از Chrome DevTools برای عیب یابی SEO

اگرچه یافتن مسئله ای از این قبیل در خزیدن با جستجوی متا rel = “alternate” به اندازه کافی آسان است ، تغییر دادن User-Agent در Google Chrome فرصتی عالی برای شناسایی یک مسئله احتمالی بدون نیاز به ترک مرورگر

تبلیغات

ادامه مطلب را در زیر بخوانید

Spotting Overzealous Protection Server

هیچ رازی نیست که بازیگران بد زیادی در وب وجود دارند.

علاوه بر این ، مخفی نیست که ممکن است بسیاری از هکرها و اشرار بدجنس سعی کنند از قدرت Google در برابر یک سایت استفاده کنند.

به همین دلیل است که ما نمی توانیم چیزهای خوبی داشته باشیم.

در نتیجه ، برخی از پشته های سرور ، CDN ها و ارائه دهندگان میزبانی ممکن است برخی از ویژگی های امنیتی داخلی را ارائه دهند که جعل اسناد Googlebot را مسدود می کنند تا یک سایت برای جلوگیری از خزنده های هرزنامه در امان بماند.

با این حال ، گاهی اوقات ممکن است سایتی کمی بیش از حد غرور ورزیده شود و در نهایت به طور تصادفی Googlebot را مسدود کند!

اگر پیامی مانند پیام موجود در اینجا را مشاهده کردید ، زمان آن فرا رسیده است که برخی از آزمایشات را انجام دهید:

3 روش استفاده از Chrome DevTools برای عیب یابی SEO

وقتی این پیام را در SERPs Google دیدیم ، مشخص بود که چیزی ناپاک وجود دارد.

تبلیغات

ادامه مطلب را در زیر بخوانید

با این حال ، مرورگر همه مطالب را بدون مشکل بارگیری کرد.

آیا گوگل چیز متفاوتی را می دید؟

با استفاده از سوئیچ User-Agent در DevTools ، ما توانستیم ببینیم که سایت هنگام ارسال User-Agent روی تلفن هوشمند Googlebot ، در حال ارسال این پیام است.

اگرچه این ممکن است راهی خوب برای جلوگیری از تقلب در Googlebot باشد ، آنها به طور تصادفی Googlebot واقعی را مسدود کرده بودند!

سوئیچ User-Agent بدون نقص نیست و مطمئناً همه گیر نیست.

در حقیقت ، CDN هایی مانند Cloudflare به دلیل مسدود کردن بازدید از بازدیدهایی که ممکن است باعث ایجاد ترفند در مورد User-Agent موتور جستجو شوند ، مشهور هستند.

هنگام بازدید از سایت خود Cloudflare با تنظیم Googlebot به عنوان User-Agent ، با صفحه ای مانند این مورد استقبال می شوید:

مقاله پیشنهادی  جان مولر گوگل: "جستجو یک علم نیست" از طریقMattGSouthern

3 راه استفاده از Chrome DevTools برای عیب یابی SEO

به همین ترتیب ، تغییر دادن User-Agents به شما نمی گوید که آیا Googlebot می تواند JavaScript را در اولین گذرگاه ارائه دهد یا سایر مشکلات مهم دسترسی را ارائه دهد.

تبلیغات

ادامه مطلب را در زیر بخوانید

با این حال ، بررسی خوبی است که آیا آنچه در SERP مشاهده می کنید غیرمنتظره است.

تشخیص Core Web Vital در DevTools

یک زبانه مهم در DevTools ، زبانه عملکرد است.

این یک دروازه عالی برای مشکلات عیب یابی است که به سرعت و کارایی صفحه مربوط می شوند و می توانند در هنگام استفاده از Core Web Vital ها اقداماتی جذاب انجام دهند.

در حالی که معیارهایی که بخشی از Core Web Vital های Google هستند مدتی است که بخشی از گزارش سرعت و عملکرد صفحه هستند ، برای متخصصان سئو بسیار مهم است که با نحوه تفکیک این مسائل آشنا شوند.

به خصوص که مدیران وب به شدت از اهمیت Core Web Vital برای جستجو آگاه می شوند.

استفاده از برگه عملکرد در DevTools گامی برای درک بهتر این معیارهای مهم وب است.

چگونه می توان برگه عملکرد را برای رفع اشکال Core Web Vital تنظیم کرد

در برگه بالا در DevTools ، روی کلیک کنید کارایی زبانه

اطمینان حاصل کنید که عکسهای صفحه دکمه علامت گذاری شده است ، سپس بر روی نماد Refresh در تب Performance کلیک کنید تا بار صفحه ضبط شود.

3 روش استفاده از Chrome DevTools برای عیب یابی SEO

نمایه ای که بارگیری می شود ، با مدت زمان برجسته شده برای رویدادهای مهم ، نمای کلی از مدت زمان بارگیری صفحه را نشان می دهد.

تبلیغات

ادامه مطلب را در زیر بخوانید

در بخش زمان بندی ، کاربران می توانند پرچم هایی را برای مواردی مانند FCP (اولین رنگ محتوایی) و LCP (بزرگترین رنگ محتوایی) ، یکی از هسته های اصلی وب ما مشاهده کنند.

با قرار گرفتن در بالای پرچم برای LCP ، در واقع می توانیم محتوای پرچم گذاری شده را به عنوان بزرگترین رنگ محتوایی در هنگام بارگذاری صفحه مشاهده کنیم.

این امر می تواند به حذف حدس و گمان کمک کند زیرا طرفداران فنی SEO با تیم های توسعه و عملکرد برای عیب یابی Core Web Vital همکاری می کنند.

3 راه استفاده از Chrome DevTools برای عیب یابی SEO

بررسی تغییر چیدمان تجمعی

همچنین DevTools به شما امکان می دهد تا مشخص کنید چه عناصری ممکن است باعث تغییر طرح شوند.

تبلیغات

ادامه مطلب را در زیر بخوانید

اغلب ، وقتی بارگیری تصاویر و تبلیغات به پایان می رسد ، ممکن است به نظر برسد که محتوا روی صفحه پرش می کند.

این زمانی اتفاق می افتد که صفحه املاک و مستغلات مورد نیاز این دارایی ها را رزرو نکرده باشد ، و باعث می شود با بارگذاری محتوا ، طرح تغییر کند و حرکت کند.

برای کمک به تشخیص تغییر طرح ، از زبانه Rendering در کشوی کنسول استفاده کنید.

گزینه را علامت بزنید مناطق تغییر چیدمان، که مناطقی از صفحه را که با بارگذاری محتوا تغییر طرح می دهند ، برجسته می کند.

پس از تعامل با صفحه ، تغییرات چیدمان با رنگ آبی مشخص می شوند.

این می تواند به مدیران وب و توسعه دهندگان کمک کند تا بفهمند منابع ممکن است به متغیرهایی نیاز داشته باشند.

3 راه استفاده از Chrome DevTools برای عیب یابی SEO

3. سرصفحه های HTTP خود را دوباره بررسی کنید و کد استفاده نشده را مرور کنید

ما اغلب در ممیزی SEO از 404 نرم صحبت می کنیم.

تبلیغات

ادامه مطلب را در زیر بخوانید

Soft 404s زمانی است که ممکن است مرورگر صفحه 404 را نشان دهد ، اما درعوض ، 200 کد پاسخ مثبت را بازگردانید.

مقاله پیشنهادی  نحوه استفاده از GitHub برای سئو سازمانی

در برخی موارد ، ممکن است بارگذاری محتوا را دقیقاً مطابق انتظار در مرورگر مشاهده کنید ، با این وجود کد پاسخ HTTP ممکن است 404 ، 302 را نشان دهد یا به طور کلی نادرست یا متفاوت از حد انتظار است.

در هر صورت ، دیدن کدهای پاسخ HTTP برای هر صفحه و منبع بسیار مفید است.

در حالی که انبوهی از برنامه های افزودنی جذاب Chrome وجود دارد که به شما اطلاعاتی درباره کدهای پاسخ را می دهند ، این همان چیزی است که می توانید مستقیماً از DevTools بررسی کنید.

از DevTools استفاده کنید و به تب Network بروید.

در اینجا ، DevTools تمام منابع فردی را که برای جمع آوری صفحه ، کدهای وضعیت مربوطه و تجسم آبشار فراخوانی می شوند ، نشان می دهد.

در اینجا دو نمای فوق العاده مفید برای کمک به فیلتر کردن و مرتب سازی اطلاعات کد وضعیت وجود دارد.

ابتدا ، فیلتر نوع پرونده در بالای برگه شبکه به ما امکان می دهد تا تمرکز خود را بر روی انواع محتوای خاص محدود کنیم:

3 راه استفاده از Chrome DevTools برای عیب یابی SEO

پس از انتخاب یک منبع ، سرصفحه ها زیر منوی موجود در زبانه Network به ما امکان می دهد اطلاعات زیادی راجع به پرونده انتخاب شده مشاهده کنیم.

تبلیغات

ادامه مطلب را در زیر بخوانید

این شامل تمام اطلاعات هدر HTTP ، مانند درخواست URL ، روش درخواست ، کد وضعیت ، رمزگذاری محتوا ، تاریخ آخرین تغییر ، سرور و موارد دیگر است.

این می تواند اطلاعات بسیار مفیدی هنگام عیب یابی باشد.

می توانید به این اطلاعات تکیه کنید:

  • تأیید کنید که فشرده سازی GZip فعال است.
  • دوباره بررسی کنید که cache-control مطابق انتظار کار می کند.
  • تأیید کنید که در حال ارسال کد وضعیت مناسب به Googlebot و سایر عوامل کاربری هستیم.

3 روش استفاده از Chrome DevTools برای عیب یابی SEO

کد استفاده نشده را مرور کنید

در آخر ، من همیشه دوست دارم که تب Coverage را در کشوی کنسول در دسترس بگذارم.

با استفاده از این برگه ، می توانید به سرعت بارگیری مجدد را بزنید و مشخص کنید که چه مقدار از کد حمل شده در واقع استفاده می شود.

3 راه استفاده از Chrome DevTools برای عیب یابی SEO

اغلب ، فایلهای JavaScript و CSS را مشاهده می کنید که دارای درصد زیادی کد استفاده نشده هستند.

تبلیغات

ادامه مطلب را در زیر بخوانید

هنگام عیب یابی سرعت یا عملکرد سایت ، اینها اغلب اولین منابع مسدود کننده رندر هستند که باید برای بهینه سازی ارزیابی شوند.

اگر یک تن از CSS را حمل می کنید که هرگز استفاده نشده است ، عملکرد شما بسیار کم خواهد شد.

CSS همیشه مانع رندر می شود – در نتیجه ، پرونده های بزرگ CSS می توانند سرعت و عملکرد صفحه را به شدت کاهش دهند.

با شناسایی اسکریپت های بلااستفاده ، متخصصان سئو اغلب می توانند به توسعه دهندگان و مدیران وب در عیب یابی منابع مورد نیاز برای بهینه سازی بهتر برای افزایش کارایی کمک کنند.

به طور خلاصه ، Google Chrome ابزاری کاملاً مهم در زرادخانه شما است.

غذای آماده

DevTools یک نگاه اجمالی قدرتمند را در زیر کلاه هر وب سایت ارائه می دهد و می تواند یک قسمت مهم از حسابرسی فنی باشد.

با این حال ، یکی از بهترین قسمت ها در مورد استفاده از DevTools سرعت آن است.

بدون اینکه هرگز از مرورگر خود خارج شوید ، متخصصان سئو می توانند احساس کنند که می توانند مسائل مربوط به بررسی را از خزیدنی تا عملکرد بررسی کنند.

منابع بیشتر:

تبلیغات

ادامه مطلب را در زیر بخوانید


اعتبار تصویر

تمام تصاویر صفحه گرفته شده توسط نویسنده ، نوامبر 2020