An introduction to Meta tags, A11y, and SEO

Last night I started working on the meta tags for my app Costream, which allows Twitch streamers to co-stream (also known as LiveView) alongside any Youtube stream.

I believe something essential for making content is the way you present it to the world, how accessible you make it, and how fast and attractive it is.

Today I want to share with you three elements that I found noteworthy: meta tags, accessibility, and SEO.

Let's start!

Meta tags

Meta tags help with SEO ranking and sharability.

Meta tags display information about your web page; when done correctly, it can take the user seconds to engage with your content; basically, it is what people see when the content is shared, so you want it to be clear and attractive.

Meta tags consist of three crucial parts :

• Title (Very Important)
• Image (Moderately Important)
• Description (Least Important)

Let's briefly talk about each one.

Title: In technical terms, the title is an HTML code tag

<title>My Awsome page<title>

that allows to give your web page a title, but don't be fooled by its simplicity; these 0-60 characters affect your website traffic and play an essential role in the organic ranking (SEO).

Image: The meta image appears when a user shares an article or page from your website.

Description: It is a summary of a particular page; the meta description gives you more room to explain what you're offering to the user. The reason it's ranked as least important is because search engines tend to alter the description people see when your webpage is shared to attract specific users to click the link.

Accessibility

When discussing accessibility, I refer to people's interaction with your website, from the first page load to using the site's various functions.

Let's take into consideration these things when building a website:

Optimization: It helps improve your website's performance by making it faster and easy to navigate and drives more traffic to your site. An example of optimization includes shrinking images before uploading them to your site.

User Interface (UI) + User Experience (UX): UI refers to the visual elements you interact with when using a website; UX refers to your entire interaction with a product.

These two are essential because they help create a bridge between you and the user and make their experience enjoyable.

A11y: Reaching people with physical disabilities, situational disabilities, and socio-economic restrictions is crucial when discussing web accessibility. A11y are specific rules that will help you create an inclusive website.

A11y is an essential standard. Get familiar with it by reading about A11y on their website - https://www.a11yproject.com/.

Search Engine Optimisation (SEO)

Last but certainly not least, we have Search Engine Optimisation, which is a way of increasing the visibility of your site when people search for specific products or services.

This tool can help you improve your website's position on search results pages like Google; if your website is listed higher, more people will see it.

You might be thinking: How do I measure SEO?

Google Lighthouse is a tool to measure and help you improve the quality and performance of web pages by creating reports showing how well a specific page did and how to improve your site.

Each of these things we learned today is an important piece when developing a project; if you use them correctly, you can even reach the moon.