Friday, August 18, 2017

web page header Meta Tags & Snippet

By Admin Baby Drivers  |  August 18, 2017 1 comment

Header or headline (H1)

web page header Meta Tags & Snippet Header or headline is the same as content title. Technically, it should be your H1 tag on your webpage, the first header on a page. Looks like this:

web page header Meta Tags & Snippet
This is another important page element that Google reads to see what your web page header is about. People get confused a lot between the header and the meta title tag. Simply put, Header is for users and meta title tag is for Google. What usually get displayed on the snippet’s title is your meta title tag and not this content header.

For header you can be as creative as you want in writing your headline, to make it interesting or mysterious without caring about SEO factors (inserting target keywords). Then, you use title tag and URL as your tools to make Google understand your content more.
For example:
Headline: “Five steps to report marketing results like a boss
Title Tag: “5 steps to report online marketing results like a boss by Joe Anucha”
URL: “reporting-online-marketing-results”

As you can see the variations above, the headline looks like it doesn’t give a damn about Google but only its users. It’s good. Looks very natural. But for title I added the words “by Joe Anucha” because I want the world to know and see in a snippet that I wrote this! No joke, many brands do this. 

Also I inserted the word “online” because “online market” is the keyword I want to rank for this page. Yes I did my keyword research. I also want Google to understand this content is about “online marketing” not just any marketing.

Now, you should see what’s the game here. SEO expert is always trying to make each of the webpage element serving its purpose. We use header to persuade users and other elements to be relevant for Google and try not to look robotic.

For a new blog who constantly keep writing new posts, soon your home page will fill with lots of headers, so think of your site like a newspaper cover full of headlines, make them hook! To come up with a great headline, keep the the following in mind:
  • 1. Always use H1 tag
  • 2. Think of users first and ask these questions:
Be useful: Does this title look useful enough? Make yourself useful!
Be ultra-specific: Is this title too broad? Don’t promise the world. Go niche!
Be unique: Does this title stand out from the top ranks? Be yourself! Have a voice!

Learn to craft you header often, and soon you will be able to master it every time without even thinking about it.

What about H2, H3..?

For CMS like: Blogger, Joomla, Wordpress etc, your header is already H1. So you don’t need to do anything but only the sub headers that you need to choose H2 and H3 yourself like this image:
web page header Meta Tags & Snippet

Longer article is always rank better these days but longer article without sub headers can be confusing to your users and also Google. So start using more sub headers to divide your stories well and use H2, H3 tags properly. I rather stab my eye with a pencil than read a 1,000+ words article without sub headers.

Most webpage with an article usually just has one H1 and a few H2s as sub headers and that’s it. You don’t need to go deep into the H3 and H4 sub headers unless your content really needs to. Don’t think SEO, just think READER.

Also, don’t forget, as I have been saying…check your top rank enemies. See what they do and do it better.
Don’t forget to insert a keyword to every header or sub header if you can. There are also good tips about header on this site here.
web page header Meta Tags & Snippet

On-page3: Meta Tags & Snippet

Meta tags is a strange thing. It’s everywhere but yet most people don’t even know they exist. It also means different things to different people. To Facebook fan page owners, it is the page name and short description. To programmers it is just a piece of profile code <meta> they can add at the top of a webpage inside <head>. To ordinary users, it tells them what each page is about on the top of each tap on the browser. To Google though, it is to learn what the page is about and making it into a snippet.

For SEOs, meta tag is the easiest and most effective way to tell Google what each webpage is all about.
Meta title tag is the snippet’s title and meta description tag is the snippet’s description.
Here is what it looks like:

On-page3: Meta Tags & Snippet

Here is the same page looking from Google search result:

web page header

You can also have “rich snippet” to gain even more clicks like below, with full meta data:
(Ask your web developer for this, or if you are using CMS, google for rich snippet plugins)

Meta Tags & Snippet

After you have mastered your write skills for the title and description you need to think about the space a snippet allows. Ideally, you want to make every space count.

Google limits space of text displaying on a snippet. If it’s too long, it will be cut out and truncate with ellipses like this title. Macmillan.. 

As of latest, Google just made the snippet longer:

Desktop computer:

Title = 70 characters
Description = 100 per line

Mobile phone:
Title = 78 characters (600 pixels)
Description = 100 per line

The most important thing to remember when creating meta tags for your whole site is that, you don’t want to use the same tag anywhere ever. Not title nor description. Ever! It would be a waste of webpage. In other words, you want every webpage to have its own unique title and description tag. Period.

You can check the length and the duplication with many tools. Google Search Console
can help you also. I’ll tell you about it later.

Another thing, as we see everyday, Google snippet is dynamic. Google can manipulate your snippets as it likes as longs it’s best for the clicks. Like in this case, if your webpage is missing the data to display in a snippet e.g. You forgot to write meta description tag and left it empty, Google will pull any content it finds on your webpage at will, to display as the description snippet instead and it could get very ugly. And if your webpage only contains a flash image, you could see your snippet appear with the words like “terms and condition” or “contact us” etc. because when Google doesn’t find any text, it would desperately pull the only text it finds which could come from navigator or footer menu text.

So, word of advice: don’t leave anything empty.
Also a note on the character limit from “It’s important to note that pixels, not characters, are the measurement that Google actually uses for search results and title length. We use characters as a more practical measurement, which is why character limits can only be an approximation, because characters like ‘w’ take up much more pixel space than characters like ‘i’ or ‘l’.”

Yup, snippet is a serious business for advanced SEOs. I feel, it’s more for people who already doing OK in SEO and has nothing else to craft. You can write a 200 pages book only about snippet if you really dig into it. So if you want to know more, read what Google has to say here. Read an extensive guide on this site.

Snippet Simulation

It’s much easier if you can see what you type in your snippet, like looking in a mirror. Just use this snippet simulator tool: Or for mobile use this one:

I recommend you do craft all you important pages or high rank pages first, to gain more clicks from that pages you already have some traffic from Google.

Snippet Simulation

To see all snippet data of all your web pages in a list just like below image, use Web Auditor software from (Free version won’t let you copy to clipboard or save project) or Integrity or Screaming Frog SEO (the last 2 are expensive if buy).

When you use this kind of software you will start to see many flaws behind the scenes of your site. Usually, you should see many missing meta tags. 90% of websites have missing meta tags, especially the description tag and too long too short meta tags which become bad looking snippets. Start working with that.

Screaming Frog SEO

On-page4: Body text

In modern day SEO, we see many SEO experts say, just write for the users and Google will follow. I’m all for that, but I also think it wouldn’t hurt to insert some keywords to my body text here and there, as long as it looks natural. To me, natural means inserting just enough keywords so you readers don’t feel it. Just enough keywords without ruining the smoothness of your written conversations and points you are trying to get across. Just enough to help your article understood by Google so your article won’t appear like a movie full of advertising brands.

Here is what body text looks like:

This is an article from and I don’t think they give a shit about inserting keywords in their online articles at all. They don’t need to. They are already famous with high traffic and probably don’t even care about Google. But for most of us, it’s the opposite.

However, if you looked at this article closely, you see the keyword “airbnb” about 3-4 times. This is just the right amount to add for 3 paragraphs without freaking out Google. If you write your own article on your site, I would suggest you to stop thinking about keywords at the beginning and just go for it. Go check out your competitors to see what they are doing with the topic and aiming to do better:

With in depth information and longer length (divide the story with sub headers) article. (More images and video) Write like there’s no tomorrow, until there’s no question left on the topic and done. After your article was done, then think about your target keywords. Insert your target keywords to your article like adding a pinch of salt into your soup. It shouldn’t taste too salty. There is really no definite number of keywords you can or can’t insert. Just do it carefully though. Don’t forget that body text isn’t the only place you can do it as I already show you on other elements.

Internal linking

In the image earlier you see many underline words, most of them usually are internal links that the author have made themselves to refer to other pages. See it better at below image, mouse hover to see the URL that the link leads to in the status bar. Each one is linked to other article on its own site. This on-page technique has been done since the dawn of SEO, it helps SEO a lot. It’s so popular and so effective, everybody does it. It’s not only to keep your users to stay on your site longer but it’s like rank voting to my own webpages just like backlinks so the webpage that got link can be understood better by Google. Therefore, rank better.

Internal linking

Just don’t create link using one word or one keyword but link a whole sentence or a few words like in example, because linking with a keyword could send spammy signal to Google.

Other things to add to your content
Add anything to make your content or article post more useful, more volume (longer length), more variety of format (text + images + videos etc.), easier to understand and to better prove your points. They are all good for your ranking. Basically, do anything to make your content better than your competitors. So what can you do?
Apart from skill writing….
You can add more value to your content with these:
  • Images (don’t forget to add img alt tag because Google doesn’t see image)
  • Comment box (Most CMS provide this already)
  • Diagram (including graphic, drawing etc.)
  • Bullet points
  • TableFile download
  • Youtube videos
  • User reviews
and also don’t be scared to link to your sources. Give credit to other sites you have gathered information from. It makes your site a little more real and more credible to Google.

User friendly

I include this ranking factor in the content and on-page section because it is about what you do on the page.

What user friendly has got to do with SEO? As you’ve already been told. What’s best for user is what’s best for SEO. This has nothing to do with inserting keyword into your pages but it’s about making your user happy. It’s the ease of use of your site and the most important topics these days are: responsive (mobile friendly site) and page loading speed.

Users on mobile has been exceeding the desktop for sometimes now (Mobile 70% and Desktop is 30% and mobile number keeps going up every day) and Google ranks mobilefriendly sites on mobile search result the highest. Check it out.

If you’re using a CMS like WordPress, it’s more likely that your site is already responsive which means your site can morph into various particular layouts to serve the screen size of the devices it is being opened. If you are on desktop, open your site and try resize your browser’s window and you see what I mean, if not, try a site like to see what I mean. Or you can test your website for responsiveness at:

If you don’t have a responsive website, don’t freak out. Slowly getting into the world of responsive, go ask your web developer how to go about this the best way. You can switch your platform to modern CMS like WordPress…I know I know, it’s easier said than done.

What if you have a big old corporate site and need to keep that big and old database, then you might not want to switch platform but just hire a programmer to edit your style sheet to convert your old site into a responsive design. It will be worth it and worth so much more in the future because soon there will be nobody left on the desktop world but a bunch of geeks. 

Site loading speed:

I never thought to do anything about my site being slow, I never thought Google would care that much and I also was lazy. I just want to focus on the content. Then I found out that one of my original content was outranked by a site that stole my content. Yes, it can happen to anyone if their sites have technical flaws. Never again I would be careless about technical site of things, especially about site loading speed.

One of my big clients revamp the whole website to a brand new CMS but as it turned out the new system is 5 times slow than the old HTML. Even though it’s a responsive mobile ready platform, ranks were dropping. While all my client’s competitors sites loaded around 8-10 seconds. My client’s site took about 15-20 seconds to load per a page. It was not unacceptable.

What I did was that I had to test the site loading speed for each page and find out what file is dragging the speed. Starting with the home page. The speed testing tool clearly show that it was the images. The new site has full screen size feature post image on every page, and the image file size was also very huge! 1MB - 2MB each. So we had to compress those images file to about 200k using Photoshop and it all worked out. For my WordPress sites, I installed image compress plugins and compress the hell out of my old post’s images.

However, it could be some scripts, flash files etc., you need to find out with a tool what cause the slowness and fix it one by one. If you have no idea, you need to contact your web hosting support to find out why your site is unusually too slow and ask for the advice. You can test your site speed with this tools:
For the just enter your URL and choose the nearest country to test. Look for waterfall graphic (see image below), and it will show you which file on your webpage take loading time too long, you will notice the anomaly right away. It can be any type of files that will take unusually long compare to other files.

Try to keep your home page speed loading not more than 9 seconds at least. The faster the better for ranking! (Google Analytics also has a menu that show your site speed performance, check it out)

Site loading speed

Moz also has other useful info about this.
Done for Step 2. I can say that the fun taks have been done. Here comes the tedious part. The last SEO process – link building.

» Thanks for reading: web page header Meta Tags & Snippet
Author: Baby Drivers

Never fear before trying it and never stop before it works.

1 comment:

  1. Mantaf gan terimakasih banyak atas informasinya