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

همه روش های مخفی کردن عناصر در طراحی سایتReviewed by جواد نبوی on Sep 28Rating: 4.0

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

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

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

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

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

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

<style>
.hidden{
display:none;
}
</style>
<div class="hidden">متن آزمایشی</div>

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

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

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

<style>
.hidden{
visibility:hidden;
}
</style>
<div class="hidden">متن آزمایشی</div>

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

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

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

<style>
.hidden{
opacity:0;
}
</style>
<div class="hidden">متن آزمایشی</div>

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

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

<style>
.hidden{
height:0;
width:0;
overflow:hidden;
}
</style>
<div class="hidden">متن آزمایشی</div>

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

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

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

<style>
.hidden{
position:absolute;
top:-9999;
left:-9999;
}
</style>
<div class="hidden">متن آزمایشی</div>

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

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

سخن پایانی

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

در هر صورت دو روش پایانی از روش های دیگر بهتر است. با آرزوی شادی و موفقیت.

تبلیغات

نویسنده (مدیر سایت)

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

2 دیدگاه برای “همه روش های مخفی کردن عناصر در طراحی سایت”

  1. حااااامد گفت:

    با سلام و وقت بخیر
    یک قالب رو کپی کردیم و حالا یک قسمت تماس با ما داره که از این کدهای مخفی استفاده کرده
    چطور باید اون هارو پیدا کنیم ؟
    ممنون

    1. جواد نبوی گفت:

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

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *