Three Easy SEO wins for Developers

Lighthouse audit for https://joyful.gifts

Maybe it’s the convert’s zeal or the magic of code, but one of the best feeling in the world is when a project comes together and you hit that deploy button. It’s a literal metamorphosis of your ideas into a very real thing that other people can use.

Here is the thing though, it’s even more magical when that project is used all over the world by random strangers who found it useful. How do they find it? Well, they google something related to it!

Discovery.

I assume you know what is SEO, and why it’s a useful subject to be familiar with if you are building things or even developing for someone else.

If you don’t, here the one line summary; Search Engine Optimization (SEO) is what determines where your site shows up on search engines. Show up in the right spot (and the right time for the user) and traffic goes up. Ideally, that traffic leads to sales.

The problem with SEO is that it’s a notoriously complex subject with lots of marketing jargon and no definitive one source of truth. A marketer’s dream as good as any where it’s easy to get lost in the abundance of information.

You won’t learn SEO here, that’s not doable in a Medium article. Rather, this going to be on the technical part of SEO. Simple things you can do with code that would make Google loves you.

I have an MBA in marketing and developed https://joyful.gifts as a solo-developer, so I may have a thing or two to say about the two subjects.

Bonus: If you are a Django developer, I put my implementation there for you to copy! Although the concepts are widely applicable to web development in general.

Three Easy Things!

1- META tags everywhere!

Meta tags are the data about your data! It tells browsers, search engines, and web services what your site is about. Like an address on an envelope. They are easy to put together and an easy win. Here is my implementation of meta tags using Django templates to make sure they are on every page.

<!-- Facebook meta tags --><meta property="og:title" content="Joyful.gifts: Joy, Everywhere!" /><meta property="og:description" content="The world needs more joy, gifting made simple" /><meta property="og:image" content="{% static 'images/facebook.png' %}" /><!-- Twitter meta tags --><meta name="twitter:card" content="summary_large_image" /><meta name="twitter:site" content="@Jonathan_adly_" /><meta name="twitter:creator" content="@Jonathan_adly_" /><meta name="twitter:title" content="Joyful.gifts: Joy, Everywhere!" /><meta name="twitter:description" content="The world needs more joy, gifting made simple" /><meta name="twitter:image" content="{% static 'images/twitter.png' %}" /><!-- Search engine meta tags --><meta name="description"content="Joyful.gifts is an automated gifting platform that always finds the perfect gift, at the best price." /><!-- title customized in every template w/ SEO keywords --><title>{% block title %} Joyful gifts {% endblock %}</title>

Meta tags allows for social media posts to be rich in content, rather than a plain old link. It also allows search bots to correlate your page to key words that are being googled more easily. Here is a more detailed reading of the subject.

2- Sitemap and robots.txt

A sitemap is just that — a map to guide search crawlers to your website. What’s really important in there, and what’s is not as important. If you have a blog, a bunch of articles, or even recipes in a food application you can highlight them in a sitemap. Sitemaps can get pretty complex as your project grows, but to start they are easy to do.

Similarly, robots.txt is an optional file that tells search crawlers where they are not allowed to go. For example, if you have a section in the web-application that is only for employees, there are no reasons to have a search engine index that part.

Here is my implementation using Django;

settings.py
INSTALLED_APPS = [
..."django.contrib.sitemaps",...
]
urls.py (in config/core folder)
from django.contrib.sitemaps import GenericSitemap
from django.contrib.sitemaps.views import sitemap
from django.views.generic.base import TemplateView
#import the model you want to highlight here. Blogs, Recipes, ect.
from yourapp.models import Model
info_dict = {"queryset": Model.objects.all(),}urlpatterns = [...path("robots.txt",TemplateView.as_view(template_name="robots.txt", content_type="text/plain"),),path("sitemap.xml",sitemap,{"sitemaps": {"blog": GenericSitemap(info_dict, priority=0.7)}},name="django.contrib.sitemaps.views.sitemap",),]#priority default is 0.5 - the higher, the more important

A robots.txt file would live in your base directory. User-Agent is the name of the bots you want to control (* is a directive to all bots coming to your site). Disallow or allow is where your directives to the bots lives. Here is an example:

User-Agent: *  Disallow: /employees-section/

In that file, I am telling all bots to not index urls with /employees-section. For fun, check out Medium’s robots.txt file: https://medium.com/robots.txt

3- JSON-LD

JSON-LD is a special JSON for linked data. Basically, instead of letting the search bots do its own thing magically — figuring out what the title of your blog post, who wrote it, and what’s it all about without your input, JSON-LD gives it a little guidance. Spoon Feeding it relevant information by putting that information in a special script tag.

How it all works can get quite complex — But luckily, implementing is not as hard. There are lots of examples over the internet of well-implemented JSON-LD. Here is my favorite site as well as my own implementation below using Django to dynamically fill the templates.

<script type="application/ld+json">{ "@context": "https://schema.org","@type": "Article","headline": "{{post.title}}","alternativeHeadline": "Joyful.gifts is the place for the perfect gift in every occasion","image": "{% static 'images/svg7.svg' %}","author": "Joyful gifts","genre": "best gifts","keywords": "best gifts","wordcount": " {{post.content|wordcount}}","publisher": {"@type": "Organization","name": "Joyful gifts","logo": "{% static 'images/svg7.svg' %}""@type": "ImageObject","url": "https://joyful.gifts"},"url": "{{post.get_absolute_url}}","mainEntityOfPage": {"@type": "WebPage","@id": "https://joyful.gifts/posts"},"datePublished": "{{post.timestamp}}","dateCreated": "{{post.timestamp}}","dateModified": "{{post.updated}}","description": "{{post.title}}","articleBody": "{{post.content}}"}</script>

Conclusion.

Like development, improving SEO nevers ends. There is always one more improvement to do. I do hope that you can pick up a thing or two from here though and can start that journey.

I am happy to answer any specific questions about my journey or joyful.gifts — Best way is at Twitter

I do a couple of things → JonathanAdly.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store