اشتباهات طراحان قالب وردپرسی آسیب رسان به سئو

امروزه وردپرس یکی از محبوب ترین CMS های (سیستم مدیریت محتوا) موجود و در دسترس برای طراحان سایت میباشد. یکی از روش های طراحی سایت که امروزه بسیار طرفدار دارد، استفاده از قالب های آماده برای طراحی میباشد.

این قالب ها را چه کسی طراحی میکند؟ آیا قالبی که برای طراحی سایت وردپرسی مورد استفاده قرار میگیرد از استاندارد های سئو برخوردار است؟ یا بهتره بپرسم آیا قالب نویسان وردپرسی بر اصول سئو مسلط هستند. قالب‌های وردپرس تا چه حد می‌توانند بر سئو (بهینه‌سازی موتورهای جستجو) تاثیرگذار باشند؟

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

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

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

بطور کلی این موارد به شرح زیر است:

• سرعت بارگذاری
• عدم واکنش‌پذیری و ریسپانسیو
• ساختار HTML/CSS اشتباه
• طراحی صفحه 404

سرعت بارگذاری صفحات طراحی شده قالب

سرعت بارگذاری وب‌ سایت یکی از عوامل مهم در بهینه ‌سازی سئو و تجربه کاربری است. افزایش سرعت بارگذاری وب ‌سایت می‌تواند بهبود ملموسی در رتبه‌ بندی سایت شما در موتورهای جستجو مانند گوگل داشته باشد و همچنین باعث افزایش رضایتمندی کاربران از تجربه آن‌ها می‌شود. در ادامه، چند راه برای بهبود سرعت بارگذاری وب سایت را بررسی می‌کنیم.

حجم کد در طراحی قالب

یکی از مواردی که کاملا در سرعت بارگذاری تاثیر گذار است، حجم کد هایی میباشد که برای ساخت و خلق یک قالب وردپرسی استفاده شده است 

تنوع در قالب های آماده

کد نویسان و توسعه دهندگان قالب وردپرسی باید قالب های از پیش آماده بسازند، این قالب ها باید در زمینه های مختلف (زمینه های کاری که درخواست های بیشتری دارند برای مثال: وکالت، پزشکی و … ) و در انواع سایت ها (فروشگاهی، شخصی، شرکتی و …) ساخته و کدنویسی شود، احتیاج به استفاده از صفحه سازهایی مثل المنتور، ویژوال کامپوز و … . از بین میرود.

این صفحه ساز ها (builder) برای خلق امان های مختلف از حجم کد زیادتری استفاده میکنن که طبیعی است که این حجم کد باعث افت سرعت سایت شود.

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

طراحی یک “تنظیمات قالب (them options)” کاربردی با آزادی عمل بالا در شخصی سازی قالب،‌ میزان وابستگی به صفحه ساز ها تا حد خیلی زیاد از بین میبرد.

تعداد ریکوئست برای دریافت منابع

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

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

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

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

کمپرس پرس کردن و یه کاسه کردن کد

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

یکی از راه هایی که میتوان برای کم کردن تعداد ریکوئست ها نام برد، کمپرس کردن و gzip کردن منابع (فایل ها) می باشد.

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

استفاده از داکتروی های مجزا صفحه ها برای جلوگیری از unused css و جاوا اسکریپت

قالب هایی که امروزه در پلتفرم های فروش قالب وردپرسی وجود دارند به این شکل طراحی شده اند که کد های قالب در فایل ها (دایرکتوری) های کمی فایل بندی میشوند. برای مثال زمانی که شما یک استایل را در صفحه اصلی سایت استفاده میکنید و یک استایل دیگر را در صفحه دسته بندی ها استفاده میکنید، تمامیه این کد ها داخل یک فایل ذخیره می شوند و اگر وارد صفحه ای مثلا صفحه مقالات بشوید، تمامیه استایل هایی که در دو صفحه دیگر استفاده شده است در این صفحه بی استفاده است اما چون استایل های این صفحه هم در همان دایرکتوری ذخیره شده، سرور مجبور است کل فایل استایل ها را پردازش و ارسال کند تا کد هایی تا لازم در صفحه مذکور استفاده شود.

در بین فایل کد هایی که در این صفحه لازم نیست هم ریکوئست زده شده است

 

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

موارد تکمیل کننده

• اجتناب از استفاده از CSS inline و به جای آن استفاده از فایل‌های CSS خارجی جهت جدا کردن ظاهر و محتوای وب سایت.
• استفاده از نام‌گذاری مناسب برای کلاس‌ها و آیدی‌ها در CSS تا کد بهینه‌تر و قابل تعمیر باشد.
• استفاده از ابزارهای آنالیز کد HTML/CSS مانند W3C Validator برای چک کردن و جستجوی اشکالات در کدها و اصلاح آن‌ها.
• استفاده از ابزارهای CSS و HTML Linting برای یافتن و رفع اشکالات نحوی در کدها.

بردن فایل های سنگین و غیر ضروری در فوتر 

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

معمولا قالب نویسان اکثر درخواست های منابع را از ناحیه هدر (header) سایت ریکوئست میزنند. 

از آنجایی که زمان ریکوئست و پردازش کد ها باهم متفاوت است. بهتر است کد های کم اولویت تر و سنگینتر مثل جاوا اسکریپت ها آخرین ریکوئست های قالب و سایت ما باشد. برای مثال زمانی که یک صفحه html را درخواست می زنیم که تو این صفحه از اسلاید استفاده شده است. نیاز نیست که در همان ابتدای کار اسلایدر شروع به اسلاید خوردن کند در حالی که هنوز سایت تکمیل نشده و ظاهر بهم ریخته ای دارد

اولویت باید به این شکل باشد که اول کد های html و بعد مقداری از استایل ها و بعد مدیای مثل عکس ها ریکوئست زده شود و سپس اسکریپت هایی که باعث حرکات اسلایدر و انیمیشن ها میشود شروع به سرو (serve) شدن بکنند.

بهترین ناحیه برای درخواست زدن برای فایل های غیر ضروری با اولویت پایین تر، فوتر وب سایت می باشد.

تنوع در قابلیت های قالب

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

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

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

البته که همانطور که در قسمت صفحه ساز ها اشاره کردم، طراحی یک “قابلیت قالب (theme option)” با قابلیت زیاد میتواند تا حد زیادی از استفاده از افزونه ها را کم کند.

بهینه‌ساز تصاویر

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

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

طبق گفته خود کارمندان گوگل، استفاده از عکس هایی با فرمت webp تاثیر بسیاری در سرعت بارگذاری سایت و همچنین بهینه بودن عکس ها برای نتایج جست و جوی عکس گوگل دارد. همچنین عکس های قرار گرفته در طراحی قالب وردپرسی نباید بیشتر از 500kb حجم داشته باشند.

البته این مورد هم باید در نظر گرفت که این فرمت در بعضی از مرورگر ها ساپورت نمیشود تا به امروز که این مقاله را مینویسم.

استفاده از کش

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

استفاده از کد منظم و بهینه

 کدهای بهینه ‌سازی شده و بهینه نویسی CSS, PHP، JavaScript و HTML می‌تواند کمک کننده باشد. حذف فاصله‌ها، فشرده ‌سازی کدها می‌تواند بهبود سرعت بارگذاری را به همراه داشته باشد. استفاده از تکنولوژی‌ و فریم ورک های بهینه‌تر برای کد نویسی سرعت بارگذاری را بهبود بخشد.

استفاده از lazy loading

استفاده از تکنیک lazy loading برای تصاویر، فایل‌های چندرسانه‌ای و حتی کد های کم اهمیت تر و کم اولویت تر، به کمک تاخیر در بارگذاری محتوا های غیرضروری در ابتدای بارگذاری صفحه کمک می‌کند.

طراحان قالب وردپرسی میتوانند با بهبود این عوامل، سرعت بارگذاری وب ‌سایت را بهبود ببخشند و یکی از فاکتور های مهم در قالب وردپرسی را لحاظ کنند.

طراحی بر اساس اصول ریسپانسیو (واکنش گرایی)

ریسپانسیو واکنش‌پذیری یکی از عناصر اساسی طراحی وب است که بر اساس اندازه صفحه نمایش کاربر (مانیتور کامپیوتر، تلفن همراه، تبلت و غیره)، طراحی وب ‌سایت را تغییر میدهد. این ویژگی بسیار مهم است زیرا افراد از دستگاه‌ های مختلف برای دسترسی به اینترنت استفاده می‌کنند و نیازمند تجربه کاربری یکسان و بهینه در همه این دستگاه‌ها هستند. 

در طی 10 ساله گذشته  سرچ با تلفن همراه افزایش چند برابری داشته و ریسپانسیو بودن سایت یکی از مهم ترین ویژگی هایی است که یک قالب وردپرسی باید داشته باشد.

بهبود واکنش‌پذیری و ریسپانسیو وب سایتتان باعث افزایش رتبه‌بندی سئو و جذب بیشترین ترافیک از تمامی دستگاه‌ها خواهد شد و کاربران بهتری را به سمت وب سایت جذب خواهد کرد.

برای بوجود آوردن امکان واکنشگرایی، قبلتر باید یک قالب جداگانه برای ابعاد گوشی طراحی شود.

اما الان برای جلوگیری از ایجاد این همه کد اضافه از راه کار های مختلفی می توان کمک گرفت که در ادامه به آنها اشاره میکنم.

برخی راهکارهای موثر برای گسترش و بهبود ویژگی واکنش‌پذیری و ریسپانسیو وب سایت عبارتند از:

• طراحی مبتنی بر Grid و Flexbox: استفاده از سیستم‌های طراحی گرید و فلکس‌باکس (Grid & Flexbox) کمک می‌کند تا وب ‌سایت به طور اتوماتیک واکنش نشان دهد و محتوا به خوبی در انواع دستگاه‌ها قابل دسترس باشد.
• استفاده از Media Queries: از طریق CSS و Media Queries می‌توانید طرح بندی و استایل‌های مختلفی را برای ابعاد مختلف صفحه‌نمایش تعریف کنید. این امکان را به شما می‌دهد تا طراحی را بر اساس ابعاد دستگاه کاربر تغییر دهید

 

عیب یابی و تست ها

لازم است که بعد استفاده از تکنولوژی های نامبرده به دیباگ کردن و عیب یابی بپردازید که در ادامه یک ابزار های چک کردن واکنش گرایی را نام برده ام.

آزمون و ارزیابی: استفاده از ابزارهای آزمون و ارزیابی واکنش‌پذیری مانند Google’s Mobile-Friendly Test برای بررسی و تشخیص نقاط ضعف در وب سایتتان

چند توصیه نویسنده

 توجه به تجربه کاربری (UX): استفاده از آیکون‌ها و فونت‌های قابل دسترس برای اندازه‌های کوچک و همچنین افزودن فضای کافی بین المان‌ها را باید رعایت شود تا اندازه مناسبی از کلیک و لمس برای کاربر فراهم شود.

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

 

استفاده از کدهای استاندارد

 

استفاده از تگ‌های HTML5 مناسب برای هر بخش از محتوا. به عنوان مثال، استفاده از تگ‌های header، footer، nav، section، article و غیره به جای تگ‌های div بدون دلیل منطقی.

استفاده از ساختار منطقی و ترتیب درست برای قرار دادن المان‌ها در کد HTML، مانند استفاده از عناوین (h1 تا h6) به ترتیب منطقی 

استفاده از هدینگ‌ها به شکل درست می‌تواند به موتورهای جستجو را کمک کرده و در درک موضوعات مطلب و ارتباط‌های محتوایی کمک کند. این ممکن است باعث افزایش رتبه‌بندی صفحات شود.

استفاده از تگ‌های هدینگ برای عناوین و موضوعاتی که با اهمیت یکسانی نیستند، باعث ایجاد عدم تطابق بین محتوا و ساختار تگ‌های هدینگ می‌شود

طراحی صفحه 404

با بهبود ساختار HTML/CSS وب سایتتان، می‌توانید عملکرد وب سایت خود را بهبود بخشید و تجربه کاربری را بهبود بخشید که در نهایت بهبود سئو و موقعیت در نتایج جستجو نیز خواهد داشت. صفحه‌های 404 معمولاً به عنوان صفحه خطا یا صفحه پیدا نشد به کار می‌روند و زمانی نمایش داده می‌شوند که یک کاربر به یک URL غیرموجود در وب سایت شما دسترسی پیدا کند. عدم وجود یا طراحی نکردن صفحه 404 می‌تواند تأثیرات منفی متعددی بر روی سئو وب سایت شما با خروج کاربر داشته باشد.

 وجود یک صفحه 404 مناسب که کاربر را هدایت کند و اطلاعات مفیدی درباره خطا ارائه دهد، می‌تواند به تجربه کاربری کمک کند. عدم وجود صفحه 404 یا وجود یک صفحه ناقص و بدون اطلاعات، ممکن است باعث نارضایتی کاربران و ترک وب سایت شود.

وجود صفحه 404 کامل و مناسب می‌تواند کمک کند تا کاربران به جستجوی دیگر در وب سایت شما ادامه دهند و از این راه محتواهای دیگر را کشف کنند. عدم وجود یا ناقص بودن صفحه 404 ممکن است باعث کاهش میزان جستجو در وب سایت شما شود. موتورهای جستجو ممکن است صفحاتی که به صورت مداوم خطا 404 نمایش می‌دهند را به عنوان محتوای ناپایدار تلقی کنند که می‌تواند منجر به کاهش رتبه‌بندی سایت شود. 

بند پایانی برای قالب نویسان وردپرس

سئو یا بهینه ‌سازی موتورهای جستجو، مجموعه‌ای از تکنیک‌ها و استراتژی‌های است که به منظور بهبود موقعیت و رتبه بندی بر روی کلمات کلیدی یک وب‌ سایت در نتایج جستجوی موتورهای جست و جو مانند گوگل، بینگ، یا یاهو استفاده می‌شود. طراحان قالب‌های وردپرسی باید مواردی از جمله استفاده از تگ های درست، استفاده از الگوریتم ایجاد URL و همچنین کد نویسی تمیز را در طراحی قالب وردپرسی رعایت کنند تا یک سایت پس از بهره برداری با مشکلات عظیم تکنیکال سئو مواجه نشوند.