• SERP
  • Part I

SEO: How I achieved #1 on google search results for full-stack developer portfolio

A case study on how to improve your developer portfolio website relevance on the google search ranking algorithm and why does it matter.

Destroy This Webpage
Rafael Caferati

Full Stack Web Developer, UI/UX Javascript Specialist.

<[{ Part-time developer – full-time geek }]>

2018-02-05 — 8 min read.

SEO is always a delightful topic. Let's start by showing off a couple really interesting results, then I'll break them down and try to draw some awesome conclusions out of it.

General purpose search demonstration.

Here we have the most relevant end result, the following table is from the Search Analytics on my Google Search Console ordered by the project's average position on google's first page results.

Search Analytics — Order by Average Position

Even being from a relatively young domain, the portfolio website is really well ranked for the Full-Stack Portfolio search. And it appears on average at the 1st position for a couple variations of the term.

The extensive list has at least 80 search terms on which the website shows off at Google's first page result. But for relevance sake let's take a look at the ones that drive the most amount of traffic into it.

Search Analytics — Order by Amount of Traffic

With an interesting 512,162 position on Alexa's global rank, the organic search traffic currently represents a solid 15% to 20% of my monthly unique visitors.

The main goal of this article is to share my developer perspective on how did my portfolio got here and what have I learned in the process.

Lesson one - It's all about backlinks y'all

I imagine that everyone professionally involved with web development should know the basic story behind the birth of the Google Search Engine and the basic principle of the PageRank Algorithm.

It's dead simple — it's all about links.

The more external links pointing to a webpage the more relevant that webpage is considered to be. If those links are coming from well ranked pages consequently you get better rankings.

It's clear, it's straightforward and it's really clever.

Every test that I've ever made being from HTML structure to keyword text reviews, SSL and Structured Data implementations or every single performance improvement have never come close to make an impact on the page ranking as effective as receiving backlinks from well ranked domains.

One more thing

The text of the anchor link pointing to your website is really important and it's something that's usually overseen. They're treated as high value keywords by Google. Pay special attention to them and if you have control over the website that's linking to yours, tweak them in a way that fits your keyword strategy.

You can check an example of that being used on my GitHub repositories Author's section — More on that later.

Seriously, you can very well stop reading this article at this point and go get yourself some backlinks. Everything else is secondary.

Lesson two - My own backlink strategy

The strategy that you're going to use to acquire backlinks always depends on the goals of your specific project. In the case of an online portfolio it really comes down to what do you want kind of results you want out of it.

When I started crafting mine — back in 2014 – I had just won a couple FWA Awards and wanted to showcase everything that I'd experienced at that time.

Due to our lifestyle and time constrains, we developers usually hold back when creating our own portfolio projects. I didn't.

I wanted for this website to be a mesh of everything that I can accomplish technology and user experience wise.

So I did just that. I unleashed the inner-geek and didn't hold back, which consequently led to some really interesting results. It's amazing that, more often than not, when you put your heart into a project people seem to recognize it and share it.

And as we've stablished earlier, sharing and linking is going to make all the difference when it comes to your project's SEO success.

FWA Awarded Portfolio Website — Me, not holding back.

Awards submission, Web 2.0 and Open Source projects

For a starting point this is an easy and impactful one. Submitting your website for evaluation on the web Awards scene is a fast and reliable way of getting real value backlinks. Even more if you're lucky enough to be featured on the awarded section. You'll have the web community analyzing it, sending you feedback and helping with the initial propagation of your project.

It's also a known initial strategy to fill up every Web 2.0 online profile that you have with your website link. It may seem like a logical step but you'd be impressed with how many people decide not to go all the way with it.

Again — You need to understand the importance of being serious about your backlink strategy. And you need to give it the right weight if you wanna get the most value of your project's SEO results.

Apart from that I also have a couple relatively popular text editor extensions and UI components on my GitHub Repositories which also helped on the growth of my own backlink base.

Any Open Source work or publication that you have can help increase your visibility and they'll continually be the most valuable asset on your SEO strategy.

Putting it together

Now please recall the up-mentioned Github Author's section strategy. Consider that Atom.io, NPM registry and others use the same README.md file to show your extension on their own domains.

Put that together with the anchor text keyword being of crucial SEO relevance and there you have it — Great developer focused backlink strategy 1 of 3.

While you can be a Zoe and understandably argue that these are all just meaningless no-follow links. Please consider the possibility of it not being entirely true as a lot of websites still don't mess with the text original markdown structure.

Then one thing led to another 🎹 — and another

As I started climbing up the Google page rank ladder my portfolio started to become an easy pick for Developer Portfolio Website Examples and Lists articles.

Let's check it by Google searching for the up-mentioned Developer Portfolio — which is the search term that currently drives the most organic traffic to this website.

Developer Portfolio Website Examples and Lists Articles.

Analyzing a couple articles from the above the fold of the first page you'll realize that the project is also featured internally in a couple of them.

Then again, well ranked domains with related content linking to your project — that's the dream.

Lesson Three – And nothing else matters 🎸

One of the most important steps on creating any kind of project is to binge analyze your competitors, which on this case was a peculiarly awesome experience. By doing that I came to the amazing realization that MR. Hetfield was right all along.

Please don't get me wrong. My intention was to nerd the shit out of this project and my goals were mostly UX and not SERP centered. But it's interesting when you realize how little everything else matters SEO wise.

Here is a list of improvements that you should definitely look forward to make on your website for non-SERP reasons. They all have great value for the experience that the user will get out of your project. Just keep in mind that Google rank wise their relevance is really thin.

The page load speed

Let's throw this bad boy on a couple Website Performance tools shall we.

Website Performance Tests.

I'm statically generating all webpages and hosting them with Netlify. They have a strong network of services and the interface is clean and straight forward.

This way the website is distributed and accessed with low latency all around the globe. Which is key for us web developers as we usually have a distributed global audience.

The HTML, CSS, WebFonts, JS, and Web Components are minified, compressed and loaded asynchronously from a reduced number of sources. Serving this way as little content as possible and avoiding unecessary trips to the server.

Google SERP sentence: Low impact.

Ok this one deserves an extra comment. We see a lot of developers getting way to much into these numbers and grades from the up-mentioned performance analysis websites. The numbers are important and you'll get a great development value going through the experience of fixing all the small details.

But — there's no reason whatsoever for messing with the user experience or the maintainability of your project just to get that 💯 or A-grade on what is just a specific website analysis point of view on the page-load issue.

Don't go too deep on that rabbit role. Rise above it. Focus on the user experience and maintainability of your code. They're way more important than the above the folder content not being fully rendered on the first hit for every page of your project.

Kudos if you're using Google's mod_pagespeed. It's indeed a great layer to add into your project — Shamefully I'm way too much of a control-freak to use it.

SSL suit-up

Back in 2014 Google's official Webmaster Central Blog published an article about using HTTPS as a ranking signal. Since then a lot have been speculated on what is the actual weight of the security certificate on Google's ranking algorithm.

For solving this issue I usually point to two pieces of information given by Googles's own Gary Illyes. The first one is from this Google Hangout interview with Bruce Clay where he states that SSL would act more as a tie-breaker on a very competitive website ranking draw. The other one is this tweet exchange with Pete Meyers stating that the idea of changing SSL weight was revisited but that it is not on their current plans.

From my own tests I have never found any indications of any competitive advantage whatsoever by having a secured domain.

That being said SSL suiting-up your website is essential if you're dealing with any kind of user data. It is not that relevant if your concerns are just SEO related.

Google SERP sentence: Same weight as an away goal.

Title tag structure

This is something that I had come across not that long ago. The keywords position matter on the page title tag structure.

On this article Moz propose an optimal format for the page title being: Primary Keyword - Secondary Keyword | Brand Name.

After some testing and competitors research I found that to have quite a real impact on the SERP position.

That's one of the reasons that for now I had removed my own name from the homepage title. As if when you use it together with the Person Data Structure scheme Google usually re-writes your page title, setting your name/brand to the beginning of it.

Google SERP sentence: You should definitely look into it and perform a couple tests for each specific scenario.

That's all great! But why should I care?

The implementation of the up-mentioned improvements should definitely be done on every web project. They'll all impact on how the user and search engines perceives the experience of loading and navigating through your website.

Just keep in mind that Google ranking wise — in comparison with backlinks — they are indeed far, far away from being relevant. Even when summed all up.

SEO Tools and subsequent part II

Having a great tool set is really important. There are some great tools to analyze your website's SEO and compare it with others. Ahrefs, Moz and SEMrush are some of the best ones available and they also have great SEO related content on their blog articles.

Currently I'm really into Link-Assistant's SEO Power Suit. I've been using it for a while and even on the free version they have a couple really great tools available.

I'm still performing a couple tests and comparisons mainly regarding the new blog structure, structured data and the homepage content thickness. I'll try to put that together with some tool reviews and organize an episode II of this article.

For helping out with that I would really appreciate if you guys could give some feedback and share your own experiences on the comments bellow. 👇🏻

There's always extra cookies in the oven for those who caught all the references 👾

Let's talk

Wanna get in touch or talk about a project?
Feel free to contact me via email at rafael@caferati.me
or drop a line in the form at the contact page