همه روش های مخفی کردن عناصر در طراحی سایت

گ

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

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

مخفی کردن عناصر

چرا عناصر را در صفحه وب پنهان می کنیم؟

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

مخفی کردن عناصر از صفحه وب با خصوصیت display

اولین و معمول ترین روش برای مخفی کردن عناصر، استفاده از خصوصیت Display در CSS هست. به این صورت که برای کلاس مورد نظر، خصوصیت display رو برابر با none در نظر می گیریم. به مثال زیر توجه کنید:

این روش عنصر مورد نظر را به طور کل از صفحه حذف می کند و هیچ اثری از آن باقی نمی گذارد. در استفاده از این روش باید نهایت دقت را به کار ببرید. چون اگر در جای نامناسبی استفاده شود،  بر روی سئوی سایت شما تاثیر منفی خواهد گذاشت. به طور مثال نباید تگ های h1 تا h6 رو با این روش مخفی کنید. یک نمونه از استفاده درست از این روش، منو های کشویی هست. به این صورت که زیر منو در حالت عادی خاصیت display:none را میگیرد و هنگامی که موس روی منو قرار گرفت، خصوصیت display:block را میگیرد.

مخفی کردن عناصر با خاصیت visibility

دومین روش مخفی کردن عناصر که استفاده زیادی نیز دارد، تعیین مقدار hidden برای خصوصیت visibilityاست. برای درک بهتر این موضوع به مثال زیر توجه کنید:

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

مخفی کردن عناصر با خاصیت opacity

روش دیگری که کاربرد خوبی دارد و تاثیر کمی روی سئو دارد استفاده از خصوصیت opacity:0 است. همانطور که می دانید خصوصیت opacity برای تعیین شفافیت عناصر استفاده می شود. وقتی که مقدار ۰ را برای این خصوصیت در نظر می گیرید، عنصر نامرئی می شود. اما مکانش همچنان رزرو شده یا اشغال شده باقی می ماند.

مخفی کردن عناصر بدون تاثیر بر سئو با خاصیت height

در این روش که معمولا تاثیر منفی بر روی سئو نمی گذارد، ارتفاع و عرض عنصر صفر در نظر گرفته می شود و خصوصیت overflow برابر با hidden قرار داده می شود تا عنصر مخفی شود. به مثال زیر دقت کنید:

این روش به احتمال بالای ۹۰ درصد تاثیر منفی روی سئو ندارد. اما همیشه سعی کنید از روش های مخفی سازی عناصر خیلی کم استفاده کنید.

مخفی کردن عناصر بدون تاثیر بر سئو با خاصیت position

این روش هم تاثیری بر سئو ندارد. روش کار به این صورت است که خصوصیت Position را برابر با absolute در نظر می گیرید تا بتوانید به راحتی مکان آن را هر جایی که خواستید در نظر بگیرید. سپس خصوصیت های top و left را برابر با -۹۹۹۹ در نظر میگیرید. مثال:

این ترفند هیچ اثری بر روی سئو ندارد. ولی ممکن است مشکلاتی در نمایش سایت به وجود بیاورد. مثلا اسکرول افقی به پایین صفحه اضافه کند که برای رفع این مشکل باید یک خصوصیت overflow-x:hidden برای تگ body در نظر بگیرید.

توجه: هر کدام از روش های بالا اگر کار نکرد توجه داشته باشید که اول یک !important در جلوی مقادیر بگذارید. دلیل این عدم عملکرد شاید این باشد که با یک استایل دیگر تداخل داشته باشد.

سخن پایانی

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

از کارشناسان پرگاس انفورماتیک مشاوره تخصصی بگیرید

نرم افزار باشگاه مشتریان, طراحی سایت اختصاصی، نرم افزار مالی سپیدار

۵۶ ۲۸۴ ۲۸۴ (۰۲۱)