سيو Seo حل مشكلة ظهور css المخفي display:none فى google crawl

[Rise Company]

سيو Seo حل مشكلة ظهور css المخفي display:none فى google crawl
google crawl — display:none & display:block
Does Google Crawl CSS ‘display:none’ Content
Does Google index/crawl display:none divs
use javascript to hide on mobile - Seo and div display:none
Hiding DIV if using mobile browser

https://www.rise.company/upload/uploads/160600432282671.png

المشكلة :

داخل Search Console هتجد ان جوجل اظهرت مشكلة فى الموقع على الموبايل

وان الموقع غير متجاوب / او غير مناسب ظهوره على الموبايل رغم انه Responsive

وتجد من ضمن الاخطاء ايضا ان الكلام صغير - الروابط قريبة جدا من بعضها رغم عكس ذلك !!!

المشكلة ان هناك اشياء فى الموقع مخفية فى الموبايل معمول لها hidden من خلال كود css

ولكن ارشفة جوجل تشاهد hidden والذى تمك اخفائه فى الاصل لانه غير مناسب للموبايل

ولكن جوجل تشاهد موقعك بكامل اكواده دون اى اخفاء لـ display none

وهذا هو الشكل الحقيقي الذى يظهر على الهاتف ولكن لا يظهر هكذا عند ذحف جوجل

https://www.rise.company/upload/uploads/160600432307682.png

حل المشكلة :

اخفاء الاشياء من خلال كود اخفاء java Script بجانب او بديل كود اخفاء css

What I like to do in these situations is apply the display: none via JavaScript / jQuery
on $(document).ready() that way the user gets the experience you are looking for,
while Google indexes the page like so:

اذا كان هناك معرف الـ ID مثلا: #main-menu وتريد اخفائه

ضع هذا الكود فى js للتجربة على وضع الكمبيوتر


document.getElementById( 'main-menu' ).style.display = 'none';

بعد التاكد من انه يعمل قم بتطبيقه على الموبايل



document.getElementById( 'main-menu' ).style.display = 'none';


يمكنك ايضا استخدامه اكثر من مره



document.getElementById( 'main-menu1' ).style.display = 'none';
document.getElementById( 'main-menu2' ).style.display = 'none';
document.getElementById( 'main-menu3' ).style.display = 'none';


كود الموبايل مخصص WordPress فقط


if ( ! wp_is_mobile() ) {
document.getElementById( 'main-menu' ).style.display = 'none';
}

كل ما عليه فعله استبدل الازرق بالمستخدم عندك فى css
ثم ضع الكود فى custom java من خلال اى اضافة على الموقع
مثل Simple Custom CSS and JS على الووردبريس

---------------------------------------------------------------------------------
كود اخر فى حالة J Query


jQuery(document).ready(function( $ ){
$('#main-menu').hide();
});



النتيجة :

https://www.rise.company/upload/uploads/160600601056911.png

المرجع:
https://stackoverflow.com/questions/4700594/google-maps-displaynone-problem
https://stackoverflow.com/questions/23841543/hiding-div-if-using-mobile-browser

[ريزاوي]

مشكور أخي على الشرح الوافي، لقد اشتغلت معي الطريقة بفضلك
هل بإمكانك وضع شرح لطريقة تحسين ترتيب المواقع في نتائج بحث جوجل ؟
بارك الله فيك :)