{"id":3848,"date":"2014-12-01T11:25:38","date_gmt":"2014-12-01T13:25:38","guid":{"rendered":"http:\/\/blog.turbosite.com.br\/?p=3848"},"modified":"2014-12-01T11:25:38","modified_gmt":"2014-12-01T13:25:38","slug":"dando-significado-ao-conteudo-na-internet-schema-org","status":"publish","type":"post","link":"https:\/\/www.turbosite.com.br\/blog\/dando-significado-ao-conteudo-na-internet-schema-org\/","title":{"rendered":"Dando significado ao conte\u00fado na internet &#8211; Schema.org"},"content":{"rendered":"<p>Encontramos este artigo e por ser muito valioso, resolvemos public\u00e1-lo aqui, foi escrito pela\u00a0<strong>Dani Guerrato\u00a0<\/strong>no Blog <a href=\"http:\/\/blog.popupdesign.com.br\/schema-org-dando-significado-ao-conteudo-na-internet\/\">PopUpDesign<\/a>.<\/p>\n<p>Sintaxe, sem\u00e2ntica e vocabul\u00e1rio. Parece at\u00e9 aula de portugu\u00eas, mas \u00e9 desenvolvimento web! Neste artigo vamos analisar como todos estes conceitos podem te ajudar a melhor o ranqueamento em mecanismos de busca, facilitar a vida do seu usu\u00e1rio e dar significado ao seu conte\u00fado na internet.<\/p>\n<p><strong><em>Squema<\/em> <\/strong>em grego quer dizer forma, plano ou modelo. J\u00e1 <a title=\"Schema.org\" href=\"http:\/\/schema.org\/\">schema.org<\/a> \u00e9 uma s\u00e9rie de tags xml utilizadas para fornecer informa\u00e7\u00f5es extras sobre o conte\u00fado da internet para mecanismos de busca. Ou seja, pequenos trechos de c\u00f3digo que ajudam muito na hora das pessoas encontrarem facilmente o SEU site em meio a tantos outros na web.<\/p>\n<p>A ideia de criar tags xml que apresentem informa\u00e7\u00e3o sobre o significado de um conte\u00fado n\u00e3o \u00e9 nova. Existem e j\u00e1 existiram no passado diversas outras iniciativas como microdados, microformatos e RDFa\u2026 Mas esta pluralidade de linguagens era justamente o que tornava dif\u00edcil a ado\u00e7\u00e3o por parte dos desenvolvedores. Afinal, com tantos padr\u00f5es diferentes que s\u00f3 funcionavam em um determinado contexto, como escolher o ideal? E este \u00e9 justamente o diferencial do schema.org. Ele surgiu de uma a\u00e7\u00e3o colaborativa entre os principais mecanismos de busca do mundo, o Google, Bing, Yahoo! e o buscador russo Yandex. A ado\u00e7\u00e3o de um modelo mais \u201cuniversal\u201d eliminou a ramifica\u00e7\u00e3o causada pelo uso de diferentes formatos facilitando a vida dos desenvolvedores (que n\u00e3o precisam mais se desdobrar entre tantas linguagens diferente) e acima de tudo, dos usu\u00e1rios.<\/p>\n<figure id=\"attachment_3852\" aria-describedby=\"caption-attachment-3852\" style=\"width: 640px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3852\" src=\"https:\/\/www.turbosite.com.br\/blog\/wp-content\/uploads\/2014\/12\/mecanismos-de-busca.jpg\" alt=\"Mecanismos de Busca\" width=\"640\" height=\"300\" \/><figcaption id=\"caption-attachment-3852\" class=\"wp-caption-text\">Mecanismos de Busca<\/figcaption><\/figure>\n<h2>Por que utilizar?<\/h2>\n<p>Se voc\u00ea souber o b\u00e1sico da l\u00edngua portuguesa, apenas ao bater o olho em um texto como este (XX) XXXX-XXXX \u00e9 obviamente um n\u00famero de telefone! Mas diante de palavras como <em>\u03c4\u03b7\u03bb\u03ad\u03c6\u03c9\u03bd\u03bf<\/em> ou <em>\u0570\u0565\u057c\u0561\u056d\u0578\u057d<\/em> a coisa fica mais complicada, certo? Estas duas palavras tamb\u00e9m significam telefone respectivamente em grego e arm\u00eanio, mas a n\u00e3o ser que voc\u00ea conhe\u00e7a estas l\u00ednguas fica dif\u00edcil de entender. \u00c9 isto que acontece com os rob\u00f4s de mecanismos de busca. Eles n\u00e3o falam bem portugu\u00eas, grego ou arm\u00eanio. Eles se esfor\u00e7am o tempo todo para \u201cadivinhar\u201d e classificar as informa\u00e7\u00f5es que postamos na internet, mas no final das contas acaba sendo tudo na base do chute. Um chute baseado em c\u00e1lculos matem\u00e1ticos complexos, mas ainda assim um chute. Para que todas as pessoas possam encontrar as informa\u00e7\u00f5es facilmente na internet n\u00f3s, desenvolvedores, precisamos dizer para os mecanismos de busca qual \u00e9 o significado de um conte\u00fado. E podemos fazer isso atrav\u00e9s das tags propostas pelo (acho que voc\u00ea j\u00e1 adivinhou) schema.org!<\/p>\n<p>Ao utilizar os padr\u00f5es determinados pelo schema os mecanismos de busca saber\u00e3o o n\u00famero de telefone da sua empresa independentemente do contexto. E poder\u00e3o mostrar esta informa\u00e7\u00e3o no corpo do resultados de busca, facilitando a tarefa do usu\u00e1rio que nem precisar\u00e1 ca\u00e7ar a informa\u00e7\u00e3o no site. E isto n\u00e3o funciona apenas para n\u00fameros de telefone. \u00c9 poss\u00edvel marcar uma infinidade de dados como nome, endere\u00e7o, email, etc.<\/p>\n<p>&nbsp;<\/p>\n<h2>Rich Snippets<\/h2>\n<p>Outra grande vantagem s\u00e3o os chamados Rich Snippets. Voc\u00ea provavelmente j\u00e1 viu isto por a\u00ed. S\u00e3o resultados de busca que cont\u00e9m informa\u00e7\u00f5es extras e muitas vezes ganham formatos, cores e s\u00edmbolos diferentes. Estas informa\u00e7\u00f5es diferentes vem justamente de tags xml como que vamos aprender neste post. E mesmo que o usu\u00e1rio n\u00e3o esteja buscando exatamente a informa\u00e7\u00e3o mostrada no rich snippet voc\u00ea ir\u00e1 ganhar mais cliques. Isto acontece devido a um conceito de teoria da percep\u00e7\u00e3o (gestalt) chamado segrega\u00e7\u00e3o que diz basicamente que tudo que \u00e9 diferente chama mais a aten\u00e7\u00e3o. Como \u00e9 mais comum as pessoas \u201cscanearem\u201d uma p\u00e1gina do que lerem atentamente todo o conte\u00fado, um resultado que se destaca mais ir\u00e1 consequentemente receber mais visitas. Atualmente o Google suporta rich snippets para pessoas, eventos, resenhas, produtos, receitas e navega\u00e7\u00e3o estrutural (breadcumbs).<\/p>\n<p>Realizei uma busca no Google sobre a serie Game of Thrones. Veja uma compara\u00e7\u00e3o entre um resultado normal e o resultado \u201ctunado\u201d com rich snippets.<\/p>\n<figure id=\"attachment_3850\" aria-describedby=\"caption-attachment-3850\" style=\"width: 640px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3850\" src=\"https:\/\/www.turbosite.com.br\/blog\/wp-content\/uploads\/2014\/12\/exemplo-google-rich-snippets.jpg\" alt=\"Exemplo Google Rich Snippets\" width=\"640\" height=\"400\" srcset=\"https:\/\/www.turbosite.com.br\/blog\/wp-content\/uploads\/2014\/12\/exemplo-google-rich-snippets.jpg 640w, https:\/\/www.turbosite.com.br\/blog\/wp-content\/uploads\/2014\/12\/exemplo-google-rich-snippets-300x188.jpg 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><figcaption id=\"caption-attachment-3850\" class=\"wp-caption-text\">Exemplo Google Rich Snippets<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<p>Se voc\u00ea ainda precisa ser convencido pense que alguns servi\u00e7os de busca avan\u00e7ada como o <a title=\"Google Shopping\" href=\"http:\/\/www.google.com\/shopping\">Google Shopping<\/a> e <a title=\"Google Recipes\" href=\"http:\/\/www.google.com\/landing\/recipes\/\">Google Recipes<\/a> dependem muito de uma marca\u00e7\u00e3o sem\u00e2ntica para funcionarem corretamente. E a grande tend\u00eancia \u00e9 esta lista crescer com o tempo.<\/p>\n<figure id=\"attachment_3854\" aria-describedby=\"caption-attachment-3854\" style=\"width: 640px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3854\" src=\"https:\/\/www.turbosite.com.br\/blog\/wp-content\/uploads\/2014\/12\/receita-rich-snippet.jpg\" alt=\"Exemplo Google Rich Snippet - Receita\" width=\"640\" height=\"300\" srcset=\"https:\/\/www.turbosite.com.br\/blog\/wp-content\/uploads\/2014\/12\/receita-rich-snippet.jpg 640w, https:\/\/www.turbosite.com.br\/blog\/wp-content\/uploads\/2014\/12\/receita-rich-snippet-300x141.jpg 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><figcaption id=\"caption-attachment-3854\" class=\"wp-caption-text\">Exemplo Google Rich Snippet &#8211; Receita<\/figcaption><\/figure>\n<h2><\/h2>\n<h2>Entendendo como funciona o schema<\/h2>\n<p>Se voc\u00ea j\u00e1 participou de uma mudan\u00e7a sabe por experi\u00eancia que se n\u00e3o etiquetar corretamente as caixas de roupas, livros, utens\u00edlios, etc pode acabar sem encontrar um par de meias limpo na sua nova casa. O melhor, portanto, \u00e9 deixar os objetos em caixas que possuem algum elemento em comum como pertencerem a um mesmo ambiente (quarto, cozinha, banheiro) ou possu\u00edrem a mesma fun\u00e7\u00e3o (sapatos, brinquedos, ferramentas). Cada caixa de mudan\u00e7a pode ent\u00e3o ser considerada um conjunto de elementos que possuem um objetivo em comum. O mesmo acontece com as palavras. Elas podem ser agrupadas por terem significados em comum, ou, se voc\u00ea quiser usar outro termo, fazem parte de um mesmo campo <strong>sem\u00e2ntico<\/strong>.<\/p>\n<p>A fun\u00e7\u00e3o do schema.org \u00e9 marcar o significado por tr\u00e1s das caixas de conte\u00fado na internet. Funciona basicamente como etiquetar o seu html com marca\u00e7\u00f5es que indicam qual \u00e9 o campo sem\u00e2ntico que aquele conte\u00fado faz parte. Para que isto funcionasse de maneira mais organizada foi criado uma hierarquia para o vocabul\u00e1rio.<\/p>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_3851\" aria-describedby=\"caption-attachment-3851\" style=\"width: 640px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3851\" src=\"https:\/\/www.turbosite.com.br\/blog\/wp-content\/uploads\/2014\/12\/hiearquia-schema-org.jpg\" alt=\"Hierarquia Schema.org\" width=\"640\" height=\"300\" srcset=\"https:\/\/www.turbosite.com.br\/blog\/wp-content\/uploads\/2014\/12\/hiearquia-schema-org.jpg 640w, https:\/\/www.turbosite.com.br\/blog\/wp-content\/uploads\/2014\/12\/hiearquia-schema-org-300x141.jpg 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><figcaption id=\"caption-attachment-3851\" class=\"wp-caption-text\">Hierarquia Schema.org<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<p>O primeiro grande conjunto \u00e9 \u201cThing\u201d ou coisa. Mas \u00e9 claro, \u201ccoisa\u201d \u00e9 muito gen\u00e9rico, certo? O ideal \u00e9 ser o mais especifico poss\u00edvel. O grupo \u201cThing\u201d, por sua vez, \u00e9 dividido em conjuntos filhos. S\u00e3o eles CreativeWork (trabalho criativo), Event (evento), Intangible (intangivel), MedicalEntity (entidade m\u00e9dica), Organization (organiza\u00e7\u00e3o), Person (pessoa), Place (lugar) e Product (produto). Por suas vez estes grupos (ou schemas) s\u00e3o divididos ainda em grupos menores. Cada uma destas entradas tem ainda propriedades especificas. Lembrando que cada um dos \u201cfilhos\u201d herdam as caracter\u00edsticas dos pais. E isto \u00e9 s\u00f3 a ponta do iceberg. Voc\u00ea pode e deve consultar a <a title=\"Hiearquia do Schema\" href=\"http:\/\/schema.org\/docs\/full.html\">hiearquia completa<\/a> no site oficial. Bem, vamos ver como isto fica na pr\u00e1tica!<\/p>\n<p>&nbsp;<\/p>\n<h2>Por dentro dos schemas<\/h2>\n<p>Aviso aos navegantes! A primeira coisa a se levar em conta \u00e9 que \u00e9 necess\u00e1rio utilizar HTML5. Este tipo de sintaxe n\u00e3o funciona com outros doctypes! Ent\u00e3o certifique-se que o seu documento est\u00e1 nesta linguagem, ok?<\/p>\n<p>Para utilizar o shema.org devemos conhecer tr\u00eas par\u00e2metros de micro dados que surgiram com o HTML5. Conhe\u00e7a seus novos melhores amigos:<\/p>\n<p>itemscope \u2013 Define o escopo dos meta dados. Ou seja, anuncia para o mundo que as informa\u00e7\u00f5es que voc\u00ea escrever a seguir fazem parte de um mesmo grupo de significado. Esta propriedade \u00e9 in\u00fatil se voc\u00ea n\u00e3o referenciar qual \u00e9 afinal este grupo! E para isto devemos utilizar o par\u00e2metro a seguir: o itemtype.<\/p>\n<p>itemtype \u2013 \u00c9 a etiqueta da caixa de mudan\u00e7a. Define qual \u00e9 o grupo do item que voc\u00ea est\u00e1 utilizando. No caso do schema.org, voc\u00ea sempre precisar\u00e1 definir uma url come\u00e7ando por \u201chttp:\/\/schema.org\/\u201d (por exemplo: <a title=\"schema.org\/Place\" href=\"http:\/\/schema.org\/Place\">http:\/\/schema.org\/Place<\/a>).<\/p>\n<p>itemprop \u2013 Define as propriedades do item. Cada propriedade tem um valor esperado que pode ser um texto, numeral, url, etc. Consulte a documenta\u00e7\u00e3o de cada itemtype que voc\u00ea deseja utilizar para obter uma lista completa das propriedades aceitas por cada elemento e seus respectivos valores.<\/p>\n<p>Encare este post como um dicion\u00e1rio b\u00e1sico portugu\u00eas-schema. Decorar um n\u00famero de telefone de um\u00a0<a title=\"It Crowd Emergency Number\" href=\"http:\/\/www.youtube.com\/watch?v=ab8GtuPdrUQ\">jingle<\/a> \u00e9 uma tarefa imposs\u00edvel, certo? Sorte que existe a internet! Vamos aprender a dizer \u201cEi mecanismo de busca! Aqui est\u00e1 o telefone de emerg\u00eancia do hospital.\u201d. Para isto vamos utilizar o itemtype <a title=\"schema.org\/Hospital\" href=\"http:\/\/schema.org\/Hospital\">Hospital<\/a>(que compartilha caracter\u00edsticas com Thing, Organization, LocalBusiness e MedicalOrganization) e dois itemprops name e telephone.<\/p>\n<div id=\"crayon-547c5d2d02f08755857488\" class=\"crayon-syntax crayon-theme-popup crayon-font-monaco crayon-os-pc print-yes notranslate crayon-wrapped\" data-settings=\" minimize scroll-mouseover wrap\">\n<div class=\"crayon-plain-wrap\">\n<pre class=\"lang:php decode:true\">...\n \n&lt;div itemscope itemtype=\"http:\/\/schema.org\/Hospital\"&gt;\n   &lt;span itemprop=\"name\"&gt;Hospital&lt;\/span&gt;\n   &lt;span itemprop=\"telephone\"&gt;0118 999 881 999 199 725 3&lt;\/span&gt;\n&lt;\/div&gt;\n \n...<\/pre>\n<p>&nbsp;<\/p>\n<\/div>\n<\/div>\n<h2>Mais um exemplo pr\u00e1tico, por favor!<\/h2>\n<p>Hora de por a m\u00e3o na massa. Como eu sou f\u00e3 de meta linguagem vou usar este post como exemplo.<\/p>\n<div id=\"crayon-547c5d2d02f1e632373923\" class=\"crayon-syntax crayon-theme-popup crayon-font-monaco crayon-os-pc print-yes notranslate crayon-wrapped\" data-settings=\" minimize scroll-mouseover wrap\">\n<div class=\"crayon-plain-wrap\">\n<pre class=\"lang:php decode:true\">...\n \n&lt;article&gt;\n&lt;h1&gt;Schema.org \u2013 Dando significado ao conte\u00fado na internet&lt;\/h1&gt;\n&lt;h2&gt;por Dani Guerrato&lt;\/h2&gt;\n&lt;img src=\"http:\/\/blog.popupdesign.com.br\/wp-content\/uploads\/2012\/09\/schema-org.jpg\" alt=\"schema.org\"&gt;\n&lt;p&gt;Sintaxe, sem\u00e2ntica e vocabul\u00e1rio. Parece at\u00e9 aula de portugu\u00eas, mas \u00e9 desenvolvimento web! Neste artigo vamos analisar como todos estes conceitos podem te ajudar a melhor o ranqueamento em mecanismos de busca, facilitar a vida do seu usu\u00e1rio e dar significado ao seu conte\u00fado na internet. Conhe\u00e7a o schema.org.&lt;\/p&gt;\n&lt;\/article&gt;\n \n...<\/pre>\n<p>&nbsp;<\/p>\n<\/div>\n<\/div>\n<p>Como isto \u00e9 um post de um blog escolhi o itemtype\u00a0<a title=\"schema.org\/BlogPosting\" href=\"http:\/\/schema.org\/BlogPosting\">BlogPosting<\/a>.\u00a0Este schema \u00e9 \u201cfilho\u201d das categorias Thing, CreativeWork e Article.<\/p>\n<p>Estas s\u00e3o algumas de suas propriedades:<\/p>\n<p>author \u2013 pessoa ou organiza\u00e7\u00e3o respons\u00e1vel pela autoria do post<br \/>\nheadline \u2013 titulo do post<br \/>\narticleBody- o texto do post<br \/>\nimage \u2013 uma imagem de exibi\u00e7\u00e3o<br \/>\nurl \u2013 endere\u00e7o da p\u00e1gina<br \/>\nkeywords \u2013 palavras chave<\/p>\n<div id=\"crayon-547c5d2d02f27808667083\" class=\"crayon-syntax crayon-theme-popup crayon-font-monaco crayon-os-pc print-yes notranslate crayon-wrapped\" data-settings=\" minimize scroll-mouseover wrap\">\n<div class=\"crayon-plain-wrap\">\n<pre class=\"lang:php decode:true\">...\n \n&lt;article itemscope itemtype=\"http:\/\/schema.org\/BlogPosting\"&gt;\n&lt;h1 itemprop=\"headline\"&gt;Schema.org \u2013 Dando significado ao conte\u00fado na internet&lt;\/h1&gt;\n&lt;h2&gt;por &lt;span itemprop=\"author\"&gt;Dani Guerrato&lt;\/span&gt;&lt;\/h2&gt;\n&lt;img src=\"http:\/\/blog.popupdesign.com.br\/wp-content\/uploads\/2012\/09\/schema-org.jpg\" alt=\"schema.org\" itemprop=\"image\"&gt;\n&lt;p itemprop=\"articleBody\"&gt;Sintaxe, sem\u00e2ntica e vocabul\u00e1rio. Parece at\u00e9 aula de portugu\u00eas, mas \u00e9 desenvolvimento web! Neste artigo vamos analisar como todos estes conceitos podem te ajudar a melhor o ranqueamento em mecanismos de busca, facilitar a vida do seu usu\u00e1rio e dar significado ao seu conte\u00fado na internet. Conhe\u00e7a o schema.org.&lt;\/p&gt;\n&lt;\/article&gt;\n \n...<\/pre>\n<p>&nbsp;<\/p>\n<\/div>\n<\/div>\n<p>F\u00e1cil de aplicar,certo?<\/p>\n<p>\u00c9 poss\u00edvel combinar e utilizar diversos itemscopes em apenas uma p\u00e1gina. Por exemplo, na p\u00e1gina sobre de um blog poderiamos usar o itemscope author para cada um dos colunistas. Ao encadear diversos itemscopes a coisa pode ficar meio confusa. Nesta hora \u00e9 sempre bom utilizar uma ferramenta como a\u00a0<a title=\"Google Rich Snippet Tool\" href=\"http:\/\/www.google.com\/webmasters\/tools\/richsnippets\">Google Rich Snippet tool<\/a> para testar.<\/p>\n<p>&nbsp;<\/p>\n<h2>Uma pequena nota sobre coisas invis\u00edveis<\/h2>\n<p>A esta altura voc\u00eas devem estar pensando \u201cHey! Voc\u00ea comentou as propriedades url e keywords e n\u00e3o usou no seu exemplo\u201d. Eu fiz isto por que queria informar estes dados para os mecanismos de busca, mas eles n\u00e3o precisavam ficar vis\u00edveis para o usu\u00e1rio. N\u00e3o seria nada sem\u00e2ntico utilizar alguma gambiarra como divs escondidas para fazer isto\u2026 Mas existe uma sa\u00edda f\u00e1cil \u00a0e pr\u00e1tica. Basta declarar estas informa\u00e7\u00f5es utilizando meta tags. A sintaxe \u00e9 bem simples: utilize itemprop e o par\u00e2metro content para o conte\u00fado desejado.<\/p>\n<div id=\"crayon-547c5d2d02f2f187053398\" class=\"crayon-syntax crayon-theme-popup crayon-font-monaco crayon-os-pc print-yes notranslate crayon-wrapped\" data-settings=\" minimize scroll-mouseover wrap\">\n<div class=\"crayon-plain-wrap\">\n<pre class=\"lang:php decode:true\">...\n&lt;article itemscope itemtype=\"http:\/\/schema.org\/BlogPosting\"&gt;\n&lt;meta itemprop=\"url\" content=\"http:\/\/blog.popupdesign.com.br\/schema.org-dando-significado-ao-conteudo-na-internet\" \/&gt;\n&lt;meta itemprop=\"keywords\" content=\"schema.org, SEO, microdata\" \/&gt;\n&lt;\/article&gt;\n...<\/pre>\n<p>&nbsp;<\/p>\n<\/div>\n<\/div>\n<h2>Quero utilizar um itemtype que n\u00e3o est\u00e1 no schema.org. O que eu fa\u00e7o?<\/h2>\n<p>Voc\u00ea pode, a princ\u00edpio, usar uma marca\u00e7\u00e3o mais gen\u00e9rica. N\u00e3o existe um itemtype espec\u00edfico para programador ou desenvolvedor front-end, por exemplo, mas voc\u00ea pode usar person para ambos. Ou, voc\u00ea pode utilizar o mecanismo de expans\u00e3o do schema. Vamos ver como funciona?<\/p>\n<p>Para utilizar o mecanismo \u00e9 necess\u00e1rio seguir algumas regras de sintaxe:<br \/>\n&#8211; Tipos e enumera\u00e7\u00f5es devem come\u00e7ar com letras mai\u00fasculas e n\u00e3o conterem espa\u00e7os ente as palavras. Por exemplo WebDesigner ao inv\u00e9s de Web Designer (padr\u00e3o conhecido como <a title=\"CamelCase na WIkipedia\" href=\"http:\/\/pt.wikipedia.org\/wiki\/CamelCase\">CamelCase<\/a>).<br \/>\n&#8211; J\u00e1 no caso de propriedades a primeira palavra deve ser escrita com letra minuscula, mas a segunda (se existir) dever\u00e1 ter letra mai\u00fascula. Se Web Designer fosse uma propriedade deveria ser escrito como webDesigner.<\/p>\n<p>Agora \u00e9 a parte f\u00e1cil. Basta utilizar uma barra (o caracter \/ ) para acrescentar o seu termo novo ao schema. Como o nosso WebDesigner \u00e9 uma pessoa vamos expandir o termo \u201cperson\u201d.<\/p>\n<div id=\"crayon-547c5d2d02f37744621256\" class=\"crayon-syntax crayon-theme-popup crayon-font-monaco crayon-os-pc print-yes notranslate crayon-wrapped\" data-settings=\" minimize scroll-mouseover wrap\">\n<div class=\"crayon-plain-wrap\">\n<pre class=\"lang:php decode:true \">...\n \n&lt;div itemscope itemtype=\"http:\/\/schema.org\/Person\/WebDesigner\"&gt;\n   &lt;h1 itemprop=\"name\"&gt;Dani Guerrato&lt;\/h1&gt;\n&lt;\/div&gt;\n \n...<\/pre>\n<p>&nbsp;<\/p>\n<\/div>\n<\/div>\n<p>Acabei de dizer para o mundo que eu sou uma pessoa e uma webdesigner. Simples, n\u00e9? Voc\u00ea pode fazer isso com qualquer itemscope. Um dos itens que mais senti falta no schema foi portf\u00f3lio. Mas podemos entender portf\u00f3lio como uma expans\u00e3o do scope WebPage, afinal, est\u00e1 no mesmo campo sem\u00e2ntico. Ent\u00e3o bastaria utilizar\u00a0http:\/\/schema.org\/WebPage\/Portfolio<\/p>\n<p>\u00c9 importante ter em mente que n\u00e3o \u00e9 poss\u00edvel criar novos itens, apenas expandir as classes que j\u00e1 existem. Isto \u00e9 uma regra que serve para manter um padr\u00e3o coerente. Se voc\u00ea inventasse uma tag aleat\u00f3ria ela n\u00e3o teria mais nenhum vinculo com o schema.org, n\u00e3o seria compat\u00edvel com nenhum mecanismo de busca ou browser e perderia o prop\u00f3sito da exist\u00eancia j\u00e1 que n\u00e3o ter\u00edamos nenhuma pista para entender o que voc\u00ea tentou escrever\u2026 Mas se voc\u00ea pensou em uma ideia incr\u00edvel e nem o mecanismo de expans\u00e3o atende as suas expectativas voc\u00ea pode ainda tentar sugerir um novo item atrav\u00e9s desta <a title=\"Schema Wiki\" href=\"http:\/\/www.w3.org\/wiki\/WebSchemas\/SchemaDotOrgProposals\">wiki<\/a>. Lembrando que a sua proposta dever\u00e1 ser bem escrita e seguir o template proposto pela wiki para ser levada em considera\u00e7\u00e3o com nome, descri\u00e7\u00e3o, exemplos concretos de uso, etc. Tudo em ingl\u00eas, \u00e9 claro. Ou voc\u00ea pode deixar um <a title=\"Schema Feedback\" href=\"http:\/\/schema.org\/docs\/feedback.html\">feedback<\/a> no site oficial mesmo.<\/p>\n<p>&nbsp;<\/p>\n<h2>Informa\u00e7\u00f5es do autor nos resultados de pesquisa<\/h2>\n<p>Que tal ir um passo al\u00e9m e utilizar rich snippets para ter o seu nome e imagem ao lado de um artigo de sua autoria nos resultados de busca do Google? O processo \u00e9 bem simples, mas por enquanto s\u00f3 \u00e9 poss\u00edvel para quem possui um perfil na rede social <a title=\"Google+\" href=\"https:\/\/plus.google.com\/\">Google+<\/a>.\u00a0Existem duas op\u00e7\u00f5es para voc\u00ea confirmar para o Google que \u00e9 o autor de verdade daquele texto:<\/p>\n<p>Op\u00e7\u00e3o 01 \u2013 Se voc\u00ea tiver um endere\u00e7o de email com o seu nome no seu dom\u00ednio.<\/p>\n<p>Primeiro certifique-se que cada artigo possua um t\u00edtulo identificando o seu nome de maneira clara (por exemplo, \u201cPor Dani Guerrato\u201d ou \u201cAutor: Dani Guerrato\u201d). Ent\u00e3o visite a p\u00e1gina <a title=\"Google Authorship\" href=\"https:\/\/plus.google.com\/authorship\">Autoria<\/a> e envie seu endere\u00e7o de e-mail ao Google. Voc\u00ea s\u00f3 precisar\u00e1 fazer isto uma vez, independente de quantos textos de sua autoria existirem no dom\u00ednio.<\/p>\n<p>Op\u00e7\u00e3o 2 \u2013 Se voc\u00ea N\u00c3O possui um endere\u00e7o de email no seu dom\u00ednio<\/p>\n<p>Adicione em algum lugar do seu site um link para o seu perfil no Google+. Lembrando de substituir [profile_url] pela URL de seu perfil. N\u00e3o esque\u00e7a do par\u00e2metro ?rel=author.<\/p>\n<div id=\"crayon-547c5d2d02f41320685437\" class=\"crayon-syntax crayon-theme-popup crayon-font-monaco crayon-os-pc print-yes notranslate crayon-wrapped\" data-settings=\" minimize scroll-mouseover wrap\">\n<div class=\"crayon-plain-wrap\">\n<pre class=\"lang:php decode:true \">...\n \n&lt;a href=\"[profile_url]?rel=author\"&gt;Seu nome&lt;\/a&gt;\n \n...<\/pre>\n<p>&nbsp;<\/p>\n<\/div>\n<\/div>\n<p>O segundo passo \u00e9 atualizar a se\u00e7\u00e3o \u201cColaborador de\u201d no seu perfil do Google+ com um link de volta para o seu site. Clique em salvar.<\/p>\n<figure id=\"attachment_3853\" aria-describedby=\"caption-attachment-3853\" style=\"width: 640px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3853\" src=\"https:\/\/www.turbosite.com.br\/blog\/wp-content\/uploads\/2014\/12\/post-autor-rich-snippet.jpg\" alt=\"Postagem de tipo Autor com Rich Snippet\" width=\"640\" height=\"300\" srcset=\"https:\/\/www.turbosite.com.br\/blog\/wp-content\/uploads\/2014\/12\/post-autor-rich-snippet.jpg 640w, https:\/\/www.turbosite.com.br\/blog\/wp-content\/uploads\/2014\/12\/post-autor-rich-snippet-300x141.jpg 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><figcaption id=\"caption-attachment-3853\" class=\"wp-caption-text\">Postagem de tipo Autor com Rich Snippet<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<p>S\u00f3 lembrando que n\u00e3o existe nenhuma garantia. Estas informa\u00e7\u00f5es s\u00f3 apareceram nas nas pesquisas que o Google achar relevante. Mas o resultado fica bem bacana! Voc\u00ea pode, novamente, utilizar a ferramenta\u00a0\u00a0<a title=\"Google Rich Snippet Tool\" href=\"http:\/\/www.google.com\/webmasters\/tools\/richsnippets\">Google Rich Snippet tool<\/a>\u00a0para testar.<\/p>\n<p>&nbsp;<\/p>\n<h2>Conclus\u00e3o e dicas de Leitura<\/h2>\n<p>No caso do schema.org \u00e9 imposs\u00edvel fazer um bom trabalho sem consultar a <a title=\"Schema.org \" href=\"http:\/\/schema.org\/docs\/documents.html\">documenta\u00e7\u00e3o<\/a>. Como \u00e9 uma ferramenta em constante evolu\u00e7\u00e3o vale a pena tamb\u00e9m ficar de olho no <a title=\"Schema.org Blog\" href=\"http:\/\/blog.schema.org\/\">Blog do Schema.org<\/a> para conferir as novidades. Se estiver procurando uma leitura em portugu\u00eas, o post <a title=\"Microdata\" href=\"http:\/\/loopinfinito.com.br\/2012\/05\/02\/microdata\/\">Microdata<\/a> do blog Loop Infinito tamb\u00e9m tr\u00e1s informa\u00e7\u00f5es bacanas a respeito.<\/p>\n<p>Espero que voc\u00eas tenham gostado. Fiquem de olho para mais artigos sobre criatividade, design e desenvolvimento web.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Neste artigo vamos analisar o Schema.org. S\u00e3o conceitos que podem te ajudar a melhorar o ranqueamento em mecanismos de busca e dar significado ao seu conte\u00fado na internet.<\/p>\n","protected":false},"author":1,"featured_media":3855,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,13,26],"tags":[306,348,474,555,573],"class_list":["post-3848","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dicas","category-html-2","category-seo","tag-google-rank","tag-indexar-site","tag-page-rank","tag-schema-org","tag-seo"],"_links":{"self":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/3848","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/comments?post=3848"}],"version-history":[{"count":0,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/3848\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/media\/3855"}],"wp:attachment":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/media?parent=3848"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/categories?post=3848"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/tags?post=3848"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}