How I passed technicalseo.expert (level 1)
Introduction
technicalseo.expert is an SEO puzzle, although I sat down with no SEO background and now work as a humble dataset. The puzzle was developed by Alexis Sanders of Merkle Inc., an international marketing agency. Alexis explains “The idea behind the game was to allow SEO professionals to learn the technical aspects of their profession. But the second level requires deep knowledge of HTML, CSS, PHP and Java. The third level was designed so that no one would ever pass it.“
Training
I must say right away that almost all levels were completed with the open Developers tools on Chrome. There you can have a look at the html page and admire the responce. I also used python (for convenience, everything was started in jupyter notebooks). Postman will be mentioned along the way, but it will not have any impact in the end, so you can safely delete it.
Warning!
If someone wants to personally go through this challenge – it is contraindicated to read further. There will be screenshots and more.
Also, I apologize to SEO, I do not quite understand the essence of what I have done in terms of SEO. If I offended anyone, I apologize.
Level 1
Beauty! Now let’s take a look at the Developers tool.
Some HTML
<html><head>
<link rel="stylesheet" type="text/css" href="https://habr.com/ru/post/597875/style.css">
<title>Welcome to the SEO Matrix</title>
<meta name="description" content="Sometimes the beginning is not where the story truly begins, sometimes it starts with an invasion of robots, an overbearing government, and a lonely hero.">
<link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">
</head>
<body>
<canvas id="c" height="948" width="1848"></canvas>
<div id="content" style="color:white; font-family: 'VT323', monospace;">
<h1>Welcome to our SEO challenge v1</h1>
<p>You have everything you need. Now make your choice. </p>
<p>You take the blue pill, the story ends. You wake up in your bed and believe whatever you want to believe. You take the red pill, you stay in Wonderland, and I show you how deep the rabbit hole goes.</p>
<p style="visibility:hidden;">The journey begins at the gateway for all robots.</p>
</div>
<!-- Matrix Rain; Nothing to see here people. -->
<style>
body {background: black;}
</style>
<script>
function draw(){ctx.fillStyle="rgba(0, 0, 0, 0.05)",ctx.fillRect(0,0,c.width,c.height),ctx.fillStyle="#0F0",ctx.font=font_size+"px arial";for(var a=0;a<drops.length;a++){var b=j[Math.floor(Math.random()*j.length)];ctx.fillText(b,a*font_size,drops[a]*font_size),drops[a]*font_size>c.height&&Math.random()>.975&&(drops[a]=0),drops[a]++}}var c=document.getElementById("c"),ctx=c.getContext("2d");c.height=window.innerHeight,c.width=window.innerWidth;var j="私は誰ですか？ああ、それは素晴らしいパズルです。1!2@3#4$5%6^7&8*9(0)";j=j.split("");for(var font_size=10,columns=c.width/font_size,drops=[],x=0;x<columns;x++)drops[x]=1;setInterval(draw,33);
</script>
</body></html>The most interesting line here is
<p style="visibility:hidden;">The journey begins at the gateway for all robots.</p>An obvious hint at robots.txt
Let’s go check it out!
robots.txt
user-agent: *
Disallow:
sitemap: /sitemap.xml
# Level One Clue: The spaces between words are removed, no hyphens.
#
# /
# /
# / /
# / ____
# /_/ _
##############################
# Created by:
# Alexis Sanders: https://twitter.com/AlexisKSanders
#
# Thank you to our part 2 beta testers:
# Max Prin: https://twitter.com/maxxeight
# Dave Thomas: https://www.linkedin.com/in/dave-thomas-2448058/
# Brian Barna: https://www.linkedin.com/in/brianbarna/
#
# Thank you to our part 1 beta testers:
# Masaki Okazawa: https://www.linkedin.com/in/masakiokazawa/
# Steve Valenza: https://www.linkedin.com/in/stevevalenza/
# Max Prin: https://twitter.com/maxxeight
# Kyla Becker: https://www.linkedin.com/in/kylabeckerShtosh … There is a hint on the sitemap, which was obvious (I went there before reading the robots carefully), and then something interesting. A huge letter A. Intriguing? Let’s go further to the sitemap.
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>/bluepill</loc>
</url>
<url>
<loc>/redpill</loc>
</url>
</urlset>I saw something about blue-red pills on the first page … But for the experiment I checked the blue one and got the Game Over screen (which I will receive later on quite often). I checked it in many ways, even sent different types of requests through Postman – the result is the same. We drink red!
Not very informative. Maybe HTML will tell us something interesting?
Html
<html><head>
<link rel="stylesheet" type="text/css" href="https://habr.com/ru/post/597875/style.css">
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">
<title>You have chosen the red pill.</title>
<meta name="description" content="Sure, there are grays... but when you come right down to it, at its core, beneath every choice, there's either a one or a zero. Are you a one or a zero?">
</head>
<body>
<div id="content" style="font-family: 'VT323', monospace;">
<h1>Follow me?</h1>
<p>Make your choice.</p>
</div>
<div class="rememberme">
______
| ____|
| |__
| __|
| |____
|______|
</div>
</body></html>Big letter E. AE … Another eye clings to the meta tag
<meta name="description" content="Sure, there are grays... but when you come right down to it, at its core, beneath every choice, there's either a one or a zero. Are you a one or a zero?">Trying the “/ 1” path and go …
Not bad … What does HTML tell us?
Html
<html><head>
<link rel="stylesheet" type="text/css" href="https://habr.com/ru/post/597875/style.css">
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">
<title>41726520796f75207375726520796f75207769736820746f2074616b65207468697320706174683f</title>
<script async="" src="https://www.google-analytics.com/analytics.js"></script><script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"name": "Red Pill",
"alternateName": "The SEO challenge that'll take you into an alternate reality.",
"url": "http://www.example.com/",
"sameAs": "http://www.example.com/funsociety"
}
</script>
</head>
<body id="content" style="font-family: 'VT323', monospace;">
<h1>01011001 01101111 01110101 00100000 01100001 01110010 01100101 00100000 01110100 01101000 01100101 00100000 01100010 01101001 01101110 01100001 01110010 01111001 00100000 01100101 01101100 01101001 01110100 01100101 00101100 00100000 01101110 01101111 01110111 00100000 01110111 01101000 01100001 01110100 00100000 01100001 01100010 01101111 01110101 01110100 00100000 01101000 01100101 01111000 00111111</h1>
<p>5765206172652066736f63696574792e2057652061726520667265652e20576520617265206177616b652e</p>
<div class="rememberme">
__ __
/ /
/ / /
/ / /
/ /
/ /
</div>
</body></html>There is no need even to decrypt … The link “/ funsociety” is immediately visible
It’s even a little unfair. But still we will decrypt using humble python scripts
kek = []
lol="01011001 01101111 01110101 00100000 01100001 01110010 01100101 00100000 01110100 01101000 01100101 00100000 01100010 01101001 01101110 01100001 01110010 01111001 00100000 01100101 01101100 01101001 01110100 01100101 00101100 00100000 01101110 01101111 01110111 00100000 01110111 01101000 01100001 01110100 00100000 01100001 01100010 01101111 01110101 01110100 00100000 01101000 01100101 01111000 00111111"
for x in lol.split():
kek.append(x)
lol=""
for x in kek:
lol+=chr(int(x,2))
print(lol)The reward will be the phrase:
You are the binary elite, now what about hex?Great, I have a script in hex …
lol="5765206172652066736f63696574792e2057652061726520667265652e20576520617265206177616b652e"
# lol="41726520796f75207375726520796f75207769736820746f2074616b65207468697320706174683f"
kek = []
for x in range(int(len(lol)/2)):
kek.append(lol[x*2:x*2+2])
lol=""
for x in kek:
lol+=chr(int(x,16))
print(lol)As a result, we have two phrases – from the title and from the page.
We are fsociety. We are free. We are awake. - страница
Are you sure you wish to take this path? - заголовокNothing unusual. We follow the link.
Html
<html><head>
<link rel="stylesheet" type="text/css" href="https://habr.com/ru/post/597875/style.css">
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">
<title>Bonsoir, Elliot.</title>
</head>
<body id="content" style="font-family: 'VT323', monospace;">
<h1>We are free. We are...</h1>
<p>...Your transition has been interrupted... </p>
<img src="https://habr.com/ru/post/597875/dontletthedarknessconsumeyou.jpg" alt="/darkarmy">
<div class="rememberme">
__ __
| / |
| / |
| |/| |
| | | |
|_| |_|
</div>Without much fiction. It’s even a little boring. The alt attribute of the image is obvious. New link “/ darkarmy” received. And for one and a new letter in the piggy bank.
Html
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://habr.com/ru/post/597875/style.css">
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">
<title>Do not go gentle into that good night</title>
</head>
<body id="content" style="font-family: 'VT323', monospace;">
<h1>Rage, rage against the dying of the light.</h1>
<p>Don't let the darkness consume you, Elliot.</p>
<a href="https://habr.com/darkside" class="hidden"></a>
<div class="rememberme">
| __
| |__) |
| _ /
| |
|_| _
</div>
</body>
</html>The new R and the obvious link “https://habr.com/darkside”. Go ahead.
So simple? Ssyoka in the most conspicuous place?
Html
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://habr.com/ru/post/597875/style.css">
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">
<title>In the darkest times, light shines the brightest.</title>
</head>
<body id="content" style="font-family: 'VT323', monospace;">
<h1>You've taken a dark path, but there is hope yet.</h1>
<p>You're lost, but one day, you might be found. So why not start looking around?</p>
<p class="hidden">Why don't you /followtherabbit</p>
<div class="rememberme">
_
| |
| |
| |
| |____
|______|
</div>
</body>
</html>Oh, no, the hidden class, CSS is just naughty)
Stosh, it’s not our fault. But we still remember the letter L.
Html
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://habr.com/ru/post/597875/style.css">
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">
<title>If you want to know, follow the white rabbit.</title>
<link rel="amphtml" href="https://habr.com/followtherabbitamp.html">
</head>
<body id="content" style="font-family: 'VT323', monospace;">
<h1>Remember that all I am offering is the truth. Nothing more.</h1>
<p>In another moment down went Alice after it, never once considering how in the world she was to get out again.</p>
<div class="rememberme">
_____
| __
| | | |
| | | |
| |__| |
|_____/
</div>
</body>
</html>I don’t even want to think and read about AMP. Not today at least. We pass further.
Html
<html amp lang="en">
<head>
<meta charset="utf-8">
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title></title>
<link rel="canonical" href="https://habr.com/welcome2wonderland" />
<link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">
<style amp-custom>
#content {
background: #;
bottom: 0;
height: 500px;
left: 0;
margin: 1em;
position: absolute;
top: 0;
right: 0;
width: 50%;
padding: 20px;
font-family: 'VT323', monospace;
}
p {
font-size: 200%;
}
.rememberme {visibility:hidden;}
</style>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
<div id="content">
<h1>The Door stands in front of you.</h1>
<p>Door: Why it's simply impassible!</p>
<p>Alice: Why, don't you mean impossible?</p>
<p>Door: No, I do mean impassible. (chuckles) Nothing's impossible!</p>
</div>
</body>
</html>Again we see the link in the head tag and go to wonderland, although this is all starting to get boring … “https://habr.com/welcome2wonderland” we have and we move on.
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://habr.com/ru/post/597875/style.css">
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">
<title>Welcome to the real world, Neo.</title>
<link rel="alternate" href="https://habr.com/fr/bienvenueaupaysdesmerveilles" hreflang="fr" />
</head>
<body id="content" style="font-family: 'VT323', monospace;">
<h1>Welcome to the real world, Neo.</h1>
<p> I promised you the truth, Neo,
and the truth is that the world you were living in was a lie.</p>
</body>
</html>Again, the obvious link is in head. Even the hidden letters are gone! Go to “https://habr.com/fr/bienvenueaupaysdesmerveilles” and …
Already something more interesting …
Oh, no, a walk-through page
We get the link to the picture: “/fr/thequeen.jpg” and see the link.
And again the standard message.
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://habr.com/ru/post/597875/style.css">
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">
<meta name="fragment" content="!"/>
<title>Bow down to her majesty, the Red Queen.</title>
</head>
<body id="content" style="font-family: 'VT323', monospace;">
<h1>Off with their escaped fragments!</h1>
<p>My dear, here we must run as fast as we can, just to stay in place. And if you wish to go anywhere you must run twice as fast as that.</p>
</body>
</html>How? No link? Was it possible?
Fortunately, after 10 minutes of fluent stacker flow, the answer was found – just add water! In the sense of? _Escaped_fragments_ =
Now a few redirects and we have arrived at a new page: “/bow2thequeennow.html”
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://habr.com/ru/post/597875/style.css">
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">
<title>Escape with the Mad Hatter. Time for Tea.</title>
</head>
<body id="content" style="font-family: 'VT323', monospace;">
<h1>Way to go.</h1>
<p>/escapewiththemadhatter</p>
<p>Alice: Where should I go?</p>
<p>Cheshire Cat: That depends on where you want to end up.</p>
<div class="rememberme">
/
/
/ /
/ ____
/_/ _
</div>
</body>
</html>O! Letters again, and I already started to get bored! And the link can be read immediately on the page.
Hints … Why spoil all the fun?
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://habr.com/ru/post/597875/style.css">
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">
<title>Want a spot of tea?</title>
</head>
<body id="content" style="font-family: 'VT323', monospace;">
<h1>Drink some of that error status code.</h1>
<p>Mad Matter: Have I gone mad?</p>
<p>Alice: I'm afraid so. You're entirely bonkers. But I'll tell you a secret. All the best people are.</p>
<p>The next page in your journey will be the status code of this URL: /XXX</p>
<div class="rememberme">
______
| ____|
| |__
| __|
| |____
|______|
</div>
</body>
</html>
We see that the next link will be “/ 418”
But we have a miracle script …
With its help we get a new link “/ areyoutheone”
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://habr.com/ru/post/597875/style.css">
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">
<title>Enjoy your teapot status? lol.</title>
</head>
<body id="content" style="font-family: 'VT323', monospace;">
<h1>Could you be THE one?</h1>
<p>NEO: Morpheus, I know you won't believe me but the Oracle told me I'm not the One.</p>
<p> MORPHEUS: It doesn't matter if I don't believe you, What matters is that you don't believe her.
</p>
<div class="rememberme">
_
| |
| |
| |
| |____
|______|
</div>
</body>
</html>
Empty! There is no link, only a letter … But we cannot be stopped!
We know the following link: “/ whatisrealanymore”
And then I get stuck … Need to go back? I checked all the pages before … Even the postman knocked on POST requests and other atypical ones. Empty. Nothing. Suddenly, at night, I decide to check all the links again, but since it’s night, I do it from my phone.
Something new. Trying to understand what happened and go to mobile mode (but the next day, yes) in Chrome … and go to a new page: “/ areyoualonesometimestoo”
And there we find a new link. “/ hellofriend”
We write a message, get a link, and on the way to HTML we find another hidden letter A. What’s next?
We enter a phrase from the collected letters, which I rearranged a little (here we will leave a little intrigue …)
TA-LADY! We passed the puzzle. We got bored even in the process. Shtosh … But where is the link to Level 2? Who will notice?
