Is it ok to use a h1 tag in the header of a site? I don't mean to replace the logo but as a bit of text next to it with keywords.
The body h tags would all be h2.
Only reason im thinking this is because the site is more or less a personel project site and the design is more of a news or directory layout with not much need for a h1 tag in the body.
Or will this somehow get my penalized by google?
From Mozilla Foundation:
...you should consider avoiding using more than once on a page; by convention, it's used for the page's displayed title, with all headings below starting with . When using sections, you should use one per section...
That said here you have the link to it for further knowledge:
Heading elements
Related
I'm following the Udemy complete web development course. I'm supposed to be making a clone of the BBC website but I'm having a couple of issues. First of all my font is much bigger than this, set to the same 0.75em. Also my h1 tag seems to be to the right of the tag so I am guessing I've messed up with the flow somewhere but can't see how.
http://jsbin.com/yowoyohaja/1/edit?html,output
From what I can gather, you would like the header to be above the date?
If that's the case then simply move the H1 tag to above the date in the HTML and ensure all your open tags are closed, as your H1 tag was left open. See updated jsbin:
http://jsbin.com/cetokibuva/1/edit
Ok so I'm not sure if this will effect my page seo? What I've done is created a paragraph and put my h1 tags in the middle of it. I'm trying to rank for freelance web design belfast and it's in the middle of the text and because it looks better design wise on the page. On all other pages its the title by it's self except the home page, I'm just interested if this will effect page rank for sacrifice of design.
<span class="meet">Meet Jonny.</span><br/>
<span class="freelance">An award-winning <h1 class="h1-home">freelance web designer based in Belfast, Northern Ireland</h1>, who creates eye-catching responsive websites. Follow him on <a target="_blank" href="">Twitter</a>, flick through his <a target="_blank" href="">Flickr</a>, or just say <a target="_blank" href="">hello.</a></span>
The h1 tags will be recognised as more important keyswords for your page. What will matter more is that the actual content of the website is extensive enough and that it includes a lot of relevant text, about/synonyms of the keywords. Incoming web links will also increase it's importance. I don't think the h1 tags will do THAT much, but they will help google determine the important words on your side.
It makes little or no difference to your sites rankings. If I were you, I would worry more about the design, speed and experience. What you did there may seem inappropriate, but if the page has enough valuable content, on pages and its sub pages and people are hanging around these webpages, they should do just fine in search.
Found this thread. You may find it useful.
http://moz.com/community/q/h1-tag-mandatory
Most of the websites design H1 to indicate what is the content of the page about. They are heading tags generally used to present organized/structured content. IMHO, it looks like you are using H1 for styling and not really as heading of structured content. You can use general css styling for that and they will have pretty much the same effect as stuffing it inside the H1 tag. Theoretically it will not affect SEO ranking, but in my opinion try using a CSS styling for that and use H1 for heading tags. Also make sure you have a (one and only) H1 tag on the page.
http://www.searchenginejournal.com/2014-important-h1-tag-seo/106613/
Is it semantically correct to have no h1 header in a web page, suppose i decided to have an image with the page logo and title used instead of having the h1 header element, is that acceptable?
Sometimes you just need to use image of logo instead of text version as your logo may be (and usually indeed is) complex. so it's fine. Remember however to use alt attribute for images explaining it.
I think that there is no requirement that says 'yes you NEED to use h1 tag on your page'
I have an assignment due in on the 18th of August 2014, and have now been told that I need to add certain section elements to my website. However, I do not know how to use them. what are the header, nav, main, article, aside, and footer elements use for and how do I use them in my website?
Since HTML is a Markup Language, there are specific tags that it outlines which are essentially considered "the right ones to use" in different places of your code. For example, if you were to put a navigation bar in your site, you would use the "nav" tag to outline the section in your code that contains the navigation bar code, but you could just as easily use a "div" without causing any different behavior. Now with that said,
Nav: The section that is usually just the top section of your page that holds links to different parts of your site (see the top of this page, however if you look at this page's source code you will notice they do not even use nav tags as specifically named tags such as these are not mandatory, you can simply use divs all over the place but that is not a good practice)
Header: The banner section if you will where the title of the page and other global information pertaining to the page exists (ie the a large representation of your site's logo or number of visitors for your site)
Main: The actual content of your site (the main content)
Article: Think of this as a blog post which typically consists of text and maybe an image
Aside: Usually inline with an article or some other block of text used to insert additional information (ie fun facts)
Footer: The bottom of your page which also contains links like the header, but usually are more verbose as well as copyright information (Stack overflow has a rather large one if you scroll to the bottom of this page)
You can read more about these specific tags here: Quackit - HTML 5 Tags and good luck with your project.
On the home page, is it best to use <h1> for the blog title or description?
By default Thematic (the theme I'm building my child theme on) uses <h1> for the blog description.
Also, I've replaced the blog title text with an image logo. Is this ok or should I still display the text and use text-indent: -9999px to hide it?
It all depends a bit on how related to your site your site description is.
If it's any important I'd wrap my site title between <h1> tags and my site description between <h2> tags.
If less important I'd wrap my site description between <p> tags.
I'd avoid using display:none to hide stuff, as Google or any other search engine is often confused when doing so.
There's a pretty good alternative though (also used within the WordPress TwentyEleven theme). A good tutorial about this is listed here: http://themeshaper.com/2011/02/17/css-tip-hiding-content-with-clip/
You should have an h1 on your page. It gives the page semantic meaning.
You should not, I think, hide the h1 if you are using an img as a title. This has implications for
search engines (who might think you are hiding content)
users with accessibility issues (screen readers)
yourself, for DOM manipulation if you forget it's there.
As far as SEO is considered, it is better to have your site a heading tags. Heading tags are good for SEO purposes.
Per google, It's not the best practice to hide content of the page. The text that describes your image is an alt tag, and this should be used for that purpose, not hidden h1 tag. Here : http://www.youtube.com/watch?v=GIn5qJKU8VM
http://www.youtube.com/watch?v=fBLvn_WkDJ4
h1 is the heading of your page, like the title of the chapter in a book. Every page on your site might have a h1 to help the reader understand the contents or purpose of that page. If you hide the h1 and replace it with a logo, search engines will still find it.
When I use images to replace H1/H2's (usually it's H2's for descriptions, and only on the home page) I always use text-indent to hide the text.
You want that text there so it can be indexed by search engines, but you want the image so it will look nice. Why settle for one or the other? :)
I also usually put the text inside of a span, then give said span the text-indent property.
I recommend against hiding, that's a tricky technique that can burn you. You very much want the text to be on the page. Thus the simple approach has some merit:
<img id="mybloglogo" src="myblog.jpg" alt="[My blog about great stuff]">
However, there is no perfect answer. See Replacing H1 text with a logo image: best method for SEO and accessibility? and google for this topic to understand the passion behind various views of this issue.
If you don't want to spend hours researching, you have a simpler option. View your page. Now disable CSS and look again. Now disable images and look again. If the page reads and works fine at each stage, you've got it covered for readers both human and robotic.
To turn off CSS in Firefix "View->Page Style->No Style".
The header tag, or the tag in HTML, will usually be the title of a post, or other emphasized text on the page. It will usually be the largest text that stands out.
On the home page, it's best to use the H1 heading to include the main keyphrase that you want to rank for in search engines like Google.
You should edit the Thematic theme to use your desired H1.