If you’re looking at this website now, there is a high probability you found it on Google. It has indexed high enough for you to notice it, and information scraps displayed in SERP (Search Engine Results Page) persuaded you to click on it.
I don’t care that much about SEO. I don’t use fancy SEO techniques, and - in my opinion - good content is the best SEO strategy. Saying that, still, I think there are some meta tags and good practices we can use to make our website rank higher and display better around the web.
What is SEO?
SEO is another acronym, of course. It stands for Search Engine Optimization. It is a process of improving a website to increase visibility in search engines like Google or Bing. Mainly Google in practice.
You can have the most beautiful website, but it won’t be helpful if nobody finds it. Of course, you can pay for ads, but most people skip them and go straight to the organic search results. Meta tags and good practices should help position our websites higher there.
Meta tags are snippets of text that provide additional information about a website. Search engines use that information to understand page content better. Most meta tags won’t be helpful for humans. The name of one meta tag is robots - their target audience. Meta tags are added to the head section of your HTML and won’t appear on the page. They can look like this:
List of meta tags
We can’t throw random things in our “heads.” There are specific tags responsible for different things. I’ll cover some of them: essential, important for SEO, social, and others. That won’t be a definitive list, but for most websites will be enough.
This attribute declares the document’s character encoding. UTF-8 is the only valid encoding for HTML 5 documents, so there is no choice here. There is another restriction - meta tag with this attribute must be located within the first 1 KB of the document.
We need a little context for this tag. The browser’s viewport is the area of the window where users see the content. It’s often not the same size as the rendered page - the browser provides scrollbars for all the content. Some pages are not optimized for mobile and break. That’s why mobile devices display pages in a virtual, wider viewport and then shrink the result. However, this is not good for mobile-friendly pages. And here comes our meta tag - it solves this problem of the virtual viewport. On a typical, responsive website, it looks like this:
The most common properties of the tag include:
width- controls the width of the viewport. You can set it to a specific number (pixels) or the
height- works the same as the above but for viewport height.
initial-scale- controls the zoom level on the initial load. It takes values from 0.1 to 10.
interactive-widget- specifies the effect interactive UI widgets (e.g., mobile keyboard) have on the page’s viewport.
Imagine a scenario - you started blogging on Medium, and one of your blog posts is at the address
https://my-blog.medium.com/blog-post/. But after some time building your blog, you started migrating your post to the address
https://my-blog/blog-post/. Migration runs successfully, but there is a problem - indexation. Google is still indexing your blog post from Medium. You can solve this problem of duplicated content by setting the canonical link. Google will crawl a page with the canonical URL, and all other URLs will be considered duplicates.
It’s one of the few meta tags that you can see. If you found this blog post on Google, you saw the title of this blog post in your search results. Now it’s displayed on your browser tab. Browser tabs and mentioned earlier SERP display the text from this tag.
The title of a web page should be an accurate and concise description of a page’s content. To achieve that, you can follow some good practices.
- The title length should be around 50 - 60 characters. To be precise, Google has a limit of 600 px to display titles. It will truncate the longer ones.
- Put an important keyword first. You can follow the template from the snippet above.
- But don’t overdo your keywords. A title is not a place for a list of keywords.
- You can also put your brand name in the title, for example, after a pipe character or a dash. But remember, it takes some of that precious length!
- As we saw earlier, we should avoid duplicated content. If the content is unique, the title also should be.
- A title should persuade readers to click on your website, so it’s a good place for novelty, paradox, or humor. But don’t use clickbait - don’t go the dark side of the force.
It’s another tag you can see in search results - just under the title. The meta description should briefly summarize the page’s content. For this tag, there are also good practices worth following.
- The description length can be longer than the title, but you should keep it under 160 characters.
- You can also include your keyword here if it makes sense.
- It may be tempting to copy-paste one description to multiple pages, but that defeats its purpose. Similarly to the title - the description should be unique.
- The description should also be accurate - avoid generic and vague texts.
“I’m looking at my website in search results, and that’s not my description! What the hell?” Don’t be surprised if there is another text displayed in search results. Google doesn’t always show the meta description you set. Sometimes it shows a different bit of text from your page. But that doesn’t mean you should resign from setting one.
Here’s this tag for robots. It tells search engines what to do with your page. Be cautious here - using the wrong attribute can cause SEO problems. The most important values are:
index- tells robots to index the page.
noindex- tells robots not to index the page.
follow- tells robots to crawl links on the page.
nofollow- tells robots not to crawl links on the page.
You can combine these values, so there are four possibilities.
Sharing your website on social media platforms can also gain you some visitors. But a simple link paste is not enough to display your website attractively. Fortunately, there are some social meta tags to improve that. Twitter has meta tags to show website info in different cards. I’ll list the essential ones.
URL of the content. The URL of the canonical link will be the best to use here.
Twitter username of website. It should be proceeded by the ”@” sign.
Someone had to create the content on the page. To mark the creator, use the above tag.
As the name suggests - it’s the title of the page. You can reuse the
meta title, but you don’t have to. The length should be similar to the
meta title - max 70 characters.
Once again, it’s self-explanatory - a description of the page. It can be a little longer than a
meta description - a maximum of 200 characters.
This tag defines the styles of the Twitter card. There are a few cards to choose from:
- Summary Card
- Summary Card with Large Image
- App Card
- Player Card
I’ll show an example below.
URL of an image to use in the card. But be aware - there are some restrictions. The image must be less than 5 MB in size. The supported formats are:
- GIF (Twitter will use the first frame in the case of animated gif)
Accessibility is significant, and every image on your page should have alternative text - including meta images.
Combining all that information, here is how one of my last posts renders in the summary card with large image (yup, I used this example because of the cute Dachshund).
These meta tags also control how links are displayed when shared on social media. They’re part of Facebook’s Open Graph protocol. However, they can be used by multiple social media platforms, including LinkedIn or Twitter (if the card info is absent). Most of them cover the same functionality as Twitter meta tags.
site_url doesn’t have an equivalent in Twitter tags. If a particular page is a part of a website, you should put the name of that overall website here.
It works the same as
twitter:url. You should put the canonical link here.
This tag also doesn’t have an equivalent. It describes the type of content you’re sharing. There are some different options - global types:
Most pages can have the type
website (no surprise). A blog post (like this one) can have the type
article. There are also informative tags linked to these types, like
It’s an OG equivalent of
twitter:title - a place for the page title.
It works similarly to the
twitter:description - description of the page.
You can also put images in Facebook posts. The difference is that the recommended aspect ratio is 1.91:1. The maximum size is 8 MB, so it’s bigger.
You should also add alt text for the OG meta image.
Additionally, you can set the dimensions of your meta image: width and height.
Having all tags in place, here’s how the same post displays on Facebook (just look at that cute face).
SEO is a complex topic, and it’s impossible to compress all the helpful information inside one blog post. But some good practices and meta tags are a good start. Additionally, I was planning to write about sitemaps, JSON-LD, language meta tags, etc. But the post is getting long, and those topics are slightly different. I may write about them - you can let me know if you like to read more about SEO on my blog. And if you want to read more about SEO now, check out the below links.
- What is SEO?
- Meta tags for social media
- Meta tags for SEO
- About Twitter Cards
- Twitter Card Tags
- The Open Graph protocol
- Facebook sharing
Share this post to check how it displays on social media. It’s not about increasing my reach. No way! You can just check if meta tags work correctly.