SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    Jan 2014
    Location
    yyz
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    A Meta Tag Best Practices Reference / Resource

    1st post here. Odd seeing that i own quite a few SP books. Either way, looking fwd to joining the community. Here's a quick statement/q?

    Is there a thorough post somewhere that will give me a run down of <meta> tag best practices?? After looking at some headers recently that had some pretty detailed meta tagging, I feel like i've been totally neglecting that end of it - or were they going overboard?? I didn't bookmark the page sadly. Anyone have such a resource? I was looking @ a few Google Dev pages and they had nothing too extensive.

    Anyhow, thanks in adv.

    cheers.

  2. #2
    SitePoint Wizard
    Join Date
    Oct 2005
    Posts
    1,849
    Mentioned
    5 Post(s)
    Tagged
    1 Thread(s)
    A lot of meta usage is overboard if you ask me. Sometimes meta elements are used for Facebook purposes. Other times it is used so the author can stick information in the document. The important uses of meta are to indicate a character set and provide a description for the document.

    HTML4:
    HTML Code:
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    XHTML1.0:
    HTML Code:
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    HTML5:
    HTML Code:
    <meta charset="utf-8">
    The charset declaration should be made right at the top of the document after the opening head element. Browsers will use whatever is sent in the HTML header as the character set, ignoring the meta, but this provides information for anyone looking at the HTML.

    Another important use of meta is to specify a description for the page which is generally used by search engines in results pages.

    HTML Code:
    <meta name="description" content="This is where you put the description of the page you want to use." >
    Also for providing keywords which may people no longer use as search engines ignore them for ranking purposes.

    HTML Code:
    <meta name=”keywords” content="hamburgers, hot dogs, mayo, hot, sun, food, poisoning" >
    Another annoying use for meta is to instruct the browser to refresh (or redirect) the page after a period of time, which browsers can be configured to ignore.

    Reloads the page after 300 seconds:
    HTML Code:
    <meta http-equiv="refresh" content="300">
    Redirects to another website after 5 seconds:
    HTML Code:
    <meta http-equiv="refresh" content="5;url=http://www.sitepoint.com/">
    Specifying author information:

    HTML Code:
    <meta name="author" content="cheesedude">
    For search engine robots:

    HTML Code:
    <meta name="robots" content="nofollow">
    And apparently for defining the viewport size for mobile devices:

    https://developer.mozilla.org/en-US/...Element%2Fmeta

    I suppose a best practice would be to set the charset and description and not use more than you have to.

  3. #3
    SitePoint Member
    Join Date
    Jan 2014
    Location
    yyz
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that. And I was generally on with the above - but always good to drive that home and burn it to memory.

    But I just recalled where I saw this meta mess i was inquiring about:

    <meta property="og:site_name" content="some company name"/> <--- what's this for?

    <meta property="og:title" <-- I saw this as well.

    and what is this itemprop attribute all about? not been able to wrap my head around it....

  4. #4
    SitePoint Wizard
    Join Date
    Oct 2005
    Posts
    1,849
    Mentioned
    5 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Henri Helvetica View Post
    Thanks for that. And I was generally on with the above - but always good to drive that home and burn it to memory.

    But I just recalled where I saw this meta mess i was inquiring about:

    <meta property="og:site_name" content="some company name"/> <--- what's this for?

    <meta property="og:title" <-- I saw this as well.

    and what is this itemprop attribute all about? not been able to wrap my head around it....
    "og" stands for "open graph". It's often (if not in entirety) associated with Facebook.

    http://ogp.me/

    As for "itemprop":

    http://developers.whatwg.org/microda...prop-attribute

    And if you want to go overboard with the meta element, here is a list of recognized values for meta, or meta extensions:

    http://wiki.whatwg.org/wiki/MetaExtensions

    Geographic position to which the page is related.

    <meta name="geo.position" content="48.02682000000001;7.809769999999958">
    And a whole lot more. The geo.position one looks interesting. It does not look like the meta extensions are used much by search engines, if at all. If not, I can't see much point in using them now.

  5. #5
    SitePoint Member
    Join Date
    Jan 2014
    Location
    yyz
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got it. Thanks for this. Looks like I'll be fine keeping it pretty simple then. Seems like the description attribute might be my best bet to focus on - according to Google as well. This is good practice though. Want to nail my header / meta game down pat.

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    All the http-equiv meta tags are (as the name implies ) HTML equivalents to HTTP commands that are better handled as HTTP headers rather than embedded in the HTML. You should only use them when you don't have access to set them on the server.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    Galactic Overlord gold trophysilver trophybronze trophy
    HAWK's Avatar
    Join Date
    Aug 2003
    Location
    New Zealand
    Posts
    12,573
    Mentioned
    976 Post(s)
    Tagged
    14 Thread(s)
    Quote Originally Posted by Henri Helvetica View Post
    1st post here. Odd seeing that i own quite a few SP books.
    Hi Henri! It's great to see you over here.

  8. #8
    SitePoint Member
    Join Date
    Jan 2014
    Location
    yyz
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by HAWK View Post
    Hi Henri! It's great to see you over here.
    Thanks Hawk. Super happy to be out here. Just added to the hours of reading / learning i'll be doing Genuinely excited.

    Speaking of, i was under the impression that you had spread your wings and flown out of here... Did I read that wrong?

  9. #9
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,259
    Mentioned
    245 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Henri Helvetica View Post
    Thanks Hawk. Super happy to be out here. Just added to the hours of reading / learning i'll be doing Genuinely excited.

    Speaking of, i was under the impression that you had spread your wings and flown out of here... Did I read that wrong?
    She left SP but not the forums. She's still keeping a eagle/hawk eye on us

    @cheesedude ; I don't see how the meta position can be of any use. I know that we all want to geo-target our users... but I can't think why a page needs to have a location.

  10. #10
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,506
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by molona View Post

    @cheesedude ; I don't see how the meta position can be of any use. I know that we all want to geo-target our users... but I can't think why a page needs to have a location.
    The idea behind it might be that the content of the page is related to a certain location. Like the site of a shop. So if you search for a hairdresser on your mobile, the search engine might rank the page of that hairdresser's site higher because he's located near you. Or something like that

  11. #11
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,259
    Mentioned
    245 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by guido2004 View Post
    The idea behind it might be that the content of the page is related to a certain location. Like the site of a shop. So if you search for a hairdresser on your mobile, the search engine might rank the page of that hairdresser's site higher because he's located near you. Or something like that
    Of course! When nothing makes sense, then think of rankings!

  12. #12
    SitePoint Wizard
    Join Date
    Oct 2005
    Posts
    1,849
    Mentioned
    5 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by molona View Post
    @cheesedude ; I don't see how the meta position can be of any use. I know that we all want to geo-target our users... but I can't think why a page needs to have a location.
    http://en.wikipedia.org/wiki/Geotagging

  13. #13
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    For more info on the itemprop-stuff, go to Schema.org as well.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •