Visualizza come Google - Googlebot (desktop) non esegue correttamente il rendering della pagina

Question

Ho riscontrato un problema con Googlebot per il corretto rendering delle mie pagine Web.

Sta rendendo l'intestazione e una "riga" della mia pagina (solo l'immagine di sfondo superiore della pagina), e quindi non riescono a rendere nulla oltre a questo, nemmeno il piè di pagina, manca circa 3/4 della pagina.

Il mio sito è www.runparis.fr e sono allegate schermate del recupero fetch.

Altre informazioni potenzialmente rilevanti comprende:

• Il codice che è stato recuperato manca nulla
• Lo Stato recupero è completo (senza risorse mancanti)
• Il problema è a livello di sito; succede su tutte le mie pagine
• Quando controllo la cache l'intera pagina è reso perfettamente
• Visualizza come Google (mobile) rende il sito perfettamente
• Il sito guarda bene in uno qualsiasi dei miei browser
• Non c'è niente funky in corso nella mia pagina; Sono solo immagini di sfondo e testo. Roba facile

Le mie domande sono:

• Sarà incapacità di rendering della pagina di Google hanno un impatto sul modo in cui Google si classifica?
• C'è qualche consiglio per risolvere il problema e avere google rende la pagina correttamente?

Grazie per qualsiasi aiuto o consiglio che qualcuno può offrire! Googlebot render 2

Edit: ho fatto un altro Visualizza come Google e rendere per una pagina di prova e ha rilevato che Googlebot interrompere il rendering dopo che ha reso le immagini di sfondo che ho impostato su "a tutta altezza" nella mia pagina builder nella mia installazione di Wordpress; cioè, qualsiasi immagine che è impostata per occupare l'intera altezza della finestra del browser uccide il rendering.

Quindi, renderà tutto fino a quando non colpisce questa immagine, esegue il rendering e quindi si arresta.

Come detto prima, la mia pagina non è elegante; Sono solo immagini di sfondo e testo semplici. Mi sorprende che Googlebot abbia problemi nel rendering di ciò che qualsiasi browser può rendere perfettamente, specialmente data la semplicità delle pagine !!

Quindi, le mie domande sono:

• Will Google non essere in grado di rendere la mia pagina impatto il modo in cui Google classifica il mio sito? (dato che ciò che è nella cache rende bene sul mio browser)
• E, questo è un problema comune? Esistono correzioni che consentiranno a Google di eseguire correttamente il rendering delle mie pagine?

---

Alcune nuove informazioni fornite da una fonte esterna:

"validator.w3.org/nu/?doc=http%3A%2F%2Frunparis.fr%2F"

"jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Frunparis.fr%2F & profilo = css3 & usermedium = all & avvertimento = 1 & vextwarning = & lang = it"

I vari errori e avvertenze potrebbero spiegare perché il rendering è ostacolato in alcuni strumenti come Google Fetch e rendering. I browser sono molto più permissivi di tutti questi strumenti di validazione e rendering. Immagino che nello strumento di rendering di Google le regole css che impostano l'immagine di sfondo (s) e le immagini in primo piano e il contenuto del testo vengano applicati nell'ordine sbagliato, quindi le immagini di sfondo finiscono in primo piano.

Queste nuove informazioni aiutano qualcuno a capire perché Googlebot avrebbe problemi a eseguire il rendering della pagina?

Answer 1

Ho riscontrato lo stesso problema, l'unica cosa visibile sul renderer era la sezione degli eroi ed è stata causata dalla definizione di altezza : 100vh; per la sezione degli eroi.
Questo problema si verifica quando si utilizza vh unità CSS, o in alcuni casi height:100%;

Here è il filo e la discussione che mi ha veramente aiutato a capire il problema:

credo che il bot di Google sta facendo this:
1. Guardando il tuo sito Web con una vista 1024x768.
2. Controlli quanto è alto il window.scrollHeight è
3. ridimensiona del browser virtuale per essere la stessa altezza del window.scrollHeight
4. Prende uno screenshot e
5. controlli per vedere quali elementi sono visibili e segna SE come appropriato. (. Dinging contenuti che non è visibile)

---

ho parzialmente risolto questo problema con l'inserimento di norme aggiuntive in mediaqueries:
Così, per risoluzioni intorno 1024px larghezza, ho messo max-height:800px; (regola height:100vh; rimasto attivo) nella sezione eroe,
e in mediaquery per le regole intorno a 1280px larghezza e su, ho impostato max-height:none; (la regola height:100vh; è attiva).

sto ancora perdendo intorno 30px di altezza nel renderer, ma che viene tagliato alla fine della pagina, senza testo e qualsiasi contenuto meaningfull.