معمای بصری پنهان: استاد دسترسی یا خرابکار سئو؟

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

بیایید کمی فراتر از آن شروع کنیم display:noneبشر

آیا تا به حال از این روش بصری پنهان استفاده کرده اید؟

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  -webkit-clip: rect(0 0 0 0);
  clip: rect(0 0 0 0);
  overflow: hidden;
  word-wrap: normal;
}

یادت گرفتی؟ نه؟ او همان کار را با کلاس Tailwind CSS SR انجام می دهد.

آنها همان هدف را دارند: برای مخفی کردن یک عنصر بصری ، و فقط برای نمایش خوانندگان و خوانندگان SEO در دسترس قرار می گیرند. و در پایان ، دسترسی را بهبود بخشید.

اما این ممکن است تأثیر مستقیمی بر سئو داشته باشد. Google وقتی چیزی را برای جستجوی موتورهای جستجو نشان می دهد اما از کاربران پنهان می شود ، با چهره شما زیاد نمی شود. و این می تواند سایت شما را در رتبه بندی تحقیقات مجازات کند.

هدف در اینجا صحبت کردن در مورد CSS نیست ، بلکه تأثیر این تکنیک بر سئو است. اما فقط برای روشن شدن …

این تکنیک چه کاری انجام می دهد؟

به طور خلاصه:

• عنصر جریان طبیعی صفحه را حذف می کند
• اندازه آن را به صفر کاهش می دهد
• و فاصله را حذف می کند

از نظر بصری مخفی یک عنصر بصری را پنهان می کند ، اما آن را در دسترس خوانندگان و روبات های Google قرار می دهد.

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

نمونه ای از این نوع اطلاعات را در وب سایت اپل مشاهده کنید. در تصویر زیر ، در زیر هر محصول ، یک دکمه با برچسب “یادگیری بیشتر” وجود دارد:

برای افراد دارای دید ، مشخص است که هر دکمه “بیشتر می آموزد” چه کاری انجام می دهد: اطلاعات بیشتری را نشان می دهد در مورد محصول آن زمینهبشر اما این به تنهایی برای دسترسی کافی نیست. چگونه می توان آن را برای همه روشن کرد که این دکمه ها چه کاری انجام می دهند؟

درک دکمه “بیشتر بیاموزید”

اگر کنجکاو هستید ، یک خواننده صفحه را روی رایانه خود نصب کنید.

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

اما در طول یک لیست محصول ، این کسل کننده و بی تأثیر است. “بیشتر بدانید” ، “بیشتر بدانید” ، “بیشتر بدانید” … درباره آنچه ، تقدیس من بیشتر بدانید؟

برای اصلاح این روش چند راه وجود دارد.

راه حل 1: اطلاعات بیشتر در مورد دکمه قرار دهید

به عنوان یک راه حل ، آنزو جلوی نام هر محصول را در The Learn More قرار داد:

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

راه حل 2: بصری پنهان

این تکنیکی است که من در ابتدا در آنجا اظهار نظر کردم.

شما می توانید و همچنین در راه حل 1 انجام دهید ، اما نام محصول را از نظر بصری مخفی کنید:

این باعث می شود دکمه فقط متن را به عنوان یک برچسب “یادگیری بیشتر” نشان دهد ، و خواننده صفحه نمایش روایت می کند “درباره آیفون 16 بیشتر بدانید”.

اما شما در ابتدا با مشکلی که من در ابتدا گفتم ، این مسئله فقط برای بخشی از کاربران در دسترس است. بنابراین ، Google در سایت شما شانه خواهد کرد.

Shopify همچنین به دلایل چیدمان چیزی را از نظر بصری پنهان نمی کند.

راه حل 3: آریا برچسب

راه حلی که اپل در این صفحه اتخاذ کرد ، قرار دادن متن کامل در این ویژگی بود aria-labelبشر

به نظر من بهترین راه حل تاکنون است ، زیرا خواننده صفحه نمایش اولویت بندی می کند aria-label با توجه به محتوای برچسب HTMLبشر بنابراین ، هیچ تکنیک مبهمی برای پنهان کردن بصری چیزها وجود ندارد.

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

• عناوینی که باید در HTML باشند اما بخشی از طراحی نیستند
• متون توضیحی اضافی برای کاربران دارای دید غیر ضروری است
• برچسب های فرم طراحی مینیمالیستی

اما بعد از همه …

از نظر بصری پنهان بر سئو سایت تأثیر می گذارد؟

اول از همه ، شما می دانید که چیست رک؟

به گفته گوگل ، Cloaking (استتار به زبان پرتغالی) تکنیکی برای ارائه محتوای مختلف در سایت بسته به اینکه به چه کسی دسترسی پیدا می کند. اگر یک کاربر معمولی باشد ، چیزی را نشان می دهد. اگر موتور جستجو باشد ، دیگری را نشان می دهد. این یک استتار محتوا است.

آیا چیزی را به خاطر می آورد؟

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

بنابراین می توانم نتیجه بگیرم که از نظر بصری مخفی باعث پنهان شدن می شود و به زودی بد است. درست است؟ کم و بیش

در صفحه ای که در بالا به آن اشاره کردم ، گوگل از نمونه های بسیار شدید برای توضیح استفاده از لباس استفاده می کند:

• شما صفحه ای را در یک موضوع (داروی تخفیف) ایجاد می کنید ، اما آن را تنظیم می کند تا هنگام دسترسی به یک موتور جستجو ، موضوع دیگری (مقصد سفر) را نشان دهد
• شما کلمات “نامرئی” را در صفحه ای که کاربر نمی بیند وارد می کنید ، اما به روبات ها ظاهر می شود

این به نظر می رسد مخرب است ، نه اینکه چند کلمه را درون یک دکمه “بیشتر بدانید” مخفی کنید.

از این گذشته ، از نظر بصری پنهان است؟ تفاوت بین دارو و سم دوز است.

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

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

اکنون به چیزی خیلی کوچک فکر نکنید ، مانند یک متن درون یک دکمه. یا خیلی عالی ، به عنوان موضوع اصلی صفحه. یک میانه را ببینید: برچسب H1 را پنهان کنید.

اگر قبلاً کمی در مورد HTML و SEO معنایی مطالعه کرده اید ، می دانید که این برچسب برای رتبه بندی سایت ضروری است. اگر او را پنهان کنم چه می شود؟

در صفحه تأثیر SEO از نظر بصری پنهان شده در H1 استفاده کنید؟

برچسب H1 HTML یکی از مهمترین صفحه ها است.

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

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

به عنوان مثال ، برچسب H1 را فقط از صفحه اصلی پنهان کنید ، کاملاً قابل درک است. اما همین مورد در مورد یک زیربنایی به عنوان یک پست وبلاگ صدق نمی کند ، زیرا ارتباط آن را در این تحقیق از دست می دهد.

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

گفته می شود ، SEO در صفحه فقط یکی از عوامل است. سپس در حالی که از عوامل دیگر مانند:

• بک لینک
• CTR
• زمان ماندگاری در صفحه
• میزان گزاف گویی
• بین دیگران

من اکیداً توصیه می کنم که این مقاله را در مورد تأثیر سئو مخفی کردن H1 در صفحه اصلی سایت بخوانید.

سرب باعث شد كه من كاوشی را انجام دهم. و حالا؟

خوب ، شما قبلاً همه چیز را در مورد پنهان و مخفی بصری می دانید.

اما فرد TechLead وارد شد و گفت به هر حال این کار را انجام می دهد. در این حالت می توانید مراقبت کنید.

استایلیز H1

از CSS به نفع خود استفاده کنید.

به تیم پیشنهاد دهید تا برچسب HTML H1 را با سبک پیش فرض ، یک متن بزرگ ، به صورت جسورانه و با برجستگی رها کنید. و در عوض ، آن را یک ظاهر طراحی کنید تا مانند یک پاراگراف مشترک به نظر برسد.

بنابراین شما همان محتوای را برای همه کاربران نگه می دارید و بدون شکستن طرح ، روبات ها را جستجو می کنید.

محتوا را با JavaScript پنهان کنید

تکنیک دیگری که می بینم اتفاقات زیادی برای وقوع آن رخ می دهد ، پنهان کردن محتوا با JavaScript است.

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

بنابراین در مورد آن فکر کنید.

گوگل سایت من را ممنوع یا مجازات کرد و به چه چیزی نگاه می کند

برای به پایان رساندن نکات ، به دنبال کنسول جستجوی Google باشید.

این ابزار برای شما برای نظارت به عنوان یک سایت جستجو ، با داده های موجود در این مورد است:

• مقدار کلیک
• کلمات کلیدی اصلی
• OTC

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

اگر همه چیز را در اینترنت در مورد SEO خوانده اید ، ماراتن demenezes.dev (COF COF) ، اما با این وجود مشکل SEO را ارائه داده اید ، می توانید در مورد نحوه اصلاح سایت های حمله شده با این راهنما مشورت کنید.

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

بازپرداخت

تکنیک بصری پنهان این است که بصری محتوای سایت را پنهان کنید ، اما آن را در دسترس خوانندگان و روبات های جستجو قرار دهید.

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

از نظر بصری پنهان لزوماً سئو سایت شما را مجازات نمی کند ، اما بله.

مخفی کردن بصری H1 در یک صفحه ممکن است مضر نباشد تا زمانی که این موضوع در صفحه اصلی اعمال شود.

اگر قبلاً تمام مراقبت ها را انجام داده اید و هنوز هم نیاز به استفاده از بصری دارید ، از برخی گزینه های دیگر استفاده کنید. شما می توانید H1 را به گونه ای طراحی کنید که به طرح یا محتوا با JavaScript آسیب نرساند (همیشه از CLS مراقبت می کند).

سرانجام ، سایت خود را به کنسول جستجوی Google متصل کنید تا از مشکلات احتمالی سئو مطلع شود.

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

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

خیلی ممنون از خواندن در صورت داشتن سؤال ، یا برای اضافه کردن به مطالب ، نظر خود را بگذارید. من از خواندن بسیار خوشحال خواهم شد 🙂