Step-by-step mini snippet to set up a blog post SEO

OlegP — Mon, 03 Jan 2022 11:16:32 +0000

How to optimize a blog post

Select the keyword and searcher intent you want for the page. One core keyword = One page. Google rank pages not domains. Use keywords tools: Ahrefs, KW finder, Keysearch, Keywordseverywhere.
Optional: find related non-core keywords to write sub-sections.
Write the content of the page without worrying about optimization. Write for users.
Optimize page title with the chosen keyword. Use dates, numbers, power words in titles. Use HeadlineStudio.
Optimize URL slug: include keyword, use hyphens, keep it short, max 3 levels of path nesting.
Optimize meta Description: include keyword, google shows it on the search page, so make it readable and attractive.
Optimize page content: set up a single H1 tag, include core keyword in the first 100 words, use synonyms and LSI keywords (Latent Semantic Indexing keywords are words that are commonly used within the context of the main topic, e.g. coffee: water, machine, recipe...).
Structure your document: H1, H2, H3. Make it readable: keep paragraphs short, break up text with images and headings.
Optimize images filenames and alt attributes: use human-friendly namings.
Include internal and external links. Your page must be a part of the whole net. Link to already well-ranked pages, competitors, authorities.
Use semantic markup, use specific HTML tags such as <article>, <p> and others instead of universal one like a <div>.
Set up robots.txt, sitemap.xml, google search console.
Use appropriate microformats and rich snippets. Set up Facebook Open Graph tags and support for Twitter cards.
Include canonical meta tag: <link rel="canonical" href="https://..." /> and consider to cross-post your content on various platforms.
Optimize page load speed, make it mobile-friendly and make sure to use https.
Apply writing tips and tricks: give some value at the very beginning, use "So what?" and "Why should I care?" mindset, use humor, make it controversial, use cliff-hangers, make it personal, end with a call-to-action.

How to start a blog in a single command?

OlegP — Fri, 17 Dec 2021 20:42:23 +0000

TL;DR

npx create-next-app --example blog-starter-typescript

Here is mine.

Why?

to practice writing for the public and putting thoughts on paper

Writing helps to gather thoughts together, diving deeper into the subject. Even just by starting to write, I can find mistakes and come up with new conclusions. I believe that writing should be included as the final step in the "Definition of Done".

to improve the written English

Do you already watch movies and read articles in English? That's the most obvious way to improve your listening and reading skills. But what about writing? Then probably I should try to write, write and write...

to try a tiny-blog approach

Literally write anything you want. If you don't know how to create good content, try making a bad one.

to share solutions

I can find a lot of answers about how to solve various development problems just by googling. Why? Because someone just wrote an article about it.

Or to build community, launch your newsletter, build your own brand...

Research

There are a lot of ready-to-use solutions to start a blog. Some of them are:

communities: dev.to, hashnode.com, medium.com

Here your content will be visible to the whole community immediately. Handled and maybe even promoted by the team behind it. And you don't need to install any software.

popular CMS (Content Management System) such as wordpress.org

It is not just for a blog, but also a popular way to create your own website. Choose your hosting, install the wordpress, pick your design template, and start writing. Or you can even skip the installation process by using ready-to-use hosting solutions such as wordpress.com.

no-code website builders: wix.com, tilda.cc...

Easy to start without any dev experience. Easy to build your blog alongside other parts of your website.

headless CMS, publishing platforms like ghost.org

Mixed way. There are a lot of built-in integrations with various third-party services out of the box. You can use one of the provided design themes or even set up your own static website while using CMS only as a data-management tool via API. So you will have full control over the visual representation of your site.

static sites generators

Free to change anything. Build anything. Plug-in any analytics, third-party services you want. No dependencies at all. But you have to do a lot of things manually.

So these are different types of solutions. Each of them has its own pros and cons and the choice really depends on your goals and skills.

As a developer, to make experiments, to understand how things work under the hood, and to have full control, I chose the static sites option. But in general, this may not be the best way to start a blog! If you are more interested in the content itself and building a community, then another solution is more likely to suit you.

But keep in mind that your own website gives you a bit more freedom and control. It will stay at any time, can serve you as a playground and your "home" place.

Another tip could be that it's not necessary to stick only to a single solution or platform, you can have your own self-hosted blog while cross-posting your posts on various websites such as reddit, medium.com and others. Just do not forget to set up canonical url while cross-posting on other platforms.

So, what is the static site exactly?

Simply put, it's a bunch of "static" ready-to-read files saved on the server in opposite to the "dynamic" approach when content are generated on the fly dynamically. Static sites have their own pros and cons over dynamic ones such as speed, performance, security, ease of development and deployment. You don't need to set up a database or a "backend" server, so I think this is a perfect choice for a landing page or a blog.

And again, there are a bunch of static sites generators, just look at this link. There are literally hundreds of them.

I was already a little familiar with two popular static sites tools, such as Gatsby.js and Next.js. But still, I had to do some googling to compare Next.js vs Gatsby.js as a blogging solution, which one is better?

Personally, I've decided to go with Next.js, due to the following:

Next.js can generate static pages, just like Gatsby.js
Great support of server-side rendering in Next.js, so it would be easier to migrate to the "dynamic" approach mentioned before
Gatsby encourages you to use GraphQL and this is not my choice for a blog, but it's just a matter of personal preferences.

Solution

Next.js typescript blog starter!

The link above is just one of the examples that one can use to start a blog.
Here you can find more about how to use it.

So to create this blog I used a simple command:

npx create-next-app --example blog-starter-typescript

That's it, that's how this first post was born!

Afterwards

I've played a bit with the design by using other sites as references. Mostly it was about typography changes and styling common HTML tags such as <ul>, <table>, <p>... Just try various variants until you are satisfied with the results of HTML appearance.

Also, to make your blog a little more accessible you can use an appropriate font. You can find many of them on Google Fonts website. It's really easy to use by doing so:

@import url('https://fonts.googleapis.com/css?family=Spectral');

h1 {
  font-family: 'Spectral';
}

Personally, on my blog, I use the Atkinson Hyperlegible font. If you would like to find out more about typography I would recommend practicaltypography.com online book.

Publish

Finally, the blog has been created, the post has been written, there is only one thing left - deploy it to the Internet. And you can even do it without buying a domain at first!

To deploy static sites, you can use google firebase hosting.

Out of the box it'll give you a third-level domain (subdomain) for your website, e.g. mysuperblog.web.app. Moreover, it provides "https" support for your real domain when you'll be ready to connect it, and it's absolutely free for a small amount of traffic!

SEO checklist

The Internet nowadays is literally like a black hole. There are millions of websites. Whether you use a site builder or make your own blog from the scratch it's always a good idea to be sure of SEO (search engine optimization).

Here is a minimal SEO checklist:

semantic markup: use specific HTML tags such as <article>, <p> and others instead of universal one like a <div>
h1, h2, h3: structure your document
attributes: provide images alt, links titles
document metadata: set up document's title, description, keywords, Facebook Open Graph tags, support for Twitter cards
microformats, rich snippets
internal links, external links: the document must be a part of the whole net
robots.txt, sitemap.xml, google webmaster usage
canonical tags: <link rel="canonical" href="https://..." />
optimized URLs: include keywords, use hyphens, max 3 levels of path nesting
optional: use dates, numbers, power words in titles

DEV Community: OlegP