web-dev-qa-db-fra.com

Bonne idée si je n'ai que <header> et <footer> dans <article>?

En raison de la nature de mon blog, je n'ai besoin d'afficher aucun contenu, il me suffit d'afficher un titre à l'intérieur d'un <header> et des méta-informations à l'intérieur de <footer> deux à l'intérieur de article. Au-dessus d’eux, il y a une image et des éléments de partage social.

Est-ce que cela va confondre les robots d'exploration de Google? Ou est-ce bien?

seogooglehtml5
2
Ilya Knaup

À ce que nous sachions, l'utilisation de balises HTML5 telles que l'en-tête et le pied de page ne présente aucun avantage. L'utilisation de tels marquages ​​ne permet qu'un meilleur marquage sémantique.

Google, Bing et Yahoo n'ont aucun problème à lire l'en-tête et les pieds de page dans les balises d'articles, mais vous ne devriez utiliser l'en-tête et le pied de page que si cela a également un sens et facilite le marquage. Envisagez Header, Footer exactement comme les éléments DIV pour le regroupement de plusieurs éléments. Si vous ne possédez pas plusieurs éléments, il n’est pas nécessaire de les regrouper. Les gens débattent de cela et de vos débats sur les trouvailles, mais le résultat final est que je considère que la moindre quantité de code est meilleure. Mais en termes de valeur de référencement du balisage, il n'y a aucune différence entre utiliser ou ne pas utiliser <footer> ou <header>.

HTML5 pas si utile

<article>
    <header>
        <h1>Title of Article</h1>
    </header>
    <div>
        <p>I am the content of the article</p>
    </div>
    <footer>
        <p>Author: Author Name Here</p>
    </footer>
</article>

HTML5 utile

<article>
    <header>
        <h1>Title of Article</h1>
        <dl>
            <dt>Publish Date:</dt>
            <dd>2013-01-25</dd>
            <dt>Authors:</dt>
            <dd><a href="#">Author Name</a></dd>
        </dl>
    </header>
    <div>
        <p>I am the content of the article</p>
    </div>
    <footer>
        <dl>
            <dt>Tags:</dt> 
            <dd><a href="#">Tag Word 1</a></dd>
            <dd><a href="#">Tag Word 2</a></dd>
        </dl>
        <div>About the Author</div>
        <nav>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
            </ul>
        </nav> 
    </footer>
</article>

Donc, fondamentalement, plus vous devez coller de pied de page et d'en-tête de code, plus il devient utile, plus le style et le balisage deviennent faciles. Je considère que HTML5 est beaucoup mieux pour baliser à l'aide d'un schéma. Examinez l'exemple ci-dessus, puis l'exemple ci-dessous, mais cette fois-ci en utilisant un schéma et des extraits enrichis.

HTML5 avec schéma

<article itemscope itemtype="http://schema.org/Article">
    <header>
        <h1>Title of Article</h1>
        <dl>
            <dt>Publish Date:</dt>
            <dd><time itemprop="datePublished">2013-01-25</time></dd>
            <dt>Authors:</dt>
            <dd><a rel="author" href="#">Author Name</a></dd>
        </dl>
    </header>
    <div>
        <p>I am the content of the article</p>
    </div>
    <footer>
        <dl>
            <dt>Tags:</dt> 
            <dd itemprop="keywords"><a href="#">Tag Word 1</a></dd>
            <dd itemprop="keywords"><a href="#">Tag Word 2</a></dd>
        </dl>
        <div>About the Author</div>
        <nav>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
            </ul>
        </nav> 
    </footer>
</article>
1
Simon Hayter

N'utilisez pas plus de code que nécessaire pour effectuer le travail, en vous assurant de respecter les spécifications de la langue que vous utilisez.

Bien qu'il soit absolument faux de dire que "le balisage n'affecte pas le référencement", les moteurs de recherche pardonnent néanmoins tout code HTML médiocre dans la mesure où ils le traiteront généralement. Mais si des pages mal codées peuvent fonctionner , elles ne fonctionneront presque certainement pas à leur plein potentiel.

Donc, ne vous sentez pas obligé d'utiliser du code que vous n'avez pas besoin d'utiliser - en fait, plus c'est simple et élégant, c'est à mon avis meilleur - mais prenez la peine de vous référer aux conseils d'utilisation de HTML5, à la fois de la spécification elle-même et de blogs faisant autorité sur le sujet, comme HTML5 Doctor .

0
GDav