NerdAlert: Eww, code…
You don’t necessarily have to know how to read or write it, but you damn sure need to know it exists and definitely need to verify important elements, like meta tags, appear in your website’s code.
Ok, Shay, Let’s get this over with. How do I look at my website’s code?
There are two main methods:
- Viewing the page source.
- Inspecting an element.
They’re basically the same. The only difference is that inspecting an element will bring you right to the piece of code where the element in question is.
Both of these methods appear in the right-click context menu, when right-clicking anywhere on your website (note that safari users will have to enable the inspector tool for their browser).
Now let’s deal with them meta tags
Meta tags are information your website will serve to anyone who requests it, be it another website, a search engine, or an app.
Meta data, which is served in the form of meta tags, serves two main purposes. Search engines will require information to be able to show your web page as a snippet on the SERP. The snippet is that blue-green-black part, containing the title, the URL and the description of the page.
The second reason for which you need meta tags is to deliver the correct information from your web site to other websites.
To explain this aspect better, I’m gonna take Facebook’s link-type post as an example.
When you paste any link into Facebook’s status update, you get a preview of the link: the post’s featured image, its title, description, URL and author.
Most of this information can be automatically discovered by the system, scraping for information on the web page. Using meta tags, however, will give you much better results, though! You will be able to choose exactly what will go in any of these fields.
So the title or description might even change from platform to platform, letting you talk with a different tone where needed.
OK, I’m ready, show me those meta tags
Let’s look at the description meta tag:
<meta name="description" content="No CEO cares about code or meta tags, he has people on a payroll to do it for him. But no CEO can allow himself to have his website display wrong meta data."/>
So as you can see, each meta tag has a name (in this case, description) and content.
Some meta tags are also platform-specific. Meta tags whose property name start with OG, which stands for Facebook’s Open Graph language, are meant for Facebook to display.
<meta property="og:title" content="What are meta tags and why are they important for your website?"/>
What you see here is the title element which will be displayed when pasting this article’s URL into a Facebook status update.
Title’s can be different for each platform, as I’ve already mentioned. There is, though, a main title for the page (which can be different from the title of the page or article) that will be shown anywhere the title is requested (look at the text inside this page’s browser-tab for example).
This kind of title has it’s own tag:
<title>What are meta tags and why are they important for your website?</title>