This question is in regards to the article section and aside tags as it relates to best SEO practices. I've seen some tutorials teach that you should place an article tag and inside the article tag various section tags. However some books I've read have it the other way around and place sections and nested in them are article tags. Which of the two methods is the best, for the best SEO results and why? Obviously our job is to not only give the consumer the best looking site, but also a site that is SEO friendly.
<article>
<section>
<aside>...</aside>
</section>
<section>...</section>
<section>...</section>
</article>
<section>
<article>...</article>
<article>...</article>
<article>
<aside>...</aside>
</article>
</section>
This has nothing to do with SEO, the two structures have a different meaning:
A list of blog posts could be a section with an article for each blog post.
A long blog post could be an article with a section for each section/chapter.
See also my answer with markup examples.
In general, search engines are capable of recognizing articles and sections even when such tags are not used. These only help establishing the relevancy and the context of your content.
From an SEO perspective, it does not matter whether you embed one with another or vice-versa. Search engines don't really care. You are not gonna get a ranking boost for using one or the other.
Related
BACKGROUND
I have been using microformats for the past 5 years. I'm switching to the schema.org approach for all new sites because it's — IMHO — a better separation of style and meta info.
In addition all the major search providers have adopted and now fully support the schema.org approach to microdata.
It's been a pretty painless process finding schema.org equivalents most microdata objects i.e. hCard, hCalendar etc. and am I pleased with the extra possibilities.
QUESTION
I am looking to find clear examples of the markup in the hAtom/hNews (hFeed)
flavour can anyone point me in the right direction/give some tips as
I have searched but been unsuccessful up to now. On schema.org I
don't see a clear equivalent.
We have this handy markup generator http://schema-creator.org/
for; Person, Product, Event, Organization, Movie, Book and Review,
but has anyone seen a tool for the creation of the markup of
schema.org variant of hFeeds.
question 01: Creativeworks -> Blog is schema's equivalent to hatom.
no clue if anyone's used it or written about it yet.
i'd like to know what about schema.org is better at separation of concerns vs. microformats? schema.org has meta elements within the body element. microformats are html classes and and as such natively support separation. also, every major search provider already provided coverage of microformats and it hasn't decreased. curious, i am.
You have to choose a page type, like for example http://schema.org/Blog and then add the article/blogposts http://schema.org/BlogPosting
Here is a very simple example:
<div itemscope itemtype="http://schema.org/Blog">
...
<article itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
...
</article>
<article itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
...
</article>
</div>
I have tried to implement it in a WordPress theme, perhaps my code will help you: https://github.com/pfefferle/SemPress/
I had a little disagreement with a friend yesterday and rather than continuing a never-ending discussion I thought I'll just ask here.
I recently coded a site using HTML5 semantics. The page has relatively little content and I wrapped it in an article tag.
You can check out the page and it's source here: http://inneresauge.co/
And here is the lowdown for those that don't like clicking links...
<div id="container">
<header>
<h1 id="logo">Inneres Auge Co.</h1>
<nav id="main-nav">
...
</nav>
...
</header>
<article id="main">
<p>We're <strong>Inneres Auge Company</strong>, a creative media company that knows no limits.</p>
<p>We do everything and more, from mobile games and apps to web sites and platforms to video and audio production.</p>
<p>The best thing about it?<br />
We're amazing at all of them!</p>
<p>Don't believe us?<br />
Just see for yourself...</p>
</article>
</div>
I figured section wouldn't be appropriate, because it really isn't an individual section of the page that could stand on its own, the text alone can however stand on its own without feeling out of place, that's why I figured article is the best choice.
What's the best choice here? article, section or maybe just a plain div because neither is a good match?
Please feel also free to mention if there is any other unsemantic/unproper usage of html elements.
Doesn’t look like an article to me. As per the spec:
The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
http://dev.w3.org/html5/spec-author-view/the-article-element.html#the-article-element
I don’t think the text is really a self-contained composition that’s reusable. It’s marketing blurb, an introduction to the company.
Whereas <section>, I think, would be fine:
The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.
Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction [emphasis mine], news items, and contact information.
http://dev.w3.org/html5/spec-author-view/the-section-element.html#the-section-element
I don’t think it matters that you’d only have one section — the spec doesn’t say you need multiple <section>s. (And the company may well add additional sections to the page later on.)
It’s all a matter of interpretation, of course. And it doesn’t have a lot of practical consequences.
W3C Specification
The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
Examples here
The article element is a specialised kind of section; it has a more specific semantic meaning than section in that it is an independent, self-contained block of related content. We could use section, but using article gives more semantic meaning to the content.
To me it looks like div would be best fit here. An article generally actually has a heading, which yours doesn't. section would be appropriate if the site was actually split into more than one section, but as you said, yours isn't but I think it could still be used.
I wrote a bit about it: HTML5: Section or Article? which might help.
Whenever you ask yourself "Is this semantically correct?" you should consult "the oracles". They are
WHATWG <article>
W3 <article>
The important thing that W3 and WHATWG state is
independently distributable or reusable
So in your case <article> is not semantic.
The [WHATWG <section>] states
A section, in this context, is a thematic grouping of content, typically with a heading
Does the group of content have a header? I say yes. It is
We're Inneres Auge Company
If you don't think that content has a header then use <div> if you do think it has a header then wrap it in <header>
As a further aside you have <div><header></header><article></article></div> I think that outer div should be a <section>
Reading an article on the <article> tag on HTML5, I really think my biggest confusion is in the first question of this section:
Using <article> gives more semantic meaning to the content. By contrast <section> is only a block of related content, and <div> is only a block of content... To decide which of these three elements is appropriate, choose the first suitable option:
Would the content would make sense on its own in a feed reader? If so, use <article>.
Is the content related? If so, use <section>.
Finally, if there’s no semantic relationship, use <div>.
So I guess my question is really: What types of content belong in a feed reader?
The spec answers this quite clearly:
The article element represents a self-contained composition in a
document, page, application, or site and that is, in principle,
independently distributable or reusable, e.g. in syndication. This
could be a forum post, a magazine or newspaper article, a blog entry,
a user-submitted comment, an interactive widget or gadget, or any
other independent item of content.
see: http://dev.w3.org/html5/spec/Overview.html#the-article-element
The W3C spec leaves a lot open to interpretation and it ultimately comes down to the author's opinion. Here is a short and simple answer in the form of a question:
What are the primary significant pieces of content you want to share on the page?
Here are a few examples:
On this very page, each answer could be an article.
On flickr each photo displayed in the photostream could be considered an article.
On dribbble each shot displayed on the page could be an article.
On google each search result listed could be an article.
On a blog each article.. well each article could be an article.
On a blog page with an article and a series of comments you could have two major sections. One with an article and another for comments in which each comment could be considered an article.
It's the author's discretion as to how far they want to go. Most blog authors have an RSS feed for their articles, but others may also provide feeds for comments, and shared links.
A lot of people have written on this subject. For further information I highly recommend reading:
http://html5doctor.com/the-article-element/ (you've already shared this)
http://www.impressivewebs.com/html5-section/
http://www.iandevlin.com/blog/2011/04/html5/html5-section-or-article
You've brought up a good argument and yes the spec does rather clearly define <article> as a syndication-worthy collection of content. The way I see it, your article would be the composed blog post – what you as the content writer of the site produce. While comments on that section are related to the article, they are not, in fact, part of the article, and should be relegated to another block in the <section>, either a non-semantic <div> or simply <p>s with display:block set. This is a decision that's left to the designer, depending on how they semantically evaluate the worth of the commentary.
Remember too that you have the <aside> tag, which is almost tailor-made for commentary, whether from the author or from the reader.
Most feed readers can handle many types of content, it could include copy, images, videos, etc. The feed for your will include the content on your site that is repeated or includes multiple versions. A question and answer site will have a feed of new questions. A video sharing site will have a feed of new videos. A software review site will have a feed of new software or new reviews.
I'd recommend considering what the typical consumer of your content would want to find easily in their feed reader. You get to define what types of content belong in a feed reader.
A feed reader, in general, should contain a list of stories. Look at http://google.com/elections/ - it's a good example of the sort of thing a feed reader might contain. The important part is that all the stories are self-contained, and in theory do not need to be related at all.
The markup for that document could look like the following:
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
You may find more information in this article on A List Apart.
The new HTML5 article tag all seems very great and wonderful and there has been much discussion here and elsewhere about its uses.
Unfortunately, all this discussion seems to be in the context of blog or news sites where the content is all just that, content.
In an ecommerce site, the biggest question to be asking is, how do I now mark up a product?
Taking the spec for guidance, it seems that a saleable item is indeed something distinct that could be syndicated (and often is). The article tag seems like a good match, yet I see no mention of its use in this way.
Is it appropriate here but all the examples blogs etc. because they seem to fit a bit more intuitively with the name of the tag? Or am I stretching too hard at the spec?
Any guidance would be much appreciated.
I don't think <article> is suitable for product data. Although not using semantic elements, you may wish to look at the Product schema from schema.org.
EDIT :
See the following quote from the W3C spec. Perhaps article is suited after all, as a product can be considered an "independent item of content."
The article element represents a component of a page that consists of
a self-contained composition in a document, page, application, or site
and that is intended to be independently distributable or reusable,
e.g. in syndication. This could be a forum post, a magazine or
newspaper article, a blog entry, a user-submitted comment, an
interactive widget or gadget, or any other independent item of
content.
You should take a look at this article
Looks like <article> is not that bad an idea. I am using pointers from here and http://schema.org/Product for an e-commerce site project.
Having custom tags bothers IE a lot and we can not ignore the internet explorer yet.
In the past I have often put the site title in an <h1> tag, and then the main page title in an <h2>. Is this considered correct, or should the main page title be in the <h1> tag? If so, where do you put the site title? In a regular <div>? Or?
What is the most semantically correct, and what is the best when considering things like accessibility?
There's no real standard and there are quite a few differing opinions. I agree with womp though: you shouldn't have the same H1 on every page of the site. I'd leave the site title to the <title> tag.
Semantically (and to aid accessibility), the generally accepted rule is one <H1> per page or topic. It's valid to have more than one top-level heading on a page, as long as those headings break the document into separate logical chunks discussing different things. So to take the example of a blog home page showing the five most recent articles, it would be fine for each to have its own <H1>.
However, when it comes to SEO, the recommendations are usually that you only have one H1 per page.
I've gone for a hybrid approach on my design blog: on the home page, there is an H1 describing the site, and each post title is an <H2>. However, on the individual post pages, the post title is the <H1>. This seems (so far) to strike a good balance between semantics and optimising for search engines.
It's better if H1 tags are contextually related to the majority of the content on the page - so it should really be the page title.
If every page has the same H1 tag (i.e. the site title), it degrades the value of them (and overall, they are really the most valuable tag).
If you're putting the site title in the header as something that's not an image with alt text, I would usually just style up a div or a span.
On page 20 of Google's Search Engine Optimization Starter Guide :
Use heading tags appropriately
On a page containing a news story, we might put the name of our site into an <h1> tag and the topic of the story into an <h2> tag.