Como marcar dados usando microformatos
Microformatos são convenções simples (conhecidas como entidades) utilizadas em páginas da Web para descrever um tipo específico de informação, por exemplo, uma avaliação, um evento, um produto, uma empresa ou uma pessoa. Cada entidade tem suas próprias propriedades. Por exemplo, uma pessoa tem as propriedades nome, endereço, cargo, empresa e endereço de e-mail.
Em geral, os microformatos usam o atributo class em tags HTML (muitas vezes ) para atribuir nomes curtos e descritivos a entidades e suas propriedades. Veja um exemplo de um bloco pequeno de HTML mostrando as informações básicas de contato de Bob Smith.
<div>
<img src="www.example.com/bobsmith.jpg" />
<strong>Bob Smith</strong>
Editor sênior da ACME Reviews
200 Main St
Desertville, Arizona 12345
</div>
Este é o mesmo HTML marcado com o microformato hCard (pessoa).
<div class="vcard">
<img class="photo" src="www.example.com/bobsmith.jpg" />
<strong class="fn">Bob Smith</strong>
<span class="title">Editor sênior</span> na <span class="org">ACME Reviews</span>
<span class="adr">
<span class="street-address">200 Main St</span>
<span class="locality">Desertville</span>, <span class="region">Arizona</span>
<span class="postal-code">12345</span>
</span>
</div>
Veja como este exemplo funciona.
- Na primeira linha,
class="vcard" indica que o HTML incluído no descreve uma pessoa. (O microformato usado para descrever pessoas é chamado hCard e conhecido em HTML como
vcard. Não é um erro de digitação.)
- O exemplo descreve propriedades do item pessoa, como uma foto, nome, cargo, organização e endereço. Para nomear as propriedades sobre a pessoa descrita pelo vcard, cada elemento que contém uma dessas propriedades (como
![]()
</code>) recebe um atributo <code>class</code> indicando uma propriedade. Por exemplo, <code>fn</code> descreve o nome de uma pessoa; <code>title</code> descreve o cargo. (O artigo da Ajuda para cada tipo de informação inclui uma lista completa de propriedades reconhecidas.)</li>
<li>As propriedades podem conter outras propriedades. No exemplo acima, a propriedade <code>adr</code> descreve o endereço da pessoa e inclui o as subpropriedades <code>street-address</code>, <code>locality</code>, <code>region</code> e <code>postal-code</code>).
</li></ul>
<h4>Microformatos aninhados</h4>
<p>É comum um microformato (por exemplo, uma resenha) conter outro (por exemplo, informações de contato do resenhista). O exemplo de resenha abaixo inclui informações sobre o cargo e o empregador de Bob Smith.</p>
<div class="action">
<pre>
<div>
<strong>Resenha de Blast 'Em Up</strong>
Por Bob Smith, editor sênior da ACME Reviews
Avaliação: 4,5 de 5
É um ótimo jogo. Gostei desde a
batalha inicial até o confronto final com os alienígenas malvados.
</div>
</pre>
</div>
<p>Veja o mesmo HTML marcado com os microformatos hReview (resenha) e hCard (pessoa). Para representar as informações sobre Bob, o revisor, o microformato <strong>hCard</strong> (pessoa) é aninhado dentro do microformato <strong>hReview</strong> (revisão).</p>
<div class="action">
<pre>
<div class="hreview">
<span class="item">
<strong class="item"><span class="fn">Blast 'Em Up</span> Resenha</strong>
</span>
<span class="reviewer vcard">
Por <span class="fn">Bob Smith</span>, <span class="title">Editor sênior</span>
na <span class="org">ACME Reviews</span>
</span>
Avaliação: <span class="rating">4,5</span> de 5.
<span class="description">É um ótimo jogo. Gostei desde a
batalha inicial até o confronto final com os alienígenas malvados.</span>
</div>
</pre>
</div>
<p>Veja como este exemplo funciona.</p>
<ul>
<li>As avaliações são descritas pelo microformato <a href="http://microformats.org/wiki/hreview">hReview</a>, escrito como <code>class="hreview"</code>. Como esta é uma avaliação, todo o bloco HTML está incluído em um <code>div</code> com o atributo <code>class="hreview"</code>. </li>
<li>Para identificar o revisor, você pode usar <code>span class="reviewer"</code>. No entanto, nesse caso, queremos fornecer informações adicionais sobre o revisor usando o microformato <code>vcard</code> (pessoa). Você pode fazer isso colocando <code>reviewer</code> e <code>vcard</code> na mesma linha, separados por um espaço, assim: <code><span class="reviewer vcard"></code>. As propriedades do <code>vcard</code> <code>fn</code>, <code>title</code> e <code>org</code> descrevem o nome de Bob, seu cargo, e a empresa na qual ele trabalha.
</li></ul>
<p>Para obter mais exemplos, consulte <a href="answer.py?=146862">entidades aninhadas</a>.</p>
<h4>Conteúdo não visível</h4>
<p>Em geral, o Google não exibirá conteúdo que não seja visível para o usuário. Em outras palavras, não mostre conteúdo aos usuários por um lado, e use texto oculto para marcar informações separadamente para mecanismos de pesquisa e aplicativos da Web. Você deve marcar o conteúdo que realmente apareça para os seus usuários quando eles visitam as suas páginas Web.</p>
<p>No entanto, em algumas situações, pode ser útil fornecer aos mecanismos de pesquisa informações mais detalhadas, mesmo se você não quiser que essas informações sejam vistas pelos visitantes de sua página. Por exemplo, fornecer a latitude e a longitude de um local pode ajudar o Google a garantir que ele esteja mapeado corretamente. Fornecer a data de um evento em <a href="http://www.w3.org/QA/Tips/iso-date" target="_new">formato de data ISO</a> pode ajudar a garantir que ela apareça corretamente nos resultados de busca. Nesse caso, você pode usar os microformatos <a href="http://microformats.org/2009/05/12/value-class-pattern">padrão de classe de valor</a>. Considere este exemplo:</p>
<div class="action">
<pre>
<span class="dtstart">
<span class="value-title" title="2009-10-15T19:00-08:00" />
15 de outubro, 19h
</span>
</pre>
</div>
<p>Ao incluir <code><span class="value-title" title="2009-10-15T19:00-08:00" /></code> dentro do bloco rotulado com {2}class="dtstart"{3}, você indica que o analisador de rich snippets deve usar o valor no atributo {4}title{5} para encontrar a data inicial do evento. A data no atributo <code>título</code> pode ser representada usando o formato de data ISO sem afetar a forma como a data é mostrada aos usuários. </p>
<p>Para obter ajuda sobre vocabulário específico e exemplos, consulte:</p>
<ul>
<li><a href="answer.py?answer=146645">Resenhas</a></li>
<li><a href="answer.py?answer=146646">Pessoas</a></li>
<li><span class="notranslate"><a<span class="goog-gtc-inchars-highlight goog-gtc-inchars-space goog-gtc-highlight"> </span>href="</span>answer.py?answer=146750<span class="notranslate">"></span>Produtos</a></li>
<li><a href="answer.py?answer=146861">Negócios e organizações</a></li>
<li><a href="answer.py?answer=173379">Receitas</a></li>
<li><a href="answer.py?answer=164506">Eventos</a></li>
<li><a href="answer.py?answer=1719810">Vídeo</a>
Embora o Google suporte a marcação de vídeo, atualmente ela é usada apenas para melhorar nossos resultados de pesquisa de vídeo.</li>
</ul>
<p>Para verificar sua marcação, use a <a href="http://www.google.com/webmasters/tools/richsnippets" target="new">ferramenta de teste de dados estruturados.</a></p>
<script type="text/javascript">
if(document.getElementById('kb_other') != null)
showLayer('kb_other');
if(document.getElementById('kb_other_') != null)
showLayer('kb_other_');
if(document.getElementById('z_other') != null)
toggleZippy('z_other');
if(document.getElementById('z_other_') != null)
toggleZippy('z_other_');
if(document.getElementById('kb_'))
showLayer('kb_');
if(document.getElementById('z_'))
toggleZippy('z_');
if(document.getElementById('kb_other'))
showLayer('kb_other');
if(document.getElementById('z_other'))
toggleZippy('z_other');
if(document.getElementById('kb_US'))
showLayer('kb_US');
if(document.getElementById('z_US'))
toggleZippy('z_US');
</script>
</div>
<p class="last-updated">
atualizado
10/17/2012
</p>
<div class="clear"></div>
<a href="#" name="helpful" ></a>
<div class="answer-features nocontent">
<div id="rating-parent" class="rating-parent unsent slider-parent">
<span>Este artigo foi útil para você:</span>
<ul class="rating-scale slider">
<li data-rating="5">
<div data-rating="5">Extremamente útil</div>
</li>
<li data-rating="4">
<div data-rating="4">Muito útil</div>
</li>
<li data-rating="3">
<div data-rating="3">Razoavelmente útil</div>
</li>
<li data-rating="2">
<div data-rating="2">Não foi muito útil</div>
</li>
<li data-rating="1">
<div data-rating="1">Nem um pouco útil</div>
</li>
</ul>
<form class="rating-details">
<div class="feedback-close"></div>
<strong>Informe por que você não achou essa resposta útil:</strong>
<div class="feedback-checkbox-container">
<label class="feedback-checkbox">
<input type="checkbox"
name="extra.survey.article_feedback_reason_1" value="Não tem relação com meu problema" />
Não tem relação com meu problema
</label>
<label class="feedback-checkbox">
<input type="checkbox"
name="extra.survey.article_feedback_reason_2" value="Informações confusas" />
Informações confusas
</label>
<label class="feedback-checkbox">
<input type="checkbox"
name="extra.survey.article_feedback_reason_3" value="Informações incompletas" />
Informações incompletas
</label>
<label class="feedback-checkbox">
<input type="checkbox"
name="extra.survey.article_feedback_reason_4" value="Informações incorretas" />
Informações incorretas
</label>
<label class="feedback-checkbox">
<input type="checkbox"
name="extra.survey.article_feedback_reason_5" value="Informações em excesso" />
Informações em excesso
</label>
<label class="feedback-checkbox">
<input type="checkbox"
name="extra.survey.article_feedback_reason_6" value="Muito complicado" />
Muito complicado
</label>
</div>
<button type="submit" class="submit-detailed">
enviar
</button>
</form>
<span class="feedback-message">
Comentário registrado. Obrigado.
</span>
</div>
<script>
new googlehelp.Feedback(
'rating-parent',
'3',
{
'extra.IssueType':
'article_feedback_survey',
'extra.survey.survey_referrer':
'',
'extra.Language':
'' == 'true' ?
'' :
'pt-BR',
'extra.survey.helpcenter_id':
'229',
'extra.survey.sid':
'42a2041d0f4918ef',
'extra.survey.survey_id':
'article_feedback_survey_229',
'extra.survey.article_feedback_cid':
'',
'extra.survey.article_feedback_experiment':
'',
'extra.survey.article_feedback_helpcenter_name':
'webmasters',
'extra.survey.request_time':
'1368989925',
'extra.survey.article_feedback_page_type':
'answer',
'extra.survey.article_feedback_query_answer':
'146897',
'extra.survey.article_feedback_query_ctx':
'cb',
'extra.survey.article_feedback_query_source':
'',
'extra.survey.article_feedback_query_topic':
'',
'extra.survey.article_feedback_query_utm_campaign':
'',
'extra.survey.article_feedback_query_utm_medium':
'',
'extra.survey.article_feedback_query_utm_source':
'',
'extra.survey.article_feedback_url':
'/webmasters/bin/answer.py?hl\75pt-BR\46answer\075146897\46ctx\75cb\46src\75cb\46cbid\75-60ujdg0mqyms\46cbrank\0750',
'extra.survey.article_feedback_internal':
''
});
</script>
<div class="button plus-one">
<div id="plusone"></div>
<script type="text/javascript">
gapi.load('plusone', function () {
gapi.plusone.render('plusone', {
annotation: 'inline',
href: 'http:\x2F\x2Fsupport.google.com\x2Fwebmasters\x2Fbin\x2Fanswer.py?hl=pt-BR\x26answer=146897\x26ctx=plusone',
size: 'small'});
});
</script>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</td>
<td class="right-column">
<div class="module">
<a class="zippy zippy-track zippy-expand"onclick="setCookies_default('rightnav', '1', '', -1);"><h2>Itens relacionados</h2></a>
<ul class="no_bullets right-nav-cb">
<li>
<a href="/webmasters/bin/answer.py?hl=pt-BR&answer=34592&ctx=cb&src=cb&cbid=-1cdqyal3rb80e&cbrank=0"
onclick="track('Recommended Articles Module', 'cb 34592');">
Como adicionar um site
</a>
<br />
<span class="right-nav-cb-bc">
<a href="/webmasters/bin/topic.py?hl=pt-BR&topic=1724121&parent=TopLevel&ctx=topic" onclick="track('Breadcrumbs', '1724121');">Primeiros Passos</a>
</span>
</li>
<li>
<a href="/webmasters/bin/answer.py?hl=pt-BR&answer=156184&ctx=cb&src=cb&cbid=jqf4lpk8b8ud&cbrank=1"
onclick="track('Recommended Articles Module', 'cb 156184');">
Sobre os Sitemaps
</a>
<br />
<span class="right-nav-cb-bc">
<a href="http://support.google.com/webmasters/?hl=pt-BR#topic=8476" onclick="track('Breadcrumbs', '8476');">Sitemaps</a>
</span>
</li>
<li>
<a href="/webmasters/bin/answer.py?hl=pt-BR&answer=172705&ctx=cb&src=cb&cbid=-1c0m4mz591ed1&cbrank=2"
onclick="track('Recommended Articles Module', 'cb 172705');">
Rich snippets: avaliações em resenhas
</a>
<br />
<span class="right-nav-cb-bc">
<a href="http://support.google.com/webmasters/?hl=pt-BR#topic=21997" onclick="track('Breadcrumbs', '21997');">Rich snippets (microdados, microformatos e RDFa)</a><span class="br-seperator"> › </span><a href="/webmasters/bin/topic.py?hl=pt-BR&topic=1088474&parent=21997&ctx=topic" onclick="track('Breadcrumbs', '1088474');">Tipos de rich snippets</a>
</span>
</li>
<li>
<a href="/webmasters/bin/answer.py?hl=pt-BR&answer=34397&ctx=cb&src=cb&cbid=-uq5pbnlb7ma&cbrank=3"
onclick="track('Recommended Articles Module', 'cb 34397');">
Como adicionar um site ao Google
</a>
<br />
<span class="right-nav-cb-bc">
<a href="http://support.google.com/webmasters/?hl=pt-BR#topic=2370570" onclick="track('Breadcrumbs', '2370570');">Sobre o Google Pesquisar</a>
</span>
</li>
<li>
<a href="/webmasters/bin/answer.py?hl=pt-BR&answer=173379&ctx=cb&src=cb&cbid=-1gl0wyf5j7vmf&cbrank=4"
onclick="track('Recommended Articles Module', 'cb 173379');">
Rich snippets: receitas
</a>
<br />
<span class="right-nav-cb-bc">
<a href="http://support.google.com/webmasters/?hl=pt-BR#topic=21997" onclick="track('Breadcrumbs', '21997');">Rich snippets (microdados, microformatos e RDFa)</a><span class="br-seperator"> › </span><a href="/webmasters/bin/topic.py?hl=pt-BR&topic=1088474&parent=21997&ctx=topic" onclick="track('Breadcrumbs', '1088474');">Tipos de rich snippets</a>
</span>
</li>
</ul>
</div>
</td>
</tr></table>
</div>
<div class="nocontent footer-nav-streamlined" role="contentinfo">
<div class="first-row">
<ul>
<li>
<a href="http://www.google.com/webmasters/tools/"
onclick="track('Footer', 'Product home')">
Ferramentas do Google para webmasters
</a>
</li>
<li>
<a href="http://www.google.com/support/?hl=pt-BR"
onclick="track('Footer', 'Help with other products')">
Ajuda para outros produtos do Google
</a>
</li>
<li>
<form method="post" id="changelang" name="changelang"
action="javascript:
setCookies_default('WebmasterLocale',
this.document.changelang.lang.value, 'dropdown');
track('LanguageDropdown', this.document.changelang.lang.value);"
class="lang_dropdown">
<label for="lang">Alterar idioma:</label>
<select name="lang" id="lang" class="lang-dropdown"
onchange="document.getElementById('changelang').submit();">
<option value="ar" >العربية</option>
<option value="bg" >Български</option>
<option value="id" >Bahasa Indonesia</option>
<option value="ca" >Català</option>
<option value="cs" >Česky</option>
<option value="sr" >Српски</option>
<option value="da" >Dansk</option>
<option value="de" >Deutsch</option>
<option value="en" >English</option>
<option value="es" >Español</option>
<option value="es-419" >Español (Latinoamérica)</option>
<option value="et" >Eesti keel</option>
<option value="fa" >فارسی</option>
<option value="fil" >Filipino</option>
<option value="fr" >Français</option>
<option value="it" >Italiano</option>
<option value="lv" >Latviešu</option>
<option value="lt" >Lietuvių</option>
<option value="hu" >Magyar</option>
<option value="ms" >Melayu</option>
<option value="nl" >Nederlands</option>
<option value="no" >Norsk</option>
<option value="pl" >Polski</option>
<option value="pt" >Português (Portugal)</option>
<option value="br" selected="selected" class="selected">Português (Brasil)</option>
<option value="hr" >Hrvatski</option>
<option value="ro" >Română</option>
<option value="sk" >Slovenský</option>
<option value="sl" >Slovenščina</option>
<option value="fi" >Suomi</option>
<option value="sv" >Svenska</option>
<option value="ru" >Русский</option>
<option value="th" >ภาษาไทย</option>
<option value="tl" >Tagalog</option>
<option value="tr" >Türkçe</option>
<option value="el" >Ελληνικά</option>
<option value="iw" >עברית</option>
<option value="hi" >हिन्दी</option>
<option value="vi" >Tiếng Việt</option>
<option value="cn" >中文（简体）</option>
<option value="b5" >中文（繁體）</option>
<option value="jp" >日本語</option>
<option value="kr" >한국어</option>
</select>
</form>
</li>
</ul>
</div>
<div class="second-row">
<ul>
<li class='footer-copyright' dir='ltr'>
©2013 Google
</li>
<li >
<a href="http://www.google.com/intl/pt-BR/"
onclick="track('Footer', 'GoogleHome');
">Página inicial do Google</a>
</li>
<li >
<a href="http://www.google.com/intl/pt-BR/privacy.html"
onclick="track('Footer', 'PrivacyPolicy');
">Política de Privacidade</a>
</li>
<li >
<a href="http://www.google.com/accounts/TOS?hl=pt-BR&loc=US"
onclick="track('Footer', 'Terms');
">Termos de Serviço</a>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
googlehelp.Links.initLinks(
['', 'NO-GMAIL', 'NO-PLUS', browser, browserGroup,
os, osGroup, country], internal);
if (googlehelp.initEls) {
googlehelp.initEls(['', 'NO-GMAIL', 'NO-PLUS', browser, browserGroup,
os, osGroup, country, countryGroup],
userSettings, userSettingsDropdownText);
}
if (convertLinksToButtons) {
convertLinksToButtons();
}
</script>
<script src='//www.google-analytics.com/ga.js'
type='text/javascript'></script>
<script type="text/javascript">
var analytics_async = 0;
</script>
<script
src="//support.google.com/webmasters/bin/resource/urchin_util.js?hl=pt-BR&v=8"
type="text/javascript"></script>
<script type="text/javascript">
var cookiePathArray = [];
</script>
<script type="text/javascript">
urchinTracker('\x2Fwebmasters\x2Fbin\x2Fanswer.py?hl=pt-BR\x26answer=146897\x26ctx=cb\x26src=cb\x26cbid=-60ujdg0mqyms\x26cbrank=0');
</script>
<script
src="//support.google.com/webmasters/bin/resource/js_validate_static.js?hl=pt-BR&v=18"
type="text/javascript"></script>
<script type="text/javascript">
new googlehelp.Lightbox(
'\x26laquo\x3B Previous',
'Next \x26raquo\x3B');
</script>
<div id="mt-exp-translate"></div>
<script src="//www.google.com/sidewiki/static/sidebar_element/sidebar-element-compiled.js"></script>
<script defer="defer">
var sidebarElement = new google.elements.sidewiki.SidebarElement(
window.location.href,false);
sidebarElement.bindToElement("sidewiki-open-ui-button");
</script>
</body>
</html>
