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.

HTML & CSS Validity of A Document Are Not Ranking Signals

June 25, 2019 Source

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

June 14, 2019 Source

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

April 7, 2019 Source

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

February 8, 2019 Source

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

December 14, 2018 Source

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

November 16, 2018 Source

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

December 12, 2017 Source

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

September 19, 2017 Source

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

December 27, 2016 Source

Some CSS animation types are not supported by Google’s rendering, to the text will not be indexed.


Related Topics

AJAX Caching JavaScript Rendering PWA