اگر ووکامرس را با المنتور ترکیب کردهای، احتمالاً مثل من عاشق انعطافبینهایت طراحی صفحات محصول، دستهبندی و حتی کارت محصولات هستی. اما بیا رک باشیم: این ترکیب محبوب در کنار قدرتی که میدهد، میتواند یک بمب ساعتی برای سئو باشد. بارها پیش آمده که مدیری با هیجان از طراحی زیبای فروشگاهش با المنتور تعریف کرده، بعد با ناامیدی پرسیده: «چرا گوگل قهر کرده؟ سرعت افتضاحه، حتی بعضی صفحاتم ایندکس نشده.»
حدود دو سال پیش، یک برند پوشاک با فروشگاه ووکامرسی که کاملاً با المنتور طراحی شده بود به من مراجعه کرد. قالبهای داینامیک المنتور برای محصولات داشت، اما LCP روی موبایل ۹ ثانیه بود. تعداد درخواستهای HTTP بهخاطر فایلهای CSS و JS اضافی المنتور، از ۱۲۰ رد میشد. صفحات دستهبندی با طراحی پیچیده، فقط ۲۰۰ کلمه محتوای مفید داشتند و باقی تصاویر متحرک بود. گوگل آنها را Thin Content محسوب میکرد. بعد از یک جراحی تمامعیار، توانستیم بدون از دست دادن طراحی زیبا، LCP را به ۱.۹ ثانیه برسانیم و ترافیک را ۴ برابر کنیم.
در این مقاله، میخواهم تجربهٔ سالها کار روی فروشگاههای ووکامرس مبتنی بر المنتور را گامبهگام به شما منتقل کنم. اگر قرار است فروشگاهی با المنتور بسازید یا از قبل ساختهاید، این راهنما شما را از دامهای مرگبار سئو نجات میدهد.
۱. چالشهای سئو در ووکامرس + المنتور – چرا این ترکیب خطرناک است؟
المنتور یک صفحهساز فوقالعاده است، اما ذاتاً برای «طراحی بصری» ساخته شده، نه «سئو». وقتی آن را با ووکامرس که حجم انبوهی از صفحات داینامیک دارد ترکیب میکنیم، سه تهدید بزرگ ظاهر میشوند:
انفجار CSS و JS: المنتور برای هر ویجت، استایل و اسکریپت جداگانه بارگذاری میکند. در یک صفحه محصول با ۱۵ ویجت (گالری، قیمت، توضیحات، محصولات مرتبط و…)، ۳۰-۴۰ فایل CSS/JS اضافی فراخوانی میشود. این یعنی افزایش شدید تعداد درخواستهای HTTP و کاهش سرعت، مخصوصاً روی موبایل.
محتوای تزئینی به جای محتوای متنی: بسیاری با المنتور صفحاتی پر از آیکون، انیمیشن و تصاویر میسازند، اما فراموش میکنند که گوگل عاشق متن است. اگر توضیحات محصول در چند تب مخفی شود یا پشت اسلایدر برود، گوگل ممکن است آن را کماهمیت تلقی کند.
ساختار HTML درهمریخته: المنتور برای چیدمان از
<div>های تو در تو استفاده میکند. این کار خواندن ساختار صفحه برای رباتهای گوگل را دشوارتر میکند و میتواند نسبت متن به کد (Text-to-HTML Ratio) را به شدت کاهش دهد.
اما نترسید. راهحلهای دقیقی برای همهٔ اینها وجود دارد.
۲. قدم اول: قبل از طراحی، المنتور را برای سئو تنظیم کن
قبل از اینکه اولین صفحه محصول را با المنتور طراحی کنید، به پیشخوان > المنتور > تنظیمات بروید و این تیکها را بزنید:
تب Features:
Element Caching: اگر دارید (المنتور پرو نسخه جدید)، فعال کنید. این ویجتها را کش میکند.
Optimized Markup: فعال کنید. باعث میشود
<div>های غیرضروری حذف شود.Improved Asset Loading: فعال کنید. فقط CSS/JS ویجتهایی که در صفحه استفاده میشوند بارگذاری شوند، نه همه.
Lazy Load Background Images: فعال کنید.
تب Experiments:
Optimized DOM Output: فعال.
Improved CSS Loading: فعال. اینها قابلیتهای آزمایشی هستند که المنتور برای کاهش حجم کدها ارائه میدهد. آنها را تست کنید (معمولاً پایدارند).
تب Advanced:
Load Font Awesome: روی “None” بگذارید اگر از آیکونهای FA استفاده نمیکنید. در غیر این صورت، فقط SVG یا یک کیت سبک.
افزونههای مکمل حیاتی:
Elementor Speed Optimizer: (رایگان، از خود مخزن) بهینهسازیهای اضافی انجام میدهد.
Disable Elementor Defaults: بعضی فونتها و استایلهای پیشفرض اضافی را حذف میکند.
۳. قدم دوم: معماری صفحات محصول با المنتور به شیوهٔ سئو
المنتور در ووکامرس به شما اجازه میدهد یک قالب واحد (Single Product Template) با Theme Builder طراحی کنید و به همهٔ محصولات اعمال شود. این عالی است، اما اگر اشتباه پیادهسازی شود، فاجعه است.
۳.۱. ساختار تگهای هدینگ (H1, H2,…) را گم نکنید
H1: ویجت محصول (Product Title) معمولاً در بالای صفحه است. مطمئن شوید که فقط یک H1 در کل صفحه وجود دارد. المنتور بهطور پیشفرض این کار را درست انجام میدهد، اما گاهی طراحان یک تیتر سفارشی با ویجت Heading اضافه میکنند و آن را H1 میکنند. رتبه را به باد خواهید داد.
H2ها: بخشهای توضیحات، مشخصات، نظرات، و FAQ را با ویجتهای Heading به عنوان H2 ساختاربندی کنید. مثلاً:
H2: توضیحات محصول
H2: مشخصات فنی
H2: نظرات کاربران
H2: سوالات متداول
۳.۲. توضیحات محصول: متن را از چنگ ویجتهای تجملی نجات دهید
دو بخش توضیحات در ووکامرس وجود دارد: Short Description و Long Description.
توضیحات کوتاه: بالای صفحه، کنار گالری. یک ویجت “Short Description” ووکامرس را قرار دهید. این متن باید ۱-۲ جملهٔ فروش قوی با کلمه کلیدی باشد. آن را در تب یا Toggle مخفی نکنید.
توضیحات بلند: یک ویجت “Product Content” (یا “Description”) ووکامرس را بگذارید. این محتوای اصلی شماست. هرگز آن را با ویجت Text Editor سادهٔ المنتور جایگزین نکنید، زیرا ووکامرس Schema و ساختار داده را به هم میریزد. از افزونهٔ المنتور برای ووکامرس (مثل “Elementor WooCommerce Builder” یا قابلیت Theme Builder خود المنتور پرو) استفاده کنید که ویجتهای داینامیک ووکامرس را میشناسد.
۳.۳. تبها و آکاردئونها: محتوا را مخفی نکنید (یا با احتیاط)
اگر از تبها (Tabs) یا آکاردئون (Accordion) برای پنهان کردن توضیحات، مشخصات یا نظرات استفاده میکنید، دقت کنید:
گوگل محتوای مخفی در تبها را میخواند و ایندکس میکند (مخصوصاً اگر با CSS
display:noneپیادهسازی شده باشند، نه با جاوااسکریپت داینامیک). اما وزن کمتری به آن میدهد. برای سئو بهتر است توضیحات اصلی بلافاصله قابل مشاهده باشد. اگر از تب استفاده میکنید، تب اول را “توضیحات” بگذارید و پیشفرض باز باشد.از افزونههای مخصوص FAQ Schema استفاده کنید و سوالات را در یک آکاردئون جداگانه با Schema
FAQپیادهسازی کنید.
۳.۴. گالری تصاویر: زیبا و سبک
از ویجت “Product Images” ووکامرس استفاده کنید، نه گالری تصاویر سادهٔ المنتور. این ویجت به Schema
Productمتصل است.تنظیمات حیاتی: در المنتور، تصاویر گالری را روی “Thumbnail” یا “Medium” تنظیم کنید، نه “Full”. بارها دیدهام که طراحان کل گالری را روی سایز اصلی (۴۰۰۰ پیکسل) تنظیم میکنند و فاجعه به بار میآید.
Lazy Loading: حتماً فعال کنید.
۳.۵. محصولات مرتبط و Upsells
از ویجتهای “Related Products” و “Up-sells” ووکامرس استفاده کنید. آنها را با ویجتهای دستی (Posts) جایگزین نکنید، چون ارتباط داینامیک با محصول ندارند.
در المنتور، میتوانید ظاهر آنها را با Loop Grid (در نسخههای جدید) زیبا کنید، اما منبع داده را روی “Related” یا “Up-sells” بگذارید.
۴. قدم سوم: سرعت؛ المنتور را به یک موشک تبدیل کنید
این گام اگر جدی گرفته نشود، تمام زحمات نقش بر آب میشود.
۴.۱. CSS و JS اضافی را با جراحی حذف کنید
افزونه Perfmatters (پولی) یا Asset CleanUp (رایگان): با این ابزار میتوانید فایلهای CSS/JS غیرضروری المنتور را در صفحاتی که استفاده نمیشوند، غیرفعال کنید. مثلاً اگر در صفحهٔ محصول از ویجت “Flip Box” استفاده نکردهاید، استایل و اسکریپت آن را میتوانید از بارگذاری در آن صفحه منع کنید.
در خود المنتور (با Improved Asset Loading): این قابلیت بهطور خودکار خیلی از این کارها را میکند، اما ترکیبش با Perfmatters ایدهآل است.
۴.۲. فونتها را قربانی سرعت کنید
Google Fonts: در تنظیمات المنتور (یا با افزونههای مستقل)، فونتهای گوگل را خودمیزبانی کنید (Self-host) و فقط وزنهای ضروری را نگه دارید. افزونه OMGF این کار را عالی انجام میدهد.
آیکونها: به جای Font Awesome کامل که ۱۰۰ کیلوبایت است، از SVG های سفارشی یا کتابخانههای کوچک استفاده کنید. المنتور تنظیماتش را دارد. من معمولاً FA را کلاً غیرفعال میکنم و به طراحان میگویم از آیکونهای SVG یکپارچه استفاده کنند.
۴.۳. کش و CDN هوشمند
WP Rocket: تنظیمات پیشرفته دارد برای فشردهسازی و ترکیب فایلها. اما برای المنتور، هرگز JS را ترکیب (Combine) نکنید مگر اینکه خیلی مطمئن باشید. چون جاوااسکریپتهای داینامیک المنتور به راحتی با ترکیبشدن میشکنند. فقط Minify کنید.
کش بخشهای پویا: اگر از بخشهای داینامیک مثل “محصولات پربازدید” در صفحه اصلی استفاده میکنید، آنها را با یک زمان انقضای کوتاه کش کنید تا هر بار از دیتابیس نخوانند.
CDN: ArvanCloud یا Cloudflare با قانون Page Rule برای کش HTML (اگر کاربران لاگین ندارند). با احتیاط، چون سبد خرید کاربران لاگینشده نباید کش شود. افزونهٔ ووکامرس کش به طور پیشفرض کاربران لاگینشده را نادیده میگیرد.
۴.۴. تصاویر محصول: قانون طلایی
افزونهٔ Imagify یا Converter for Media را تنظیم کنید تا تمام تصاویر آپلودشده را به WebP تبدیل کند.
ویجتهای تصویر المنتور: تکتک تصاویر پسزمینه و تزئینی را نیز فشرده کنید. میتوانید از فیلترهای CSS برای جایگزینی برخی تصاویر استفاده کنید.
۵. قدم چهارم: Schema و ساختار داده – موتور محرکهٔ Rich Results
المنتور خودش Schema تولید نمیکند. این وظیفهٔ افزونهٔ سئو شماست. با این حال، تداخل المنتور با Schema نادر است، اما باید بررسی کنید:
از Rank Math یا Yoast WooCommerce SEO استفاده کنید. آنها به طور خودکار اسکیمای
Productرا بر اساس دادههای ووکامرس (قیمت، موجودی، تصویر) میسازند.مشکل رایج: وقتی با المنتور یک قالب سفارشی برای محصول میسازید، گاهی ویجت “Product Price” یا “Product Image” که انتخاب میکنید، خروجی HTML را تغییر میدهد و افزونه سئو ممکن است نتواند قیمت را از DOM بخواند. این را با تست Rich Results (در Search Console) برای یک محصول چک کنید. اگر خطا بود، ممکن است نیاز باشد ویجت اصلی ووکامرس (نه یک ویجت متنی ساده) را استفاده کنید.
نظرات: ویجت “Product Reviews” ووکامرس را در قالب قرار دهید. این نظرات با Schema
aggregateRatingترکیب میشوند.FAQ Schema: اگر سوالات متداول را با آکاردئون المنتور میسازید، میتوانید بهصورت دستی (با Rank Math) در آن صفحه FAQ Schema اضافه کنید. یا از یک افزونه FAQ که به صورت داینامیک به محصولات متصل میشود استفاده کنید.
۶. قدم پنجم: لندینگ پیجهای دستهبندی با المنتور
صفحات دستهبندی هم میتوانند با قالبهای المنتور زیبا شوند. این نکات را رعایت کنید:
توضیحات دسته: در بالای لیست محصولات (نه داخل یک تب مخفی) یک بخش با ویجت “Category Description” قرار دهید. محتوای غنی با کلمه کلیدی داشته باشید.
لیست محصولات: از ویجت “Products” یا “Loop Grid” با منبع “Current Query” استفاده کنید. این یعنی ووکامرس تعیین میکند چه محصولاتی در این دسته نمایش داده شوند، نه یک انتخاب دستی محدود. این برای سئو حیاتی است چون با تغییر محصولات، صفحه بهروز میماند.
فیلترها: اگر از فیلترهای AJAX المنتور یا ووکامرس استفاده میکنید، مطمئن شوید که URL های فیلتر (مثلاً
/category/shirt/?filter_color=blue) یا Canonical به صفحه اصلی دسته هستند، یاnoindexشدهاند.
۷. یک اسکریپت ساده برای آنالیز حجم کدهای اضافی
من گاهی برای سایتهای بزرگ اسکریپتهای پایتون مینویسم تا بررسی کنم کدام ویجتهای المنتور بیشترین فایلهای CSS/JS را در یک صفحه خاص بارگذاری میکنند. برای استفادهٔ شما، در اینجا یک اسکریپت مفهومی ساده (با فرض دسترسی به لاگ یا تحلیل دستی) میآورم که ایده را نشان میدهد: میتوانید از کروم DevTools، تب Network، منابع CSS/JS را فیلتر کنید و آنهایی که از /elementor/assets/ میآیند و حجم بالایی دارند را شناسایی کنید. سپس با Perfmatters آنها را غیرفعال کنید. این فرآیند را میتوان با یک اسکریپت headless مرورگر خودکار کرد، اما به دلیل پیچیدگی در اینجا متنی نمیآورم.
یک مطالعهٔ موردی واقعی: بازسازی فروشگاه پوشاک با المنتور (همان داستان ابتدا)
وضعیت اولیه:
ووکامرس + المنتور پرو، ۱۵۰۰ محصول، قالبهای سفارشی برای محصول و دستهبندی.
LCP: 9.2s (موبایل), Total Blocking Time: 2.5s.
۴۰٪ صفحات دستهبندی “Crawled – currently not indexed” (Thin Content).
فروش ارگانیک: ۲۰ میلیون تومان در ماه.
اقدامات (۵ ماه):
تنظیمات المنتور: فعالسازی Optimized Markup، Improved Asset Loading، Lazy Load. حذف Font Awesome و خودمیزبانی IRANSans.
بهینهسازی CSS/JS: با Perfmatters، استایل ویجتهای غیرضروری (Flip Box, Price List,…) را در صفحات محصول و دسته حذف کردیم. حجم کل CSS در هر صفحه از ۵۰۰KB به ۱۲۰KB رسید.
بازطراحی قالب محصول: H1 به درستی تنظیم شد. توضیحات بلند از داخل تب خارج شد و در یک بخش باز قرار گرفت. FAQ Schema با Rank Math اضافه شد.
غنیسازی صفحات دستهبندی: برای ۲۰ دستهٔ اصلی، ۴۰۰ کلمه محتوای منحصربهفرد اضافه شد و در قالب، بالای محصولات قرار گرفت.
سرعت: WP Rocket با Redis، تصاویر WebP، و CDN ابر آروان. LCP به 1.9s کاهش یافت.
نتایج:
ترافیک ارگانیک: از ۸,۰۰۰ به ۳۲,۰۰۰ بازدید ماهانه (+۳۰۰٪).
فروش از گوگل: از ۲۰ به ۷۵ میلیون تومان در ماه.
تمام صفحات کلیدی ایندکس شدند.
جمعبندی: المنتور را به متحد سئو تبدیل کن
المنتور و ووکامرس میتوانند یک فروشگاه رؤیایی و در عین حال سریع و سئو شده بسازند، اگر تعادل بین زیبایی و عملکرد را رعایت کنید. طراحی زیبا را فدای سرعت نکنید، بلکه با هوشمندی، بار اضافی را بتراشید. محتوا را پنهان نکنید و ساختار تگهای هدینگ را حفظ کنید. اگر المنتور را روی یک زیرساخت ووکامرس سئوشده (طبق اصولی که در مقالات قبلی گفتیم) سوار کنید، میتواند یک ماشین فروش بینظیر باشد.
من طاها هستم و سالهاست با ترکیب ووکامرس و المنتور، فروشگاههایی ساختهام که هم چشم نوازند، هم گوگل را عاشق خود کردهاند. اگر فروشگاهی با المنتور دارید که سرعت یا ایندکس آن اذیتتان میکند، با طاها حرف بزنید. شاید یک جلسه مشاوره بتواند معمای کندی و سئو را برای همیشه حل کند. بدون شعار، فقط تجربه.