آیا می دانستید که کدهای جاوااسکریپت سایت شما نیز در کنار محتوا، مدیا و … نیاز به سئو دارد؟ ما در این مقاله از تاپ سئو به توضیح اهمیت سئو JS و تاثیر آن در افزایش ترافیک می پردازیم و همینطور ابزارها و اکستنشن های کاربردی را به شما علاقه مندان معرفی می کنیم. با ما همراه باشید تا با یکی از جذاب ترین موضوعات حوزه سئو سایت آشنا شوید.
جاوااسکریپت چیست و چه کاربردی دارد؟
تجربه کاربر از یک صفحه وب و چگونگی تعامل و رفتار با آن مفهوم کلی جاوااسکریپت است. در واقع جاوا زبان برنامه نویسی پویا و Object-base است که نحوه عملکرد صفحات وب را کنترل می کند.
پس اگر یک صفحه با شما به عنوان کاربر، رفتار مناسبی داشته باشد، کدهای جاوااسکریپت بهینه و موردقبولی دارد. اما بدرفتاری یک صفحه با کاربر نشان از جاوایی ضعیف است.
اما منظور از این رفتار دقیقا چیست؟
در واقع هیچ محدودیتی در نوع رفتار یک صفحه وب وجود ندارد. در اینجا چند نمونه از قابلیت های رفتاری که در قالب جاوااسکریپت پیاده سازی می شود را مرور می کنیم:
- نمایش یا پنهان کردن اطلاعات بیشتر با کلیک یک دکمه
- تغییر رنگ یک دکمه زمانی که ماوس روی آن قرار می‌گیرد
- نمایش اسلاید تصاویر در صفحه اصلی وب
- زوم کردن بر روی یک عکس
- نمایش تایمر یا شمارش معکوس در وب سایت
- پخش فایل صوتی و تصویری در یک صفحه وب
- نمایش انیمیشن‌ها
مزایا و معایب جاوااسکریپت
جاوا اسکریپت یک گزینه عالی برای ایجاد تعامل بیشتر صفحات وب سایت با کاربر است ؛ اما باید بدانید که در کنار جذاب کردن صفحات، استفاده نادرست از آن نیز به سئو سایت ضربه می زند. در بسیاری موارد با ریدیزاین کردن یک سایت یا صفحه، ورودی آن کاهش چشمگیری پیدا میکند! یکی از دلایل رایج آن تغییرات جاوااسکریپت بدون بهینه کردن آن هاست. مهم نیست که وب سایت شما چقدر عالی است، اگر گوگل آن را به دلیل مشکلات جاوا اسکریپت ایندکس نکند، ترافیک زیادی را از دست خواهید داد.
در ادامه این مقاله همه چیزهایی را که باید در مورد بهترین شیوه های سئو جاوا اسکریپت بدانید و همچنین ابزارهایی که می توانید برای اشکال زدایی مشکلات JS استفاده کنید، را با هم مرور میکنیم.
سئو جاوااسکریپت بخشی از سئوی تکنیکال است و هدف از آن راحت‌تر کردن روند یافتن و ایندکس کردن صفحات JS برای ربات‌های گوگل یا هر موتور جستجوی دیگری است.
چند نمونه از اشتباهات رایج در کدهای جاوا
- خزش یا کراول (Crawl) سایت به مشکل می خورد
در این نمونه لینک کدهای مسیردهی یا Navigation با استانداردهای وب مطابقت ندارد و در نتیجه گوگل به دلایل زیر آن ها را دنبال نخواهد کرد.
- یافتن صفحات داخلی برای گوگل سخت است.
- قدرت صفحات در وب سایت به درستی توزیع نشده است.
- روابط واضحی بین صفحات در وب سایت وجود ندارد.
در نتیجه، وقتی لینک ها و پیوندهای داخلی سایت طوری باشند که ربات گوگل نتواند آن را دنبال کند، سایت نمی‌تواند از قدرت لینک های داخلی استفاده کند.
- جستجوی تصاویر بعد از پیاده سازی Lazy loading نامناسب کاهش یافته است.
Lazy loading یک اسکریپت عالی جهت کاهش زمان بارگذاری صفحه است، اما در صورت اجرای نادرست می تواند خطرناک باشد. در این مثال، Lazy loading نامناسب مانع از مشاهده تصاویر صفحه توسط گوگل شده است:
- محتوای “پنهان” تحت Lazy loading ممکن است توسط Google یافت نشود (در صورت اجرای نادرست)
- اگر محتوا توسط گوگل دیده نشود، رتبه بندی نمی شود.
در نتیجه، ترافیک جستجوی تصویر می تواند آسیب زیادی ببیند. این امر به ویژه برای کسب و کارهایی که به شدت به جستجوی تصویر متکی هستند، مهم است.
- سوئیچ کردن یک وب سایت به زبان React بدون توجه به سئو
در این نمونه، وب سایت با تغییر زبان برنمه نویسی، دست به خودکشی زده است! انتقال وب سایت در حالی انجام شده که url ها و تصاویر قابلیت کراول شدن نداشته اند و تگ تایتل برای تمامی صفحات یکی است. همچنین هیچ محتوایی در صفحات بارگزاری نشده است.
به این ترتیب ربات های گوگل صفحاتی که محتوا ندارد را دنبال نمیکنند و از طرفی اگر چندین صفحه برای یکسان به نظر برسند، ربات های گوگل تنها می‌تواند یکی از آنها را انتخاب کنند . در این مثال، صفحات وب سایت برای گوگل دقیقاً مشابه هم به نظر رسیده اند، درنتیجه گوگل هوم پیج را به عنوان نسخه کنونیکال در نظر گرفته است.
چند نکته در مورد ارتباط بین گوگل و کدهای جاوااسکریپت که باید بدانید
وقتی صحبت از نحوه برخورد گوگل با محتوای سایت می شود، باید به 2 نکته اصلی توجه داشته باشید:
- گوگل با محتوای سایت تعاملی ندارد
بات های گوگل نمی توانند روی دکمه‌هاکلیک کند یا محتوا را بزرگ و کوچک کند. آنها فقط می توانند محتوای موجود در HTML را بدون هیچ گونه تعامل اضافی ببیند.
به عنوان مثال، اگر یک بخش متن قابل گسترش دارید و متن آن در کد HTML رندر شده موجود است، Google آن را ایندکس می کند.
برعکس، اگر بخشی دارید که محتوا در ابتدای در کد موجود نیست و تنها پس از تعامل کاربر با آن بارگیری میشود (مثل کلیک روی یک دکمه) گوگل این محتوا را نخواهد دید.
- گوگل صفحات سایت را اسکرول نمی کند
گوگل یک کاربر معمولی نیست! ربات های گوگل نمی توانند مثل یک انسان در وب سایت رفتار کنند و صفحات را به روش ما اسکرول و یا پیمایش کنند. بنابراین اگر محتوای شما پشت تعداد بی‌پایانی اسکرول پنهان شده باشد، گوگل آن را نخواهد دید.
نکتـــــــــــــــــــــه: اگر می‌خواهید گوگل وب‌سایت شما را ایندکس و رتبه‌بندی کند و یا نیاز به ترافیک و فروش دارید، رندر سمت مشتری یا client-side rendering ایده خوبی نیست. اینجاست که با این سوال روبرو می شوید که پس پیاده سازی جاوااسکریپت به چه دردی می خورد و آیا اصلا فکر خوبی است؟ جواب روشن است: اگر جاوا اسکریپت با بهترین شیوه در یک وب سایت پیاده سازی شود، بله!
بهترین روش برای سئو جاوااسکریپت
افزودن لینک طبق استانداردهای وب
استانداردهای وب اصلا چیز وحشتناک و پیچیده ای نیست! تنها کافی است برای لینکدهی داخلی از ویژگی HREF استفاده کنید.
<a href=”your-link-goes-here”>Your relevant anchor text</a>
به این ترتیب، گوگل به راحتی می تواند لینک ها را پیدا کند و آنها را دنبال کند (مگر اینکه یک ویژگی nofollow به آنها اضافه کنید که داستانی متفاوت است)
از تکنیک های زیر برای افزودن لینک های داخلی به وب سایت خود استفاده نکنید:
‘window.location.href=‘/page-url
<a onclick=”goto(‘https://store.com/page-url’)”>
#page-url
اگر می خواهید کاربر را به قسمت خاصی از صفحه بیاورید، میتوانید از مورد آخر (#page-url) استفاده کنید اما باید در نظر داشته باشید که گوگل تمام URL هایی را که “#” به آن اضافه شده را ایندکس نمیکند.
افزودن تصاویر طبق استانداردهای وب
درست مثل لینک های داخلی، استفاده از تصویر نیز باید از استانداردهای وب پیروی کند تا Googlebot بتواند به راحتی تصاویر را پیدا و ایندکس کند. به این منظور، باید در تصاویر از تگ ‘src’ استفاده شود:
</”img src=”image-link-here.png>
در بسیاری از کتابخانه‌های Lazy loading مبتنی بر جاوا اسکریپت از ویژگی «data-src» برای ذخیره URL اصلی تصویر استفاده میشود ، سپس برچسب «src» را با یک تصویر placeholder یا GIF جایگزین می‌کنند که سریع بارگذاری می‌شوند.
<img data-src=”image-link-here.png” class=”inline lazyloaded” src=”placeholder-imge.gif”></div>
<img data-src> اطلاعات اضافی درباره تصویر را ذخیره می کند و به بهینه سازی سرعت صفحه کمک زیادی می کند. اگر می‌خواهید Google تصویر اصلی را انتخاب کند، تصویر placeholder را با تصویر هدف عوض کنید تا <img src> مسیر تصویر مورد نظر را نشان دهد.
سرور رندرینگ را فعال کنید
اگر می‌خواهید Google محتوای شما را بخواند و رتبه‌بندی کند، باید مطمئن شوید که این محتوا روی سرور رندر می شود. به این منظور می توانید از رندر پویا یا Dynamic Rendering استفاده کنید که به معنای شناسایی موتورهای جستجو و ارائه صفحات HTML به آن ها است.
—————– برای اطلاعات بیشتر در مورد Server-side rendering اینجا را بخوانید.—————–
اطمینان از وجود تمام اطلاعات مورد نیاز برای گوگل
- قابلیت کپی در صفحه
- تصاویر
- برچسب کنونیکال
- عنوان و توضیحات متا
- تگ متا روبات ها
- داده های ساخت یافته
- Hreflang و هر برچسب مهم دیگری
ابزارهای مفید برای اشکال زدایی سئو جاوا اسکریپت
روزهای شیرین و بی دردسری که برای بررسی یک صفحه تنها نیاز بود نگاهی به کد منبع یا Source Code آن بیاندازید، گذشته است!
جاوا اسکریپت آن را پیچیده تر کرده چراکه می تواند عناصر متنوعی را اضافه، حذف یا تغییر دهد. نگاه کردن به کد منبع (non-rendered HTML) کافی نیست. به جای آن باید rendered HTML را بررسی کنید.
مرحله 1: بررسی کنید که یک وب سایت چقدر به جاوا اسکریپت برای ارائه محتوا متکی است
اولین کاری که باید برای بررسی یک وب سایت برپایه جاوا اسکریپت انجام دهید این است که JS را در مرورگر خود غیرفعال کنید. به این منظور می توانید از افزونه Web Developer Chrome استفاده کنید.(به قسمت تنظیمات بروید، روی Disable JavaScript کلیک کنید و صفحه را دوباره بارگیری کنید)
با این کار خواهید دید که یک صفحه بدون کدها JS چطور به نظر می رسد. با این کار نمیتوانید بفهمید که آیا گوگل آن را ایندکس می کند یا نه! اگر با این آزمایش صفحه ای تقریبا خالی ببینید، میفهمید که وب سایت به شدت به جاوا اسکریپت متکی است.
در مثال بالا می بینید که هیچ محتوایی بدون جاوا اسکریپت در دسترس نیست. به همین دلیل است که باید HTML رندر شده را با ابزارهایی که در مرحله بعد نشان می دهیم آزمایش کنید.
مرحله 2: بررسی کنید که آیا ربات های گوگل، محتوا و برچسب های مناسبی را دریافت می کنند
یکی از بهترین و مطمئن‌ترین ابزارها برای بررسی HTML ارائه‌شده توسط موبایل Google Mobile-friendly Test Tool است زیرا اطلاعات را مستقیماً از Google دریافت می‌کنید. کاری که باید انجام دهید:
- ابزار Mobile-friendly را بارگیری کنید.
- URL خود را بررسی کنید.
- اطلاعات موجود را بررسی کنید. (اینجاست که با بعد فنی سئو روبرو می شوید، زیرا باید کد را بررسی کنید تا از صحت آن مطمئن شوید.)
توجه: برای انجام این بررسی ها می توانید از ابزار Rich Results Test نیز استفاده کنید.
ابزار URL Inspection در سرچ کنسول، امکان دسترسی به HTML را به شما می دهد. ربات گوگل از این کدها برای ارزیابی محتوای صفحه استفاده می کند.
شما ترجیح می دهید از کدام یک از ابزارهایی که در بالا به آن اشاره شد، استفاده کنید؟ (The Mobile-friendly Test Toolیا URL Inspection Tool)
واقعیت این است که هیچ تفاوتی در خروجی این دو ابزار وجود ندارد. تنها در چند مورد تفاوت هایی با هم دارند:
- برای استفاده از ابزار بازرسی URL، باید به کنسول جستجوی گوگل وب سایتی که در حال بررسی آن هستید دسترسی داشته باشید. اگر چنین دسترسی ندارید، از Mobile-Friendly Test استفاده کنید.
- ابزار URL Inspection می تواند دو نسخه از یک صفحه را نشان دهد – آخرین نسخه کراول شده و نسخه لایو. این در حالی است که گزارش Mobile-Friendly Test و Rich Results Testفقط برای نسخه صفحه فعلی است.
سایر ابزارها و اکستنش های مفید برای بررسی جاوااسکریپت
- View Rendered Source Chrome Extension
با استفاده از این اکستنشن میتوانید به تفاوت بین کد منبع و HTML ارائه شده پی ببرید و نمای کلی از تغییرات جاوا اسکریپت در صفحه را ببینید.
- JavaScript Rendering Check
این اکستنشن کاربرپسند که حتی نیاز به بررسی کد ندارد Source code و HTML را با هم مقایسه میکند. 
در این مثال، میبینید که جاوا اسکریپت عناصر اصلی صفحه مانند برچسب عنوان، کنونیکال و لینک های داخلی را تغییر می دهد.
طبق داده های جمع آوری شده از 100000 برنامه نویس حرفه ای، محبوب ترین زبان برنامه نویسی جاوا اسکریپت است. به همین دلیل بی تردید این زبان آینده سئو را تحت تاثیر قرار خواهد داد و به زودی تعداد زیادی از وب سایت ها به پلتفرم جاوا اسکریپت انتقال داده می شوند.
شما به عنوان یک متخصص سئو، باید بررسی کنید که آیا تغییراتی که با پیاده سازیJS در یک صفحه رخ می دهد، به صفحه موردنظر آسیب می رساند یا خیر. پیشنهاد ما این است از ترکیبی از ابزارهای ذکر شده در مقاله برای بررسی سئو جاوا اسکریپت استفاده کنید تا از پیاده سازی درست آن مطمئن شوید. اگر شما هم از ابزار، اکستنشن و یا روش خاصی برای بررسی کدهای js سایتتان استفاده می کنید با دیگران به اشتراک بگذارید. همچنین اگر نیاز به مشاوره سئو دارید با متخصصان ما در ارتباط باشید.
