Advertisement

Data Visualization: What It Is, Why It’s Important & How to Use It for SEO

Data Visualization: What It Is, Why It’s Important & How to Use It for SEO

Finding and removing user-generated spam on any site is one of the most important daily tasks of any website owner or SEO expert.

One of the common types of such spam is hidden text and links which may be placed on your site by malicious users or code. This may happen in various ways including:

  • The website accepts guest posts.
  • The site comment system doesn’t properly filter submitted comments.
  • The website is hacked and the hackers used it to benefit and inject hidden links.
  • By accident, when a person copies and pastes text with some CSS styling from another webpage to backend editor.

According to Google, the following types of texts and links are in violation of Google’s Webmaster Guidelines:

  • Using the same text color as the background color of the page (e.g., white text on white background).
  • Hiding text or links using CSS techniques.
  • Using links on one character in a paragraph (e.g., hyphen in the middle of a paragraph).

But not all hidden elements are considered as deceptive.

For example, you may have a responsive website design and a hidden, mobile-specific menu or other elements for mobile users only. These are completely fine since users see the same content as search engines see on specific device.

What you want to avoid are blackhat SEO techniques that aim to manipulate Google using content which is invisible to website users but visible to Google.

In this post, we will explore the tactics you can use to manually spot hidden links or texts on a webpage.

We will be using a sample test page with hidden spam text and links to illustrate how the tools work. The sample page below contains image and text as normally any webpage do.

Sample Page

1. Use a Browser Add-On Called Web Developer

addon called Web Developer

When you install this add-on, you will see a gray gear icon on the upper right corner of your browser. By clicking on it, you will see many options. You can also disable all CSS styles. (It is also available on FireFox with the same UI as on Google Chrome. )

Apply disable inline styles of Web Developer addon

I will begin by disabling inline styles because when users insert hidden content, they usually apply inline styles on elements like style="display:none"since they don’t have access to your stylesheet files on your server. They can only access the content editor like TinyMCE which lets them apply inline styles.

From the above example, you’ll find two text blocks which were invisible initially since they had inline style=" font-size: 0px;" and style="display:none" styles applied.

If disabling inline styles doesn’t give you any results, you may try disabling all styles.

By applying it you will see the following:

Data Visualization: What It Is, Why It’s Important & How to Use It for SEO

The difference is that it also removes all website styles and you see the text-only version of the website. Here, no one can bypass any hidden elements even if they are hidden via website CSS styles.

You will need to investigate unstyled webpages attentively in order to spot small unusual texts or links. Pay attention to the anchor text “the”. It is hard to notice isn’t?

Doing this will find hidden content existing in the HTML DOM at the time you disabled the styles.

If, for instance, there is a malicious JavaScript code running after one minute and loads hidden content or links via Ajax then those elements will not be visible. You will need to perform disable all styles action one more time to see it.

Let’s try it on our sample page and click on disable styles button one more time after some period. You’ll see in the screenshot below that one more hidden text is revealed which was previously not visible because it was injected in the page after some time via JavaScript.

Apply disable all styles of Web Developer addon

So it is good practice to disable styles a few times after some period.

Yes, the same JavaScript can also remove content (i.e., inject it for a short time then remove it) but you also have the option to disable JavaScript in order to disable both CSS and JavaScript and deny any malicious code to undo its changes. Any injected malicious content on hacked website will be visible to you with this method.

Many of you might have heard of the online tool called “Search engine SPAM detector.” I don’t recommend using it to find hidden content. When I ran my test page using this tool, it couldn’t spot any hidden text issues. Perhaps it is better used for spotting keyword stuffing issues instead.

2. Use Browser Add-on Link Grabber

Data Visualization: What It Is, Why It’s Important & How to Use It for SEO

This add-on will extract all links on the webpage and produce a report so you can spot any unusual link you are linking to. (On Firefox you can use the extension Link Gopher.)

Link Grabber addon report

Running this add-on revealed weird links which gave me an idea that something is wrong. This might be the quickest way to spot spam links.

If you find weird links using this tool, you can then start an in-depth audit using the first or third method.

3. Using Your Browser’s ‘Inspect’ Dev Tool

If you have little technical skills, you can use your browser console to find hidden text and links with the help of the code snippet below.

On Google Chrome right click on the page > Inspect > Console  (you may refer to this guide to find it for your browser).

Google Chrome Console

Copy the JavaScript code below and paste it in the console. Click on new line keyboard button to run the code.


var htmldoc = document.querySelectorAll('body  *');
var disallowed_cssproperties = [ [ "display", "none" ],
		[ "visibility", "hidden" ], [ "font-size", "3" ],
		[ "position", "absolute" ], [ "opacity", "0" ], [ "height", "5" ],
		[ "width", "5" ], [ "max-height", "5" ], [ "max-width", "5" ] ];

var reset_cssproperties = [ [ "display", "block" ],
		[ "visibility", "visible" ], [ "font-size", "40" ],
		[ "position", "relative" ], [ "opacity", "1" ], [ "height", "auto" ],
		[ "width", "auto" ], [ "max-height", "none" ], [ "max-width", "none" ] ];

var reported_html = '';
var skip_elements = [ 'script', 'style' ];
var bool_reset_all = false;
for (i = 0; i < htmldoc.length; i++) {
	for (k = 0; k < disallowed_cssproperties.length; k++) {

		css_property = disallowed_cssproperties[k][0];
		disallowed_value = disallowed_cssproperties[k][1];

		real_value = window.getComputedStyle(htmldoc[i]).getPropertyValue(
				css_property);
		real_value_int = parseInt(real_value);
		real_value_int_style = parseInt(htmldoc[i].style
				.getPropertyValue(css_property));

		if ((real_value == disallowed_value || (!isNaN(real_value_int)
				&& real_value_int <= disallowed_value && real_value_int_style <= disallowed_value))
				&& !skip_elements.includes(htmldoc[i].tagName.toLowerCase())) {

			for (r = 0; r < reset_cssproperties.length; r++) {
				htmldoc[i].style.border = '3px solid red';
				htmldoc[i].style.setProperty('min-height', '20px');
				htmldoc[i].style.setProperty(reset_cssproperties[r][0],
						reset_cssproperties[r][1]);
			}
			bool_reset_all = true;
			reported_html += '<strong>HTML tag: <span style="color:blue">'
					+ htmldoc[i].tagName
					+ '</span><br/>CSS property: <span style="color:red"> '
					+ css_property + ':' + real_value + '</span></strong>'
					+ '<br/><strong>Contains HTML/Text</strong><br/>'
					+ htmldoc[i].innerHTML + '<br/><br/>';
		}

	}
}
if( bool_reset_all ){
	for (i = 0; i < htmldoc.length; i++) {
if( skip_elements.includes(htmldoc[i].tagName.toLowerCase()) ){
continue;
}
		htmldoc[i].style.position = 'relative';
htmldoc[i].style.top = 'auto';
htmldoc[i].style.left = 'auto';
htmldoc[i].style.bottom = 'auto';
htmldoc[i].style.right = 'auto';
htmldoc[i].style.display = 'block';
	}
}

var tab = window.open('', '_blank');
tab.document.write(reported_html); // where 'html' is a variable containing your HTML
tab.document.close(); // to finish loading the page
console.log('Finished');

You will see the following report in a new tab with suspicious HTML elements which are hidden to users by applying known CSS teqniques.

Report

Beside this report, you will see those elements highlighted in red border on the webpage itself.

Data Visualization: What It Is, Why It’s Important &#038; How to Use It for SEO

If you want to try this one more time, you will need to refresh the webpage and run it again. Running without refreshing will give you the wrong results on your second try.

Those who are not technically savvy might mistakenly think that this code may affect how site visitors see a website. For their information, the webpage will only be affected on the client’s side (whoever runs the code in console).

Conclusion

The techniques described above will help you manually audit any hidden text and links.

While there are software that can scan webpages and produce reports on the same issue, manually checking your pages is always good since software follow certain algorithms and may not always detect all types of hidden text and links.

ADVERTISEMENT

Subscribe to SEJ

Get our daily newsletter from SEJ's Founder Loren Baker about the latest news in the industry!

Ebook

Vahan Petrosyan

Lead Developer at Search Engine Journal

I am responsible for keeping SEJ well-oiled and running smoothly, 24/7. As developer of Alpha Brand Media, I own all ... [Read full bio]

ADVERTISEMENT
Advertisement
Read the Next Article
Read the Next