Category: Technical SEO

A selection of articles on technical SEO.

W3 Total Cache causing Mobile Friendly Test fails, blocks Google from CSS/JS
Multiple users are reporting SEO issues with the latest update of the popular WordPress caching plugin W3 Total Cache (W3TC) released late last week.

We have tested and confirmed both the presence of the code blocking Google (and other search engines), as well as the circumstances in which Google will be blocked.

Impact

Users on SEO and WordPress forums are reporting that the new code is causing issues in Google’s Mobile-Friendly Test Tool, resulting in submitted URLs failing the test.

CSS and JS files are used by Google to render the content found on URLs. Blocking Google from these important site resources could potentially have a negative SEO impact.

We can see here for example that without access to these resources Google are unable to confirm if a page is mobile-friendly or not.

The impact could be more significant than this however, potentially leading to both crawling and indexing issues for sites affected – which could in turn affect rankings.

What is happening?

The latest W3TC update adds a new instruction to a site Robots.txt file blocking all user agents, including Google, from the cache directory – specifically when the CSS/JS minification option is enabled in the plugin settings.

When minification is enabled, site resources are served from the /wp-content/cache/ directory – which has been blocked from crawling by the latest update.

All In One SEO Plugin Conflict

There are also reports that the newly created robots.txt file is conflicting with the virtual robots.txt file created by the All In One SEO (AIOSEO) plugin if users also have that installed on their site.

The physical file created by W3TC is overwriting/taking precedence the virtual file originally put in place by All In One SEO.

Robots.txt

You can see the new instruction set below (enclosed between two comments):
```
# BEGIN W3TC ROBOTS
User-agent: *
Disallow: /wp-content/cache/
# END W3TC ROBOTS
```
We confirmed the presence of this code in the latest plugin update via the W3TC GitHub repository and live on a test site.

Although the robots.txt instruction appeared straight away, files were not moved into the /cache/ directory until we turned on the minification option.

Solution

Disabling minification in the plugin options (and flushing all caches) should move the site JS/CSS files back out of the cache directory.

If you don’t want to turn off minification, an alternative temporary fix would be to simply to remove or comment out the lines in your site’s Robot.txt file – though the issue could recur potentially depending on how W3TC handle this.

Hopefully once W3TC realise their error – in response to what I expect will be a lot of negative feedback from the SEO/webmaster community – they will remove this from future versions of the plugin.

For users that are also having a conflict with the All In One SEO plugin, the best fix would probably be to downgrade to the previous version of W3 Total Cache and turn off automatic updates until the issue is resolved.

Update/Patch

W3TC released an updated version of the plugin (2.1.8) to fix the issue.

If you update your plugin (or have automatic plugin updates enabled) the problem should be resolved.

To check simply visit your robots.txt file and confirm the disallow rule is no longer in place.
September 5, 2021
Does Google Index Text Content in CSS Pseudo Elements?
Traditionally when Google (or other search engines) look for text-based content to index – they expect to find this content directly in the HTML of the webpage that is served to them.

This changed somewhat with the rise of sites using JavaScript to serve anywhere from small pieces of content to entire websites.

Google was forced then to invest resources attempting to render and index JavaScript based content as effectively as possible.

CSS Pseudo Elements

But what about text content that is sourced purely from CSS? It is possible to add content to a page using CSS pseudo elements such as ::before and ::after combined with the CSS content property.

See a simple example below:
```
<p>99 bottles of beer on the wall, 99 bottles of beer.</p>
```
```
p::after {content:' Take one down and pass it around,
98 bottles of beer on the wall.'}
```
Will display as:
```
99 bottles of beer on the wall, 99 bottles of beer. Take one down and pass it around, 98 bottles of beer on the wall.
```
Year after year as CSS gets more advanced and other features are introduced, such as the ability to do mathematical calculations or count elements using only CSS, the likelihood of devs and designers adopting these features becomes higher.

But will Google be able to render and index this content? Will the text found in the CSS appear and be searchable in Google?

Is using CSS for text best practice?

Before we start it is important to note that in the large majority of situations using CSS pseudo elements and the ‘content’ property (instead of HTML) to display any significant amount of text based content on a website is absolutely not best practice for various reasons, including:
1. The text is not selectable by users, meaning it can’t be highlighted or copied/pasted
2. The text will be ignored by screen readers – making the content inaccessible and against accessibility guidelines.
F87: Failure of Success Criterion 1.3.1 due to inserting non-decorative content by using :before and :after pseudo-elements and the ‘content’ property in CSS
W3.org

CSS pseudo elements should generally speaking only be used for decorative elements that are non-essential to the consumption of the content on the page.

SEO Poll

Until the production of this article – I was not able to find any other SEO-focused articles on this topic, so I thought it could be interesting to dig in and so some research.

I asked the SEO community what they thought in a Twitter poll, with the following results:

Can Google index text content from CSS displayed on a web page in a pseudo element, eg :before, :after?
— Colin McDermott (@ColinMcDermott) June 30, 2021

Taking out users that just wanted to see the results, there is a fairly even split between the three choices with ‘No’ and ‘I don’t know’ getting an equal number of votes (12), and ‘Yes’ trailing behind by just a few votes (9).

Test

To test I created a page that contained zero standard HTML based content and added text content using CSS pseudo elements attached to heading, paragraph, div and link tags – sourced from an external file CSS file.

You can also view the code and resulting page on CodePen here.

To give the URL a little boost to help it get indexed more quickly (or indeed at all) I linked to it temporarily from the footer of the site.

Rendering

To test I also ran the page through the Fetch tool in Search Console and the Mobile Friendly testing tool.

Both showed that Google were able to fully render the CSS content as it appeared to normal users on the page.

Results

Eventually (slightly to my surprise) the page did get indexed in Google despite the complete lack of content.

However checking the resulting listing in Google, and after searching for strings of text from the page – it became clear that no actual content had been indexed.

So we can confirm from this test that: NO – although Google can render it, CSS based content will not currently be indexed in Google.

If you include text content on your site using CSS pseudo elements and the CSS ‘content’ property it is currently not possible for Google to index the text content.

Update (14/7/2021)

The fantastic Jess Peck alerted me to a previous test she conducted on the same subject you can view here, and another post/experiment from Mathias Bynens that doesn’t use any HTML at all.
July 14, 2021
Does Using Rel=”Alternate” Hreflang Tags Share or Consolidate Link Authority (Juice)?

This is a common yet quite technical question, which can leave even some experienced SEOs scratching their heads to work out.
(more…)

July 16, 2017