Meta questions

HTML & CSS
1

Hello. I have never really understood what the meta elements do, or which ones I need.

Lately I have been using this…

<meta name="viewport" content="width=device-width,height-device-height,initial=scale=1"

But then in a PHP code sample I found, I see this…

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Questions:
1.) Can I have more than one < meta > element in my HTML?

2.) Is the first < meta > correct, or do I need another one with more attributes?

3.) In my first example, can I add a space after the comma or must everything be contiguous?

4.) Is the < meta > element just for my HTML, or do I need to take into consideration if I have PHP and what that PHP might be?

Thanks.

2

Yes.

The first meta is not 100% correct, here it is fixed:
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

Yes, you can add a space.

The meta tag is an HTML (client side) element, its not a part of PHP.

2 Likes
3

What about this other < meta > tag I found in a php sample…

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">`

What does that do, and do I need it as well?

4

Hi there UpstateLeafPeeper,

for HTML5 use the short version…

<meta charset="utf-8">

UTF-8 - further reading:-

https://en.wikipedia.org/wiki/UTF-8

I do not quite remember where I got this information,
but was told that this meta had prime importance and
should be placed placed directly after the <html>.

coothead

1 Like
5

So like this…

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
	<title>Sample</title>
</head>
6

…or like this…

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
    <meta name="keywords" content="single,pertinent,words,here">
    <meta name="description" content="page description here">
	<title>Page Title</title>
</head>

…and you’re all set to go. :winky:

coothead

7

Those that come with any kind of warranty? :shifty:

And is that all I need for all situations (e.g. desktop, mobile, various browsers) or is this more of an “art” than a “science”?

8

Food for thought:-

Pointless META

coothead

9

Link doesn’t work…

10

It’s working in my two test browsers - Firefox and Vivaldi. :winky:

coothead

11

Nope. Not in Firefox. (I have had issues reaching his site before…)

12

Hi there UpstateLeafPeeper,

well that is very strange. :wonky:

Of course, there is always more than one way to skin a cat,
here is the content that you are unable to reach…

2.3 Pointless META

There are a LOT of META tags that nothing out there actually uses. To be frank, I consider there to only be three or four legitimate META to be used. It is easier to list the legitimate ones than to try list all the possible garbage.

GOOD META :

  • name="viewport"
  • name="keywords"
  • name="description"

Apart from that, there’s usually little legitimate reason to be using META tags… making all the other ones people pull out of their backsides little more than pointless bloat. There ARE exceptions like certain (but not all) “openGraph” values or tracking software specific ones. Really though if you need extra scripted tracking software on your page, there’s probably something either wrong with your server or your knowledge on how to manage a website. Yes, Google Analytics, I’m looking at you!

2.4 overstuffed keywords META

A lot of people say the keywords META is now ignored completely, my own results beg to differ. I think the reason people think it’s ignored is few if any people use it correctly.

First off, it’s called keywords. NOT keyphrases, not keysentences, not keyparagraphs – keyWORDS!!! It should be 8 or 9 single words (I make an exception for unique multi-word pronouns – like the names of states, provinces, or even software) that exist in the BODY of your document, you want to have a slight ranking boost on. Preferably it should come in at under 127 characters… and some sites like SEOWorkers.com suggest even less than that.

It should also be thought of as a word jumble, you’ll often seen endless pointless messes like this where people try to come up with every possible combination.

For Example:

<meta
	name="keywords"
	content="babysitting keene new hampshire, babysitting winchester new hampshire, babysitting chesterfield new hampshire, babysitting walpole new hampshire"
>

Pointlessly redundant – THIS would be functionally identical:

<meta
	name="keywords"
	content="babysitting,new hampshire,keene,winchester,chesterfield,walpole"
>

Of course, if any of those do not exist inside the document BODY they have no business in your keywords META , and could make the whole thing be ignored; or worse result in the engines slapping you down for trying to game the system!

I would also point out that it’s a comma delimited list. I’ve seen people go and use all sorts of goofy characters like vertical breaks, asterisk, semicolons… and they’re all gibberish that also basically flushes your chances of a keywords META doing anything.

2.5 Nonsensical description META

The description META exists to be a short description of your site shown as a tooltip or as the text below your SERP listing. That’s it, that’s what it is for. Natural language text to tell people viewing your listing in the search engines what the site is about. It is NOT a place to endlessly stuff keywords, it is not a place to put oddball random information that doesn’t tell people what the site is about. It’s pretty simple, I’m shocked how many people screw it up. It is also recommended you keep it to below 127 characters – basically a sentence or two.

coothead

13

@coothead,

Thanks for pasting.

Yes, I am aware of the need for keywords and description, but I’m more concerned about meta tags that might impact a browser’s ability to read my page.

That being said, it sounds like all I need are these two lines for that, right?

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
14

They will ensure the correct rendering of your page
assuming, of course, that your coding is not untoward :winky:

coothead

15

That’s why I have you! :wink:

Thanks.

16

Also vague memories that positioning is important to prevent charset having to validate a previously declared title tag.

Edit:
I also believe the supplied link, which was not dated, no longer applies to keywords. Google has video on this which I watched a long time ago.

2 Likes
17

That much I know, which is why I could use 2nd and third opinions on my meta tags.

You don’t need mch, but what you have and the order it is positioned in supposedly makes all the difference from what I recall reading!

Yeah, for all of that ranting, I wonder how outdated those suggestions really are?!

1 Like
18

Google Mobile Friendly reports that mobile text size is unreadable if the viewport meta tag is not declared or has parameters restricting automatic text size adjustments.

Edit:

I get the general impression that even if a web page validates and looks pretty, popularity along with SEO Brownie Points depend upon published content (notice the emphasis on published content).

Pleasing people all the time is impossible so strive for quantity.

Reminds me of the cartoon about two new blog writers and the one with an enormous amount of hits was due to a title spelling mistake.

19

I would not include the “keywords” meta tag in “good meta”. It was abused in the past for SEO purposes and is no longer used at all by Google. I believe other major search engines take a similar approach. Including it is just a waste of effort, IMHO.

See also https://support.google.com/webmasters/answer/79812?hl=en for meta tags Google does use.

4 Likes
20

Not such a helpful article. It omits the charset meta tag which is kinda helpful.

2 Likes