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

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

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

در اینجا آنچه طرفداران جستجوی Google توصیه می کنند آورده شده است.

مشکل تصویر CSS

در طول قسمت ، جان مولر یک مسئله تکراری را به اشتراک گذاشت:

“من کسی را به من پی می برد که فکر می کنم هفته گذشته یا یک هفته قبل در رسانه های اجتماعی:” به نظر می رسد که توسعه دهنده من تصمیم گرفته است از CSS برای همه تصاویر استفاده کند زیرا آنها معتقدند که این بهتر است. ” آیا این کار می کند؟ “

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

هنگامی که تصاویر از طریق خصوصیات پس زمینه CSS به جای برچسب های تصویر HTML استاندارد اضافه می شوند ، ممکن است در DOM صفحه ظاهر نشوند ، بنابراین نمی توان ایندکس کرد.

همانطور که مارتین اسپلیت توضیح داد:

“اگر شما یک تصویر محتوا دارید ، اگر تصویر بخشی از محتوا است … شما می خواهید img، یک برچسب تصویر یا یک picture برچسب که در واقع تصویر واقعی را به عنوان بخشی از DOM دارد زیرا می خواهید ما مانند آه ببینیم ، بنابراین این صفحه دارای این تصویر است که فقط دکوراسیون نیست. این بخشی از محتوا است و سپس جستجوی تصویر می تواند آن را انتخاب کند. “

محتوا در مقابل دکوراسیون

تفاوت بین یک تصویر محتوا و یک تصویر تزئینی در این است که آیا معنی آن را اضافه می کند یا صرفاً آرایشی است.

تصاویر تزئینی ، مانند پس زمینه های طرح دار ، جلوه های جوی یا انیمیشن ها با استفاده از CSS با اطمینان قابل اجرا هستند.

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

Splitt مثال زیر را ارائه داد:

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

در چنین مواردی ، قرار دادن تصویر در HTML با استفاده از img یا picture TAG تضمین می کند که آن را به عنوان بخشی از محتوای صفحه درک کرده و واجد شرایط برای فهرست بندی در جستجوی تصویر Google است.

چه چیزی تصاویر CSS را نامرئی می کند؟

Splitt توضیح داد که چرا این اتفاق می افتد:

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

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

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

Splitt اضافه می کند:

“در حالت ایده آل جدایی بین نحوه نگاه سایت و محتوا وجود دارد.”

در مورد عکس های سهام چطور؟

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

Splitt می گوید:

این تیم خاطرنشان كرد: “این معنی هنوز هم مانند این تصویر مال من نیست. این تصویر سهام است كه ما خریداری كردیم یا مجوز آن را داشتیم اما هنوز هم بخشی از محتوا است.”

در حالی که این تصاویر ممکن است به دلیل تکثیر رتبه بسیار خوبی نداشته باشند ، اجرای آنها در HTML هنوز هم به نمایه سازی مناسب کمک می کند و دسترسی را بهبود می بخشد.

چرا این مهم است

این تیم چندین نمونه را برجسته کرد که در آن اجرای نادرست می تواند دید را کاهش دهد:

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

بعد چه کاری انجام شود

نظرات Google نشان می دهد که شما باید این بهترین شیوه ها را دنبال کنید:

• از HTML استفاده کنید (img یا picture) برچسب ها برای هر تصویری که محتوا را منتقل می کند یا در صفحه ارجاع می شود.
• زمینه های CSS را برای تصاویر تزئینی که معنی ندارند ، رزرو کنید.
• اگر ممکن است کاربران انتظار داشته باشند که از طریق جستجو تصویری پیدا کنند ، باید در HTML باشد.
• اجرای مناسب نه تنها به SEO ، بلکه با ابزارهای دسترسی و خوانندگان صفحه نمایش نیز کمک می کند.

نگاه کردن

ناشران باید نسبت به نحوه اجرای تصاویر توجه داشته باشند.

در حالی که CSS ابزاری قدرتمند برای طراحی است ، استفاده از آن برای ارائه تصاویر مرتبط با محتوا ممکن است با بهترین شیوه ها برای نمایه سازی ، دسترسی و استراتژی SEO بلند مدت مغایرت داشته باشد.

به قسمت کامل پادکست در زیر گوش دهید:

https://www.youtube.com/watch؟v=l2e3gbdp_qy

تصویر برجسته: رومی سامبورسکی/شاتر