Total Newbie Q's About H1 tags,

Discussion in 'HTML & Website Design' started by Richard Rockwell, Sep 28, 2015.

  1. #1
    So, as I've been venturing into the world of creating my own site I've run into a lot of questions (as well as answers & advice) and issues about design, seo, coding & html validator, just to name a few topics. In my search for a better understanding of these issues I've had to learn quite a bit and backtrack more than a few times. While I'm excited to create some new content for my wannabe money-making affiliate site, I've become pretty interested in learning about the coding aspects while learning how to set up a child theme for my WordPress site. I know, I know. I'm beginning to get a feel that WP has possibly a less-than-stellar reputation when it comes to coding and the like. It is what it is, and while I can already see that it's not perfect, it has gotten my content up and I'm willing to start learning about coding through using WP. Gotta start somewhere, right? Well, enough rambling, I'll break down my main questions/concerns that are at the top of my list:

    1) H1, H2, H3 tags.
    My understanding thus far is that they are used by search engines to prioritize headings on a page. I've started learning how to alter these tags, with some success so far, but I'd like to know more about what should be H1, what should be H2, etc. As of now, my only H1 tag is "Richard Rockwell" (richardrockwell.net) and my H2's are my site name also (not sure what I did there), 3 separate post titles, as well as several side widgets (e.g. recent posts, recent comments, archives, categories).
    Am I somewhere near the right track (as far as SEO goes) in thinking that on the main page Site Title should be H1 with Post Titles as H2, and vice versa (post title H1 & site title H2) on the post pages themselves?
    Am I looking in the right places (content-page.php, content.php, single.php) to start modifying and controlling these header titles?
    What's the deal with widgets being tagged as H2? Should this be or should I alter those?

    As it is now, my keywords have been bringing up my pages high in google searches (which makes me happy) although there are a few odd things I'd like to get figured out/fixed. Which brings me to my next question:

    2) Why are posts showing on google when searching for keyword of different post? For example, when I search for one post by title name it brings up that post in results, and also one of the other posts. NOT that I'm complaining (I can use all the se presence I can get), just curious. I have a sneaking suspicion that this may be in some way related to my first question about Header tags.

    And here's a really specific question (I think) regarding how to properly setup affiliate links and how this relates to HTML validator:

    3) When looking at my site on HTML validator I see that every one of my affiliate links is getting the same error message. Something along the lines of (I will include the exact message if necessary but at the moment I am typing this up offline as my router is acting like a real pos :) ) the link including a "bad value" and an "illegal character" in the query. "Not a url code point." I also get a bunch of errors about the links not including an "alt" element. Any insight into that?
    I could speculate about this (e.g. Validator "seeing" link as an image so it needs an alt, link text including space or some other character that can't be in a url) all day but I'm not sure how far it would get me.

    If anyone's got any thoughts or input on Header Tags, SEO, or those pesky links not validating correctly, I'm all ears and willing to learn from you. Any input, really, will be greatly appreciated! Thanks in advance.

    -Richard Rockwell
     
    Richard Rockwell, Sep 28, 2015 IP
    JohnScott likes this.
  2. JohnScott

    JohnScott Notable Member

    Messages:
    882
    Likes Received:
    294
    Best Answers:
    0
    Trophy Points:
    250
    #2
    Hi Richard,

    1. I think you are headed in the wrong direction with your concerns about SEO and heading tags. Yes, heading tags carry weight, but your rankings are going to be affected more by anchor text of links, total links, authority of links, and internal link architecture than heading tags.

    And, most importantly, SEO can make you numb to user experience. Optimize for the user first, then Google.

    As far as where to look goes, that depends on what theme you are using. Some themes like Avada let you go to themes> theme options> and customize all your heading tags, fonts, etc, without touching the code yourself.

    2. Off the top of my head, i would guess that the page showing up in the SERPs has more weight in Google's index than the one with the keywords in the title. Maybe it has more links, or maybe the page with the keywords in the title has some element to it that Google is filtering (e.g. link spam).

    3. Don't worry to much about valid html. Google doesn't have valid html. Apple doesn't validate. Can't think of a good reason to have valid html.

    Best of luck!
     
    JohnScott, Oct 2, 2015 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    One of the things you should keep in mind is the advice Matt Cutts (who as head of Google's anti-spam section might know what he's talking about) in regards to writing your websites: "Design for the user, not the search engine"

    How does this apply to numbered headings? The different levels of heading have MEANINGS, these meanings exist so that user-agents (all browsers are user-agents, but not all user-agents are browsers)[/i] can best convey that meaning within the limitations of the device being used -- be it rendered on a screen by a browser, spoken to a user with voice synthesis by a "screen reader", conveyed over a braille reader, sense ticker, teletype or any other conceivable means of communication.

    That's what we mean with the phrase "semantic markup" -- using tags for what they MEAN and not their default appearance. In most ways "semantic markup" is just a sick euphemism for "using HTML properly" -- we use said euphemism so as not to upset the morons, halfwits and fools who vomit up HTML any old way yet have the unmitigated gall to call themselves "professionals". Generally speaking most people calling themselves "designers" fall into this category, having actual design qualifications about equal to a soccer mom's qualifications on nutrition or a creationist on the subject of reality.

    So what do those headings MEAN. In professionally written structured documents -- term papers, scientific whitepapers, journal entries, even something like a newspaper -- headings are used to mark the start of sections and subsections. The "top level heading" on a page is the heading under which everything on the page is a subsection; ever notice how in a book or newspaper the name of the book, chapter or paper is on the top of EVERY page? That's your H1, it ties all the pages together so typically should be the name of the site.

    A second level heading -- H2 in HTML -- indicates the start of a subsection of that H1. Take a newspaper, while the PRESENTATION of the h1 may be different on every page, that heading -- the paper name -- is on every page. Each article as a subsection would start with a H2.

    This is where people often get lost is they cannot separate the default appearance of the tags from their meanings. Just because on the paper the headline "MAYOR CAUGHT TAKING MILLION DOLLAR BRIBE" is in giant letters on the front page, that does NOT "structurally" give it any more "import" than any other article heading. Even though they'd be smaller text on the page, "Woman raped on Emerald Street" and "K-6 gets new School Building" are NOT subsections of that major headline, so all three of those would be H2, regardless of rendering size. If you used a H3, you'd be saying that they were SUBSECTIONS and that isn't the case.... Unless of course the mayor took a bribe to cover up the rape in exchange for getting that school built -- and that would be one pretty jacked up town...

    H1 is the main heading, typically you should only have one H1 per page. H2 indicate the start of subsections of the H1, H3 indicated the start of subsections of the h2 preceeding them and so forth down the line to H6. If you hit six levels deep, you're probably doing something wrong and have a needlessly complex document. Finally there are horizontal rules, which do NOT mean "draw a line across the screen" -- again that's the default appearance. It MEANS a change in topic where a heading is unwanted or unwarranted... basically treat it like a h2 or as dividers between subsections of the h2.

    This is why having a H5 without a h4, h3 or h2 preceeding it is gibberish, it's why using a h2 for a tagline after a h1 is gibberish (since you're not starting a new section), and it's why if browser makers bothered implementing the specification properly HTML 5's ARTICLE, NAV, SECTION and ASIDE tags are pointless redundancies much akin to the crap HTML 4 STRICT was trying to get rid of. (Alongside all the rest of 5's pointless new redundancies)

    In that same way a P means a grammatical paragraph. HTML is NOT typography, since as a markup specification it has no business saying how the user-agent is to convey those meanings. That means a lone image tag is NOT a paragraph. That means most sentence fragments are NOT paragraphs... UL/OL are for bullet point lists, if the items are big enough to have headings, they're not short bullet points. That means "bullet point" as in the grammatical meaning, NOT that the presentation of dots before them!)

    You know, the **** they were teaching in 6th or 7th grade in the 1980's that's probably now college level remedial?

    That's how you USE HTML, and if your content is well written and well structured, containing relevant terms to the topic at hand on-site SEO should take care of itself.

    BUT if you are going the snake oil hoodoo-voodoo route of stuffing things into certain tags JUST for SEO purposes, you're ignoring why HTML exists, what it is for, and are quite likely to sooner than later get slapped down for abuse. That's why 99.99% of the people out there calling themselves SEO "experts" are at best snake oil doctors trying to convince you to buy Pirelli's Miracle Elixir.

    SEO is a small but important part of building a website. Doing it properly involves well written content, properly structured, properly marked up, presented to users as accessibly as possible and then properly promoted for organic backlinks. That it has been turned into a cottage industry filled with sleazeball scam artists who card-stack numbers, pull made up BS out of their backsides and spoon feed it to the naive, ill-informed or just plain desperate? Outright disgusting.

    Oh, and errors in affiliate links? I'm so shocked... -- You know how I just called SEO as a industry a giant scam? "Affiliate" ANYTHING is an even bigger bunch of scam artist bull akin to the late night TV scams like those promoted by Kevin Trudeau or Miss Cleo. The only REAL way to make money in such "how close can we get to a pyramid scheme can we get WITHOUT the fed coming down on us hard" idiocy is to be the ones at the top running it.

    Now, all that said, looking at your site your document structure is, well... the site is running on turdpress so the HTML is automatically rubbish -- massive static scripttardery sent with every page, endless pointless scripttardery, code bloat and an accessibility mess. (You may want to read up on the WCAG -- web content accessibility guidelines). I would probably pitch the whole thing in the trash and start over from scratch if i meant that as a serious website.

    THAT SAID, it's actually NOT unsalvageable and I don't see anything wrong with the heading levels used on the page. The one h1 and slew of H2 all look to be correct. What worries me is the source order -- I'd try to rewrite the theme (assuming turdpress will even let you do this) so the articles are BEFORE all the other headings. A document outline right now comes up as:

    <h1>Richard Rockwell
    <h2>Recent Posts
    <h2>Recent Comments
    <h2>Archives
    <h2>Categories
    <h2>Meta
    <h2>Review of “Give and Take” by Adam Grant
    <h2>Vio Music Braided Carbon Fiber Violin Bow Review
    <h2>Review of “Hero Food” by Seamus Mullen
    <h2>Send us a message
    <h2>Join Us
    Code (markup):
    When regardless of how it's shown on screen, I'd try to get that to be more like this:

    <h1>Richard Rockwell
    <h2>Review of “Give and Take” by Adam Grant
    <h2>Vio Music Braided Carbon Fiber Violin Bow Review
    <h2>Review of “Hero Food” by Seamus Mullen
    <h2>Recent Posts
    <h2>Recent Comments
    <h2>Archives
    <h2>Categories
    <h2>Meta
    <h2>Send us a message
    <h2>Join Us
    Code (markup):
    The earlier they are, the more 'import' they get, and when it comes to your H2 orders (or any sub-heading really) you have to ask "what is the user here for" and put those FIRST. The articles are the important elements, so one should TRY to get those ahead of the "extra stuff" like recent lists, archives, etc. This is also more useful for people on non-visual or non-css UA's...

    Which is really the point I'm trying to hammer home -- your HTML is there for structure and to say what things are FIRST, so that it's accessible to everyone, NOT JUST SCREEN USERS. That's why my process for writing a site starts out with the content or a facsimile of future content in a flat text editor as if HTML doesn't even exist, just put in an order that would be the most "useful". I then mark it up semantically (so semantically neutral tags like DIV and SPAN have no business in there at this point) so that it's accessible even if CSS and/or the normal presentation fails. Then and only then do I create my layouts.

    Sadly, 99.999% of turdpress templates I've seen fall way short on all of the above. It's why (on top of it having all the security of an open field) I cannot fathom why apart from ignorance and/or just plain greenness anyone would chose to use it unless it's at gunpoint.... but I've been at this **** for way too many years and say that about 90%+ of the asshattery people are vomiting up websites with these days.

    Turdpress, Bootcrap, jquery, blueprint, joomla, codeignitor, laravel -- halfwit bloated nonsense that lets people who have NO business making websites sleaze out train wrecks any-old-way then pat themselves on the back over how "modern" they are, then sit there wondering why it's a money pit or worse puts them out of business inside a year if it's for anything more complex than a blog for grandma.
     
    deathshadow, Oct 2, 2015 IP
    COBOLdinosaur likes this.
  4. Richard Rockwell

    Richard Rockwell Peon

    Messages:
    19
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    3
    #4
    DeathShadow, thank you for all your input. I was especially struck by the part about the document outline listing the review names before the widget names, which makes perfect sense and stuck out to my novice eyes when looking at the results of the HTML Validator. Thank you especially for going into detail not only about how a site should be structured, but also why it should be structured that way. A lot of information I come across in this learning process gives very limited information about the “how to structure” area, and usually no information explaining why things should be structured a certain way. I certainly do want to “design for the user, not the search engine,” but still want to make sure everything is “structurally sound,” if that makes any sense. My feeling is that I might have started to get overly-concerned with this (heading tags) aspect and weighted it higher than other factors that affect ranking. I'll remember that “content is key” thanks to you, JohnScott. Not exactly sure what anchor text of links is, but I'm guessing it's the actual text that you click on to follow the link. If I'm wrong, someone let me know :)


    As far as turdpress is concerned, the more I learn about coding & html & structure, the more I have been starting to understand your sentiment about the platform. Having been a member for a short time, my searching around for answers about various things has given me a glimpse of some of your opinions on turdpress. Haha. As it is, I'm knee deep in it. Who knows? I may end trudging through wp to end up creating another site doing all the coding and HTML myself. The scripttardery will probably exist for a while, though, until I've built up a better overall knowledge of coding and such that will help me deal with it properly. Thanks again.


    P.S.: One small, simple (or so I think) additional question about headings. Main page is all good, I believe (besides getting post h2 tags before categories, comments, etc. h2 tags which I've already started looking into). On the page of the actual post (e.g.: richardrockwell.net/review-of-give-and-take-by-adam-grant/) should the header tags be the same (H1 Richard Rockwell & H2 Review of Give and Take) or should it be reversed (H1 Review of Give and Take & H2 Richard Rockwell)? Or am I still just being overly concerned/nitpicky and should just let it be and focus on other aspects of the site to work on?
     
    Richard Rockwell, Oct 2, 2015 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #5
    The h1 on a site should be consistent across all pages UNLESS you are using HTML 5's SECTION or ARTICLE tags -- which generally speaking are redundant to why numbered headings exist and destroys most of the concepts on which semantic markup is based. Again even if there's only one article on the page, what about all those sidebar/extra items? You make the article title a H1, that would be the same as saying that "recent', "archives" and "send us a message" are subsections of that article -- which they clearly are not.

    Oh, if you are ever curious about the document structure, the "web developer toolbar" for Firefox under "information" has a "document outline" choice that will show you a tree, point out missing headings, and overall give you an idea what's a subsection of what. VERY handy tool for double-checking that "yes, I did this right". It will even throw up "missing heading" errors if you do something like have a H5 without a H4, H3 or H2 before it since, well -- no matter how many people have deluded themselves into thinking that's right, it isn't.
     
    deathshadow, Oct 2, 2015 IP
  6. mmerlinn

    mmerlinn Prominent Member

    Messages:
    3,197
    Likes Received:
    819
    Best Answers:
    7
    Trophy Points:
    320
    #6
    Left uncontrolled, "designers" can render any environment totally useless.
    --- Found on the web ---
     
    mmerlinn, Oct 3, 2015 IP
    Phil S and deathshadow like this.