I built a website about Dogs and SEO

What is SEO dogs?

In short, SEO dogs is a website I built to share knowledge around the fundamentals of SEO in a fun format that is super accessible for anyone, regardless of their experience.

Each page, or element of SEO, contains a picture of an adoptable dog (I tried to relate the dog to the topic either through their name, personality traits, or breed as best I could). The dogs are all from Wild at Heart Foundation which is a global dog rescue & adoption organisation - finding rescued dogs the forever homes they deserve.

Why did you make it?

Good question :)

In all honesty I made it just as a bit of fun. It was a weird 3am insomnia idea in lockdown and I thought it would be the perfect way to put into practice some of the skills I had been learning. I've always wanted to build a website so decided to just give it a go. I'm not a developer or designer, but I had a lot of fun seeing my initial wireframes come to life in the form of an actual fully functioning website.

There is sooo much information out there around the fundamentals of SEO, and it can be really intimidating, especially when you are first starting out learning SEO. I wanted to create an inclusive and accessible space for folks with any level of SEO understanding to feel more confident and comfortable with the key elements of SEO. Basically combining my knowledge from working in SEO, and useful resources that I have consumed while learning (and dogs of course).

Anyone who knows me knows that I'm a massive dog lover, and rescue advocate so it made perfect sense to combine two things I am passionate about - helping people understand SEO, and dogs!

How did you make it?

The Framework

The main framework of the website is Flask, which is a micro web framework written in Python.

The reason I chose Flask was because I've been learning Python over the last year and thought it would be another great way to put into practice those skills I have been learning, in a slightly different way to the other projects I had been working on.

It's actually pretty simple to use and get to grips with, and I got familiar with it pretty quickly. I started by following a couple of tutorials and when I felt comfortable with the basics I jumped in and got started.

The Main Content

All of the pages are written in HTML with CSS classes throughout to style them, making them pretty simple to create and replicate, and of course edit.

This was the first time I have really written anything in CSS, so it was definitely a learning curve but once I got to grips with the syntax, properties and rules that could be added to each selector it was a lot of fun playing around with the style and seeing everything come together and look relatively similar to my initial wireframes.

I was also able to define the font used, as well as create buttons and ensure the images on the site are responsive (this was definitely a bigger challenge than I initially anticipated).

Adding HTML Pages to Python

The next step was to take these pages and add them to the Flask framework using the render_template() function, this takes the name of the HTML file as an argument and allowed me to create an app route for each page. This not only ensured the pages could be rendered in the template, but also allowed for easy internal linking across the pages, rather than adding whole URL each time, I was able to just define the name of the page I wanted to link to, and it pulled the URL through.

Flask also allows you to add a template HTML file, where you can define a navigation and header structure to then use across the site. This meant that rather than have to replicate this on every page, I simply added a small function to add the block content from the template page.

Code Editor

I wrote all of the code in PyCharm as this is my code editor of choice to write HTML and CSS as well as Python. I also hooked up my Github account through the terminal which meant that I could easily commit the changes I made straight through PyCharm.

Deploying and Hosting

The site is deployed through Github and Heroku which make it super easy to both store all of the code, pages and changes as well as commit the complete build to a fully working Heroku app. Heroku also makes it really simple to add a custom brought domain by configuring DNS with your purchased domain.

You can also upgrade your free account in order to configure an SSL certificate with end-to-end encryption through Heroku (there is also the option to manually add a certificate if you have purchased it elsewhere).

Logo

My friend, and amazing designer, Lewis Nelson, went freelance last year and having worked with him previously I knew that he would be perfect to create the logo for SEO Dogs and it was. a great way to support his new business.

So what does SEO Dogs include?

The topics currently included on the SEO Dogs site are:

Crawling and Indexing

- Crawling

- Rendering

- Indexing

- Robots.txt

- Noindex & Nofollow

- Canonicals

Site Structure

- Site Architecture

- Sitemaps

- URLs

- HTTPS

On-page

- Heading Tags

- Meta Data

- Page Titles

- Meta Descriptions

- Alt Text

User Experience

- Site Speed

- Accessibility

Links

- Internal Links

- Backlinks

- Redirects

International SEO

- Hreflang

- TLD & ccTLD

If there are any other topics you think would be useful to include, please let me know!

What's next?

I haven't really thought that far ahead if I'm honest. I hope to continue working on my skills in order to continually improve the site, particularly focusing on user experience and ensuring it is as accessible and usable as possible. I'll also be updating the dogs on each page once they are adopted to their forever home!