All Articles# Why should frontend developers learn SEO (2020)
There’s a famous quote by Aristotle: “The more you know, the more you realize you don’t know.” I totally agree with this. I’ve been doing front-end development for almost 5 years now, and just recently I have realized how much more I should know. The fact that I had started my own business played a big role here. I decided to create an e-commerce website by myself, because I know web development a bit so this seemed to be a good idea to save money at an early stage when there is barely any income. But it turned out that there are a lot of different things you need to think about when creating a website, and the online presence about it. They mostly revolved around the areas that I knew little about, i.e. SEO and Marketing.
So as a front-end developer should you learn SEO and Marketing? My quick answer is “yes”.
Especially If you’re running your own business, or blog and you decided to create a website by yourself. But there are also more reasons why it is worthwhile. All in all, we’re talking about the web, so it’s a part of our ecosystem. If we want to be treated as professionals we need to understand different pieces of this machine in order to communicate with other professionals of different specialties. For example, let’s say you’re working for a client on a CMS based website. The client is a big and well known company, so there’s a big chance that they hire SEO and marketing specialists to let them thrive digitally. And sooner or later they will reach you - a front-end guy - to add something to the website so they can do their part. If you know something about their field, you know what you can expect from them, so you can be better prepared.
Having said all that, I would like to present what I’ve learned since I had started working on the website for my business. These are going to be mostly basic technical aspects of SEO and Web Marketing. In this article I will focus on SEO, and I will write about the marketing in the next one. Note, that this is difficult for me, because this way I admit that there are many things I didn’t think and know about, even though I consider myself a specialist in my field. So I can imagine you’re reading this and you simply cannot believe that someone doesn’t know these things. But our industry is about constant learning, isn’t it? So I hope I will receive salvation 
SEO basics for frontend developers:
First I would like to start with SEO. It’s an important part of the digital presence of the business. Imagine that you tell the name of your company to your potential customers and they can’t find you on Google. When you’re not searchable, you immediately lose credibility.
And besides that you probably don’t want to spend so much money only to buy traffic to your website. You need organic clicks rather than paid ones.
Here you can read more reasons why good SEO is good for your business:
When I decided that I wanted to improve the SEO of my website I suddenly realized that I didn’t know where to start. I had some shreds of information that I overheard here and there, but I needed a solid framework that would walk me through the process. After some research I did on that topic using search engines (yes, I linked google here!) I discovered that there actually is such a solid framework and It’s called SEO checklist. Maybe it doesn’t guarantee success and first page, but at least it lets you pick low hanging fruits and achieve something and not do stupid mistakes.
So here’s what I learned during this adventure:
- What is canonical URL and why you should avoid duplicate content
- What you can find in meta tags,
- Where and why you should add “nofollow” attribute,
- What are rich results and what is structured data,
- Performance matters for search ranking.
is not only for stylesheets. Did you know that? - Why you should avoid duplicate content.
When you start your career in the web development world, probably the first thing you do is write some basic HTML structure, and attach a simple stylesheet to add colors to the page. You do it using link tag like so:
text ``
But as you sooner or later realize, there are more usages of this tag. When you go through different SEO checklists, chances are you’re going to come across a term “Duplicate Content”. It means that search engines found two or more pieces of the same content under different URLs, and they don’t know which one is the correct one. For example these are treated as three different pages:
```text
https://www.example.com
https://example.com
www.example.com/index.html
[ ![diagram showing Google logo pointing to different versions of the same URL asking "WHICH ONE IS CORRECT?"]( "diagram showing Google logo pointing to different versions of the same URL asking "WHICH ONE IS CORRECT?"")](/static/6832ab4e3dc613900538c821af158649/302a4/canonical_url.png)
**This can dilute the SEO value of your content among several URLs.** That’s why you should use [canonical url](https://www.clickminded.com/canonical-url/). It allows you to inform search engines which URL is right. You do it by using link tag like so:
`
`text ``
### [](#what-you-can-find-in-meta-tags)what you can find in meta tags.
At the beginning of my web development journey I didn’t really care about `text ` tags. It was just part of some magic that I copy/pasted into my html files, without knowing what I was doing. As time passed, I discovered that they turn out to be useful when you want your website or app to look good [on smaller screens](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag).
But one thing I didn’t really know about meta tags was that **you can suggest google how it should display the results.** If you can control this, then you can make it more compelling and therefore receive more clicks. Even though they [don’t affect the page rank](https://webmasters.googleblog.com/2009/09/google-does-not-use-keywords-meta-tag.html), it’s still good to have a look on them, due to the aforementioned reason.
If you’re using Wordpress, there’s a very popular SEO plugin - Yoast SEO, that gives you a preview of how your search result would look like, which is very useful.
You can read more about how to write good meta descriptions on [their blog](https://yoast.com/meta-descriptions/).
Sidenote - there are plenty of other meta tags that you can use. [Here](https://github.com/joshbuchea/head) is an extensive list of everything that can be added inside HTML head attribute.
### [](#please-stop-following-me---the-importance-of-nofollow-attribute)Please stop following me! - the importance of “nofollow” attribute
The internet is about links. And Google’s **[pageRank](https://en.wikipedia.org/wiki/PageRank) is about valuable links**. When you start learning about SEO you very quickly hear the term “[link building](https://moz.com/beginners-guide-to-link-building)”. The amount of links used to be an important criteria of page rank back in the day, so the new movement called “[Black Hat SEO](https://www.wordstream.com/black-hat-seo)” appeared introducing techniques like [Spamdexing](https://en.wikipedia.org/wiki/Spamdexing). But since 2012 when Google introduced [Google Penguin](https://en.wikipedia.org/wiki/Google_Penguin) things have changed. From this moment on, **not the amount of links mattered but the quality of them. Too many low quality links were actually decreasing your page rank** instead otherwise.
One of the ways of building your links bank (although it doesn’t mean it is recommended by google) is looking for gaps in someone else’s website (which have good ranks) and pasting your links there. What do I mean by “gaps”? The lack of “[nofollow](https://support.google.com/webmasters/answer/96569?hl=en)” attribute. Whenever your website has a space that you don’t have control over, such as **comments or forum posts, you should use “nofollow” or “ugc” attribute**. This will prevent people from spamming (because it will give them no profit).
### [](#google-wants-to-help-you---why-you-should-use-structured-data)Google wants to help you - why you should use structured data
You can ask Google anything. You may be looking for avocado toast recipe, [ ![search result of Avocado Toast Recipe showing the picture, rating, opinions and how much it takes to prepare the meal.]( "search result of Avocado Toast Recipe showing the picture, rating, opinions and how much it takes to prepare the meal.")](/static/437e2a66f97c2e4c58568bd415c4d095/46115/avocado_toast_search_result.png) Dan Brown’s book review,
![search result showing "The Da Vinci Code by Dan Brown" and the 3.8 rating with 1803463 votes.]( "search result showing "The Da Vinci Code by Dan Brown" and the 3.8 rating with 1803463 votes.")
the closest liquor store, [ ![search result showing a google maps fragment of north UK with pinpoints of liquor stores.]( "search result showing a google maps fragment of north UK with pinpoints of liquor stores.")](/static/b81dda3eebf9b32ee78a2444f5d04e14/203d3/liquor_store_search_result.png) or the job offer. [ ![search result showing different job offers]( "search result showing different job offers")](/static/de310a589bb1391c70c12e76020b3138/62da8/job_offers_search_result.png) And depending on which one of them you’re searching you’re going to get different results.
Depending on the context, you’re going to see completely different results and useful widgets. (They are called [rich results](https://developers.google.com/search/docs/guides/search-gallery)) But is it possible that Google is so smart to know all that? Well, it needs some support from website and platform creators. They taught their bots to understand something called “[Structured data](https://developers.google.com/search/docs/guides/intro-structured-data)”. It’s a way you can tell the search engines that what they see on your website is either a recipe, a book review or an e-commerce product. To make it possible some standardization was required, so **structured data follows well established [schemas](https://schema.org/)**.
Below is an example from Google docs how this is going to look like. First is the code,
and here’s the visual result:
![search result of the "Grandma's Holiday Apple Pie"]( "search result of the "Grandma's Holiday Apple Pie"")
### [](#hurry-up---why-performance-matters-to-seo)Hurry up! - why performance matters to SEO
No one likes when the website takes ages to load. So some companies invested their time to improve overall user experience to keep users on their websites. And some didn’t. But now, there’s even more to that, as **performance [affects](https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html) search ranking**. Now you can’t just ignore how big the images on your site are, or how much javascript you’re putting there. This is especially dangerous if you use ready CMS solutions like wordpress. You install a theme, throw a couple of plugins there, and the website works. But there’s so much unnecessary stuff there if you pay close attention to it. Luckily, as with many topics, you can count on community and quickly find [checklists](https://www.smashingmagazine.com/2020/01/front-end-performance-checklist-2020-pdf-pages/) that are going to help your website to be up to par with standards. There are also useful tools that help you perform an audit of your website like Google’s [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) or if you use Chrome you have it built in your dev tools (Audits tab).
[ ![Screenshot of PageSpeed Insight tool with the results of smashing magazine website]( "Screenshot of PageSpeed Insight tool with the results of smashing magazine website")](/static/cb91e3bc7bb8ce051158c4bd0007f210/844cc/audits_tab.png)
Someties, most of the problems are the images. They are heavy, and not lazy loaded which highly affects overall load time. We should spend some time to pick the right format and to learn how to optimize them, because human eyes won’t see a difference in image quality, but definitely will do in a network tab in your dev tools.
Here are some useful articles on how to start with image optimization:
## [](#conclusion)Conclusion
Creating a website or a portal is a complex thing. It requires the cooperation of many specialists in different fields. There are many things to remember. In order to mitigate the problem, people create useful checklists like SEO checklist or Performance checklist to make sure we do at least the minimum so our work isn’t subpar in the crowded digital market.
## [](#reference--links)Reference / links:
- Why good SEO results are good for the business:
- SEO checklist:
- Why you should avoid duplicate content:
- How to use canonical URL:
- How to use viewport meta tags to make the website display properly on mobile:
[https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport\_meta\_tag](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag)
- Meta description and keywords don’t affect the page rank:
- How to write good meta description content:
- What you can find in HTML head tag:
- What is PageRank:
- What is link building:
- What is black hat SEO:
- What is Spamdexing:
- What is Google Penguin algorithm:
[https://en.wikipedia.org/wiki/Google\_Penguin](https://en.wikipedia.org/wiki/Google_Penguin)
- Why you should use “nofollow” attribute:
- The gallery of rich results:
- What is structured data:
- Schemas for structured data:
- Page speed counts in search ranking:
- Performance checklist:
- Page speed tool:
- How to optimize images and pick the right format:
- How to optimize images and pick the right format: