Rise Company
22-11-2020, 02:16
سيو 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
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