CSS
CSS is a style sheet language used to describe the presentation of HTML content to incorporate additional style and layouts to a website. Our Hangout Notes cover best practice recommendations for utilizing CSS, with advice and examples from Google.
Google Image Search usually doesn’t find images specified within a CSS background attribute
A question was asked in this session about whether a pure CSS background image would be picked up by Google Image Search. John relayed that, to his knowledge, this would not be picked up by Google Image Search. To help Google find these images, it’s best to make sure it’s linked within the page, if you care about the image appearing in Image Search. For Image Search, Google’s algorithm mostly looks at the image alt tag, the title tag, and the text around the image on a page.
HTML & CSS Validity of A Document Are Not Ranking Signals
John explained that it doesn’t make sense for algorithms to focus on the validity of a page, especially if the content matches a users needs perfectly.
Ensure Hidden Content is Set-up With CSS Rather Than JS if You Want the Content to be Indexed
If you have hidden content which you want to be indexed, ensure it is implemented using CSS, rather than sever-side JavaScript, to enable Google to see the content has been loaded when they crawl and render the page.
GSC Incorrectly Flags Pages as Not Mobile-friendly if it Doesn’t Have Capacity to Fetch CSS
Search Console can incorrectly flag pages as not being mobile-friendly if the site’s server is too slow for Google to fetch the CSS files for these pages. John said that you may see individual pages that flag this error and they may fluctuate over time, but it isn’t an issue if you can see that the page is mobile-friendly.
Google Caches CSS & JS Files so Doesn’t Need to Continuously Fetch Them
Google caches things like CSS files so that it doesn’t have to fetch them again in the future. Combining multiple CSS files into one can help Googlebot with this process, as can minifying JavaScript.
GSC Incorrectly Flags Pages as Not Mobile-friendly if it Doesn’t Have Capacity to Fetch CSS
Search Console can incorrectly flag pages as not being mobile-friendly if the site’s server is too slow for Google to fetch the CSS files for these pages. John said that you may see individual pages that flag this error and they may fluctuate over time, but it isn’t an issue if you can see that the page is mobile-friendly.
Combine Separate CSS, JS & Tracking URLs to Increase Googlebot Requests to Your Server
To improve site speed and allow Googlebot to send requests to your server more frequently, reduce the number of external URLs that need to be loaded. For example, combine CSS files into one URL, or as few URLs as possible.
Remove CSS Stretching Images to Max Viewport to See How Full Page Renders
If the CSS sets images to the max viewport this will stretch them and stop you being able to see how the rest of the page is rendering in Fetch as Google. However, this view doesn’t represent what Googlebot is actually rendering.
Hard to Know if Page is Rendered Correctly if CSS Adapts Image Size to Viewport Height
Fetch & Render renders page with a high viewport (~9k pixels), so if a site is using CSS which adapts image size to viewport height then it can make it harder to diagnose if the rest of the page is being rendered correctly.
Some Text in CSS Animations Won’t be Indexed
Some CSS animation types are not supported by Google’s rendering, to the text will not be indexed.