12 {{ upvoteCount | shortNum }}
12 {{ upvoteCount | shortNum }}

H1 Tags in Wordpress make text look like crap

by actionbiz
10 replies
  • WEB DESIGN
    • |
I have searched with no luck.
I hate adding H1,H2 and H3 tags to my WP pages because it blows up the text so I have to put my key phrases on their own lines which of course looks like crap.
Someone a while back had built a plugin that kept this from happening so you still got the H1 tag showing in your source code but on the page the text was the same size as the rest of your text.
Does anyone know where I can find the plugin? Or is there an easy fix?
I can rank sites all day long but have no idea how to mess with CSS.
Thanks for the help
Barry
#crap #make #tags #text #wordpress
  • Profile picture of the author Michael71
    I would use a class on the h1 tag like:

    <h1 class="keywordtag">Your Keywords</h1>

    and stlye the class how you want it.

    h1.keywordtag {font-size:..... <more code>}

    Depends on how you want your h1 to look like... really easy. No need to use a plugin.
    Signature

    HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
    ---
    Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

    {{ DiscussionBoard.errors[8077829].message }}
  • Profile picture of the author run
    Originally Posted by actionbiz View Post

    I have searched with no luck.
    I hate adding H1,H2 and H3 tags to my WP pages because it blows up the text so I have to put my key phrases on their own lines which of course looks like crap.
    Someone a while back had built a plugin that kept this from happening so you still got the H1 tag showing in your source code but on the page the text was the same size as the rest of your text.
    Does anyone know where I can find the plugin? Or is there an easy fix?
    I can rank sites all day long but have no idea how to mess with CSS.
    Thanks for the help
    Barry
    This is from your theme css style.
    I can't comment on this because I don't see your theme style, but here's just an example of code:

    External Style:
    HTML Code:
    <h1 class="ClassName" >YOUR NORMAL PHRASE</h1>
    Code:
    .ClassName h1,  .ClassName h2,  .ClassName h3 {
       font-family:  Arial, Tahoma;
       font-size: 13px;
}
    Inline Style:
    HTML Code:
    <h1 style="font-size: 13px; font-family: Arial, Tahoma;" >YOUR NORMAL PHRASE</h1>
    Signature
    I just wanna tell you that most of the links in the signature are trash and/or a trap to make you pay!
    {{ DiscussionBoard.errors[8077842].message }}
    • Profile picture of the author RobinInTexas
      Just add a custom css and you can style the tags to suit you.
      Code:
      h1{
       font-family:  Arial, Tahoma;
       font-size: 30px;
}
 h2{
       font-family:  Arial, Tahoma;
       font-size: 24px;
}
h3 {
       font-family:  Arial, Tahoma;
       font-size: 18px;
}
      Signature

      Robin



      ...Even if you're on the right track, you'll get run over if you just set there.
      {{ DiscussionBoard.errors[8077861].message }}
    • Profile picture of the author scottlpool2003
      There's no need to add the class to the H tag when the H tag will be in a DIV anyway. Add the H style to the parent DIV instead otherwise you'll end up with a mega large CSS file.
      {{ DiscussionBoard.errors[8077867].message }}
  • Profile picture of the author actionbiz
    Fantastic , I really appreciate all the help
    this one works the easiest
    <h1 style="font-size: 13px; font-family: Arial, Tahoma;" >YOUR NORMAL PHRASE</h1>Would still be nice to have a plugin that added a icon to standard WP kitchen sink so all you had to do was highlight the words you want to add an H tag to then select the H! H2 or H3 tag. for code dummies like me .
    Thanks Again for the help
    Barry
    {{ DiscussionBoard.errors[8077945].message }}
    • Profile picture of the author scottlpool2003
      Originally Posted by actionbiz View Post

      Fantastic , I really appreciate all the help
      this one works the easiest
      <h1 style="font-size: 13px; font-family: Arial, Tahoma;" >YOUR NORMAL PHRASE</h1>Would still be nice to have a plugin that added a icon to standard WP kitchen sink so all you had to do was highlight the words you want to add an H tag to then select the H! H2 or H3 tag. for code dummies like me .
      Thanks Again for the help
      Barry
      Hi Barry

      Inline styling isn't best practice, in your stylesheet simply style the H1 dependent on the parent DIV. E.g.

      Code:
      #myDiv h1 {
font-size: 13px; 
font-family: Arial, Tahoma;
}
      The separation of content and style should be maintained that's the whole point of CSS to keep it all nice and neat. What's the point of styling it inline when if you can style it in the CSS file, you can change all the H1 tags at once.
      {{ DiscussionBoard.errors[8078017].message }}
  • Profile picture of the author Istvan Horvath
    To quote one of your tags added to the thread (see bottom left) - it is "crap" technique to add H1 tags inside a post. Unless you want to cheat the search engines... why would you need it?
    Signature

    {{ DiscussionBoard.errors[8078773].message }}
  • Profile picture of the author SmallBizWebsites
    It is really a bad idea to use inline CSS to style tags. An example of inline CSS is:
    <h1 style="font-size: 13px; font-family: Arial, Tahoma;" >...

    What happens is that you forget that all H1 tags EVERYWHERE should use the same style for the sake of consistency and uniformity. You eventually wind up with a website where there is a hodge-podge of differently styled tags, not to mention the bloat of the added code you need to enter.

    Do it the way scottlpool2003 said. Use a style sheet and style all of your tags there. If you are using a purchased theme for your WordPress site, look for the file ending in .css and modify it to suit.
    Signature
    Offering professional small business website designs and eCommerce online stores
    {{ DiscussionBoard.errors[8079339].message }}
  • Profile picture of the author run
    Start learning basic html/css otherwise hire someone for a cheap rate to modify this easy customization for you.

    As mentioned above inline stylesheet (you seem don't know what is inline/external style) rarely use nowadays.

    Furthermore, if you want to cheat SE, that's a very bad idea to have more than 1 H1 tag in a post. That should be one in the post title.

    If you still want to customize yourself, it should be like this:

    - Open the post/page that contain that H(n) tag
    - Right click and select "View Page Source"
    - Search for the phrase that is wrapped by H(n) tag
    - It must have some division tags to wrap that section
    - Find it Class
    - Add css to your external stylesheet. theme stylesheet or custom stylesheet.

    If you can't really understand these simple process, you should learn more about basic html/css.
    Signature
    I just wanna tell you that most of the links in the signature are trash and/or a trap to make you pay!
    {{ DiscussionBoard.errors[8079675].message }}
  • Profile picture of the author scottlpool2003
    The H1 tag should be used once per page, it should be the title of the page. The next heading, H2 is a subheading followed by a paragraph. It is particularly useful to use the H tags correctly as when search engines crawl your website, they will see the order and relevance of the content on the page.

    There's an interesting article here about the H tags and their uses: Correct use of header tags - optimising H1 tag, H2, H3, H4 - Using header tags correctly

    Also, I noticed you are using px for font sizes. This is a bad idea as users on larger or smaller screens will only see the px size. Use em or %.
    {{ DiscussionBoard.errors[8080335].message }}

Trending Topics