Creating Human friendly and bot fiendish web pages

I've recently been entertaining the idea of how much effort people will make to read my blog. I created this page here and used a few methods to make sure a typical user can't read the content.

I started by making complicated things like encoding it and using JavaScript to make it display correctly. I ended up being annoyed by its complexity. So I made it much simpler to read. The whole point was to see how many people will make the effort to read it. Very few read it.

While playing around, I started thinking about bots. Those you don't want to read your content. How can I create content on the page that users can enjoy and bots will ignore?

I figured since I added JavaScript validation I don't get automated spam for comments anymore. JavaScript is bots natural enemy. I'm talking about very simple automated bots of course.

So I decided to put my content in script tags. If a bot is parsing the page, it will most likely ignore the script tag all together. But, if I use JavaScript to retrieve the content from the script tag and display it back on the page, bots that run JavaScript will simply wait for the content to show up and read it.

So instead, I could just leave the content inside the script tag and use CSS to display it.

The reason you don't see the content of your script tag on a page is because the browser applies its own CSS rules to it. If you add a script tag to your page and change its display property to block, it will appear.

<script id="script">
Look at me, I'm a script tag.
</script>

<style type="text/css">
#script {
    display:block;
}
</style>

Of course it will not be formatted properly. But you can easily give it a plain text format with these few properties.

#script {
    display: block;
    white-space: pre;
    word-wrap: break-word;
}

If a bot sees this tag and tries to run it, it will simply result in an error. While your content stays intact.

Only humans will be able to read your content. Of course you can use multiple script tags to allow for better formatting. You can even display images:

<script style="background-image:url(http://example.org/myimage.jpg);" id="myImage"></script>

#myImage {
    display: block;
    width: 300px;
    height: 300px;
}

Here is a fully working example Click me.

Enjoy!

---