[{"data":1,"prerenderedAt":3872},["ShallowReactive",2],{"pt-BR-seo-category-articles":3},[4,1564,1937],{"id":5,"title":6,"articleCover":7,"articleCoverEmbed":8,"articleCoverEmbedUploadDate":8,"articleCoverHeight":9,"articleCoverWidth":10,"authorId":11,"body":12,"categoriesIds":1544,"description":1548,"enAlternateSlug":1549,"extension":1550,"meta":1551,"navigation":566,"path":1552,"ptBrAlternateSlug":1553,"publishedAt":1554,"seo":1555,"sitemap":1556,"stem":1561,"updatedAt":1560,"wordCount":1562,"__hash__":1563},"blog\u002Fblog\u002Fcomo-criar-dados-estruturados-com-nuxtjs.md","Como Adicionar Dados Estruturados no Nuxt.JS","\u002Fimages\u002Fblog\u002Fseo\u002Fstructured-data\u002Fstructured-data-thumb-1.webp",null,720,1280,"thiago-nunes-batista",{"type":13,"value":14,"toc":1516},"minimark",[15,24,29,32,39,43,53,60,67,71,74,84,232,236,239,252,255,259,262,276,280,295,298,307,314,339,345,360,371,438,441,445,455,502,516,834,847,852,860,985,1005,1009,1052,1056,1062,1207,1210,1216,1220,1229,1233,1236,1257,1260,1288,1292,1295,1314,1317,1320,1324,1327,1335,1339,1342,1357,1367,1370,1418,1421,1425,1437,1441,1445,1451,1455,1458,1462,1465,1469,1472,1476,1479,1483,1492,1512],[16,17,18,19,23],"p",{},"Aqui você vê o que são Dados Estruturados, quando usar, quando não usar e como marcar os artigos do seu blog no Nuxt.JS com o ",[20,21,22],"code",{},"nuxt-schema-org",". Depois vem a validação da marcação e o que fazer para o Google descobrir e indexar o conteúdo e, quando possível, recomendá-lo no Discover.",[25,26,28],"h2",{"id":27},"o-que-são-dados-estruturados","O que são Dados Estruturados?",[16,30,31],{},"Dados estruturados são informações de um site que estão organizadas de forma padronizada em formatos como JSON-LD, Microdata ou RDFa. O Google recomenda o JSON-LD, que fica separado do HTML visível e é o mais simples de manter, e é o formato que vamos usar aqui.",[16,33,34,35,38],{},"Através dos dados estruturados os mecanismos de busca como o Google recebem mais informações sobre o que se trata a sua página e, com base nessas informações, juntamente com outros fatores, os mecanismos de busca podem fazer a exibição de ",[20,36,37],{},"Resultados Ricos"," de páginas do seu site nos resultados de busca.",[25,40,42],{"id":41},"o-que-são-rich-snippets","O que são Rich Snippets ?",[16,44,45,46,49,50,52],{},"Os ",[20,47,48],{},"Rich Snippets"," ou ",[20,51,37],{}," são melhorias visuais nos resultados de busca como imagens, preços, breadcrumbs, estrelas de avaliação, etc.",[16,54,55,56,59],{},"Abaixo você pode conferir um exemplo de Resultado Rico no Google do site ",[20,57,58],{},"Yahoo Finances",", onde uma imagem é exibida, título e data de publicação. Essas informações e recursos visuais aumentam a chance de chamar a atenção do usuário e fazer ele acessar o seu site.",[61,62],"img",{"alt":63,"height":64,"src":65,"width":66},"exemplo de resultado rico de busca no Google do site Yahoo Finances",358,"\u002Fimages\u002Fblog\u002Fseo\u002Fstructured-data\u002Fyahoo-finances-schema-org-rich-result.webp",688,[25,68,70],{"id":69},"exemplo-do-código-de-dado-estruturado","Exemplo do Código de Dado Estruturado",[16,72,73],{},"Abaixo você pode ver um exemplo de dados estruturados em JSON-LD. Não se preocupe, você não vai precisar escrever isso manualmente, vamos usar uma ferramenta do Nuxt para gerar o código.",[75,76,77],"blockquote",{},[16,78,79,80,83],{},"Este exemplo usa ",[20,81,82],{},"FAQPage",", que foi o tipo mais comum de resultado rico durante anos. O Google parou de exibir o resultado rico de FAQ em 7 de maio de 2026, para qualquer tipo de site, e removeu a documentação do recurso em junho. A marcação continua válida no schema.org, mas hoje ela só descreve o conteúdo e não muda a aparência do seu resultado na busca.",[85,86,91],"pre",{"className":87,"code":88,"language":89,"meta":90,"style":90},"language-html shiki shiki-themes dracula","\u003Cscript type=\"application\u002Fld+json\">\n  {\n    \"@type\": \"FAQPage\",\n    \"@context\": \"https:\u002F\u002Fschema.org\",\n    \"@graph\": [\n      {\n        \"@id\": \"https:\u002F\u002Fcodigoaoponto.com\u002Ftools\u002Fcpf-generator\u002F#\u002Fschema\u002Fquestion\u002Fc6e1aab\",\n        \"@type\": \"Question\",\n        \"inLanguage\": \"pt-BR\",\n        \"name\": \"O que é um Gerador de CPF?\",\n        \"acceptedAnswer\": {\n          \"@type\": \"Answer\",\n          \"text\": \"Um Gerador de CPF é uma ferramenta que gera números de CPF válidos, sendo útil para testes e desenvolvimento de sistemas. Ele aplica o algoritmo oficial de validação do CPF para assegurar que os números criados estejam formatados corretamente.\"\n        }\n      }\n    ]\n  }\n\u003C\u002Fscript>\n","html","",[20,92,93,126,132,138,144,150,156,162,168,174,180,186,192,198,204,210,216,222],{"__ignoreMap":90},[94,95,98,102,106,110,113,117,121,123],"span",{"class":96,"line":97},"line",1,[94,99,101],{"class":100},"sCdxs","\u003C",[94,103,105],{"class":104},"s0Tla","script",[94,107,109],{"class":108},"sY_PY"," type",[94,111,112],{"class":104},"=",[94,114,116],{"class":115},"seVfx","\"",[94,118,120],{"class":119},"s-mGx","application\u002Fld+json",[94,122,116],{"class":115},[94,124,125],{"class":100},">\n",[94,127,129],{"class":96,"line":128},2,[94,130,131],{"class":100},"  {\n",[94,133,135],{"class":96,"line":134},3,[94,136,137],{"class":100},"    \"@type\": \"FAQPage\",\n",[94,139,141],{"class":96,"line":140},4,[94,142,143],{"class":100},"    \"@context\": \"https:\u002F\u002Fschema.org\",\n",[94,145,147],{"class":96,"line":146},5,[94,148,149],{"class":100},"    \"@graph\": [\n",[94,151,153],{"class":96,"line":152},6,[94,154,155],{"class":100},"      {\n",[94,157,159],{"class":96,"line":158},7,[94,160,161],{"class":100},"        \"@id\": \"https:\u002F\u002Fcodigoaoponto.com\u002Ftools\u002Fcpf-generator\u002F#\u002Fschema\u002Fquestion\u002Fc6e1aab\",\n",[94,163,165],{"class":96,"line":164},8,[94,166,167],{"class":100},"        \"@type\": \"Question\",\n",[94,169,171],{"class":96,"line":170},9,[94,172,173],{"class":100},"        \"inLanguage\": \"pt-BR\",\n",[94,175,177],{"class":96,"line":176},10,[94,178,179],{"class":100},"        \"name\": \"O que é um Gerador de CPF?\",\n",[94,181,183],{"class":96,"line":182},11,[94,184,185],{"class":100},"        \"acceptedAnswer\": {\n",[94,187,189],{"class":96,"line":188},12,[94,190,191],{"class":100},"          \"@type\": \"Answer\",\n",[94,193,195],{"class":96,"line":194},13,[94,196,197],{"class":100},"          \"text\": \"Um Gerador de CPF é uma ferramenta que gera números de CPF válidos, sendo útil para testes e desenvolvimento de sistemas. Ele aplica o algoritmo oficial de validação do CPF para assegurar que os números criados estejam formatados corretamente.\"\n",[94,199,201],{"class":96,"line":200},14,[94,202,203],{"class":100},"        }\n",[94,205,207],{"class":96,"line":206},15,[94,208,209],{"class":100},"      }\n",[94,211,213],{"class":96,"line":212},16,[94,214,215],{"class":100},"    ]\n",[94,217,219],{"class":96,"line":218},17,[94,220,221],{"class":100},"  }\n",[94,223,225,228,230],{"class":96,"line":224},18,[94,226,227],{"class":100},"\u003C\u002F",[94,229,105],{"class":104},[94,231,125],{"class":100},[25,233,235],{"id":234},"quando-usar-dados-estruturados","Quando usar dados estruturados?",[16,237,238],{},"Use Dados Estruturados quando:",[240,241,242,246,249],"ul",{},[243,244,245],"li",{},"O conteúdo da página for de alguma das categorias suportadas, como exemplo: artigos, produtos, receitas, eventos, vagas de emprego, etc.",[243,247,248],{},"Desejar aumentar a visibilidade das suas páginas e a taxa de cliques (CTR).",[243,250,251],{},"Querer ajudar mecanismos de busca a entender melhor o conteúdo do seu site.",[16,253,254],{},"Em qualquer caso, o que você marca precisa estar visível para o usuário na página, e as propriedades precisam ser mantidas atualizadas.",[25,256,258],{"id":257},"quando-não-usar-dados-estruturados","Quando não usar dados estruturados ?",[16,260,261],{},"Evite usar Dados Estruturados quando:",[240,263,264,267,270,273],{},[243,265,266],{},"Conteúdo da página não se encaixa nas categorias suportadas.",[243,268,269],{},"Conteúdo de baixa qualidade, os dados estruturados não auxiliam na melhoria do conteúdo.",[243,271,272],{},"Conteúdo mudar com frequência, pois se tornará custoso realizar atualizações tão frequentes dessas informações.",[243,274,275],{},"O conteúdo marcado não aparece na página. O Google trata isso como uso indevido de dados estruturados e pode aplicar uma ação manual no seu site.",[25,277,279],{"id":278},"instalação-do-pacote-schemaorg-no-nuxt","Instalação do pacote Schema.org no Nuxt",[16,281,282,283,290,291,294],{},"O ",[284,285,289],"a",{"href":286,"rel":287},"https:\u002F\u002Fnuxtseo.com",[288],"nofollow","Nuxt SEO"," é uma coleção de módulos de SEO que facilitam o desenvolvimento de ",[20,292,293],{},"SEO técnico"," para o seu site. Para este tutorial nós vamos utilizar o módulo que facilitará a implementação dos estruturados.",[16,296,297],{},"Você pode realizar a instalação desse módulo de várias formas, aqui vou exemplificar as duas principais:",[299,300,301,304],"ol",{},[243,302,303],{},"nuxi (Interface de linha de comando oficial do Nuxt)",[243,305,306],{},"npm (Gerenciador de pacotes)",[16,308,309,310,313],{},"Se você for utilizar o ",[20,311,312],{},"nuxi",", basta executar o seguinte comando:",[85,315,319],{"className":316,"code":317,"language":318,"meta":90,"style":90},"language-bash shiki shiki-themes dracula","npx nuxi module add schema-org\n","bash",[20,320,321],{"__ignoreMap":90},[94,322,323,327,330,333,336],{"class":96,"line":97},[94,324,326],{"class":325},"sAOxA","npx",[94,328,329],{"class":119}," nuxi",[94,331,332],{"class":119}," module",[94,334,335],{"class":119}," add",[94,337,338],{"class":119}," schema-org\n",[16,340,309,341,344],{},[20,342,343],{},"npm",", terá que fazer uma etapa extra, comece instalando o pacote:",[85,346,348],{"className":316,"code":347,"language":318,"meta":90,"style":90},"npm i nuxt-schema-org\n",[20,349,350],{"__ignoreMap":90},[94,351,352,354,357],{"class":96,"line":97},[94,353,343],{"class":325},[94,355,356],{"class":119}," i",[94,358,359],{"class":119}," nuxt-schema-org\n",[16,361,362,363,366,367,370],{},"E depois adicione o pacote instalado na opção de ",[20,364,365],{},"modules"," dentro do arquivo ",[20,368,369],{},"nuxt.config.ts",":",[85,372,376],{"className":373,"code":374,"language":375,"meta":90,"style":90},"language-js shiki shiki-themes dracula","export default defineNuxtConfig({\n  \u002F\u002F outras configurações....\n  modules: [\n    \u002F\u002F outros módulos\n    \"nuxt-schema-org\"\n  ]\n  \u002F\u002F outras configurações...s\n});\n","js",[20,377,378,392,398,408,413,423,428,433],{"__ignoreMap":90},[94,379,380,383,386,389],{"class":96,"line":97},[94,381,382],{"class":104},"export",[94,384,385],{"class":104}," default",[94,387,388],{"class":325}," defineNuxtConfig",[94,390,391],{"class":100},"({\n",[94,393,394],{"class":96,"line":128},[94,395,397],{"class":396},"shSDL","  \u002F\u002F outras configurações....\n",[94,399,400,403,405],{"class":96,"line":134},[94,401,402],{"class":100},"  modules",[94,404,370],{"class":104},[94,406,407],{"class":100}," [\n",[94,409,410],{"class":96,"line":140},[94,411,412],{"class":396},"    \u002F\u002F outros módulos\n",[94,414,415,418,420],{"class":96,"line":146},[94,416,417],{"class":115},"    \"",[94,419,22],{"class":119},[94,421,422],{"class":115},"\"\n",[94,424,425],{"class":96,"line":152},[94,426,427],{"class":100},"  ]\n",[94,429,430],{"class":96,"line":158},[94,431,432],{"class":396},"  \u002F\u002F outras configurações...s\n",[94,434,435],{"class":96,"line":164},[94,436,437],{"class":100},"});\n",[16,439,440],{},"Feito isso, já podemos começar a utilizar a ferramenta.",[25,442,444],{"id":443},"dados-estruturados-para-artigos-no-nuxtjs","Dados Estruturados para Artigos no Nuxt.JS",[16,446,447,448,451,452,454],{},"Para um blog, o tipo mais útil é o ",[20,449,450],{},"Article",". Ele diz ao Google que a página é um artigo, quem escreveu, quando foi publicado e atualizado e qual imagem o representa. O Google não exige nenhuma propriedade para ",[20,453,450],{},", mas recomenda estas:",[240,456,457,463,469,479,496],{},[243,458,459,462],{},[20,460,461],{},"headline",": o título do artigo.",[243,464,465,468],{},[20,466,467],{},"image",": uma imagem representativa. O Google recomenda várias imagens em alta resolução, nas proporções 16x9, 4x3 e 1x1.",[243,470,471,474,475,478],{},[20,472,473],{},"datePublished"," e ",[20,476,477],{},"dateModified",": data da primeira publicação e da última modificação, em formato ISO 8601.",[243,480,481,484,485,488,489,474,492,495],{},[20,482,483],{},"author",": de preferência um ",[20,486,487],{},"Person"," com ",[20,490,491],{},"name",[20,493,494],{},"url",", apontando para uma página que identifique o autor.",[243,497,498,501],{},[20,499,500],{},"publisher",": a organização por trás do site, com nome e logo.",[16,503,504,505,508,509,512,513,515],{},"No Nuxt estará disponível de forma global o ",[20,506,507],{},"composable"," chamado ",[20,510,511],{},"useSchemaOrg",", que você pode usar dentro da tag ",[20,514,105],{}," da página. Em uma página de blog que carrega o post com o Nuxt Content, ele fica assim:",[85,517,521],{"className":518,"code":519,"language":520,"meta":90,"style":90},"language-vue shiki shiki-themes dracula","\u003Cscript setup lang=\"ts\">\nconst route = useRoute();\n\nconst { data: post } = await useAsyncData(`post-${route.path}`, () =>\n  queryCollection(\"blog\").path(route.path).first()\n);\n\nuseSchemaOrg([\n  defineArticle({\n    headline: post.value?.title,\n    description: post.value?.description,\n    image: post.value?.articleCover,\n    datePublished: post.value?.publishedAt,\n    dateModified: post.value?.updatedAt ?? post.value?.publishedAt\n  }),\n  defineBreadcrumb({\n    itemListElement: [\n      { name: \"Home\", item: \"\u002F\" },\n      { name: \"Blog\", item: \"\u002Fblog\" },\n      { name: post.value?.title }\n    ]\n  })\n]);\n\u003C\u002Fscript>\n","vue",[20,522,523,546,562,568,612,641,646,650,657,664,674,684,694,704,720,725,732,741,771,798,808,813,819,825],{"__ignoreMap":90},[94,524,525,527,529,532,535,537,539,542,544],{"class":96,"line":97},[94,526,101],{"class":100},[94,528,105],{"class":104},[94,530,531],{"class":108}," setup",[94,533,534],{"class":108}," lang",[94,536,112],{"class":104},[94,538,116],{"class":115},[94,540,541],{"class":119},"ts",[94,543,116],{"class":115},[94,545,125],{"class":100},[94,547,548,551,554,556,559],{"class":96,"line":128},[94,549,550],{"class":104},"const",[94,552,553],{"class":100}," route ",[94,555,112],{"class":104},[94,557,558],{"class":325}," useRoute",[94,560,561],{"class":100},"();\n",[94,563,564],{"class":96,"line":134},[94,565,567],{"emptyLinePlaceholder":566},true,"\n",[94,569,570,572,575,577,580,582,585,588,591,594,597,600,603,606,609],{"class":96,"line":140},[94,571,550],{"class":104},[94,573,574],{"class":100}," { data",[94,576,370],{"class":104},[94,578,579],{"class":100}," post } ",[94,581,112],{"class":104},[94,583,584],{"class":104}," await",[94,586,587],{"class":325}," useAsyncData",[94,589,590],{"class":100},"(",[94,592,593],{"class":119},"`post-",[94,595,596],{"class":104},"${",[94,598,599],{"class":100},"route.path",[94,601,602],{"class":104},"}",[94,604,605],{"class":119},"`",[94,607,608],{"class":100},", () ",[94,610,611],{"class":104},"=>\n",[94,613,614,617,619,621,624,626,629,632,635,638],{"class":96,"line":146},[94,615,616],{"class":325},"  queryCollection",[94,618,590],{"class":100},[94,620,116],{"class":115},[94,622,623],{"class":119},"blog",[94,625,116],{"class":115},[94,627,628],{"class":100},").",[94,630,631],{"class":325},"path",[94,633,634],{"class":100},"(route.path).",[94,636,637],{"class":325},"first",[94,639,640],{"class":100},"()\n",[94,642,643],{"class":96,"line":152},[94,644,645],{"class":100},");\n",[94,647,648],{"class":96,"line":158},[94,649,567],{"emptyLinePlaceholder":566},[94,651,652,654],{"class":96,"line":164},[94,653,511],{"class":325},[94,655,656],{"class":100},"([\n",[94,658,659,662],{"class":96,"line":170},[94,660,661],{"class":325},"  defineArticle",[94,663,391],{"class":100},[94,665,666,669,671],{"class":96,"line":176},[94,667,668],{"class":100},"    headline",[94,670,370],{"class":104},[94,672,673],{"class":100}," post.value?.title,\n",[94,675,676,679,681],{"class":96,"line":182},[94,677,678],{"class":100},"    description",[94,680,370],{"class":104},[94,682,683],{"class":100}," post.value?.description,\n",[94,685,686,689,691],{"class":96,"line":188},[94,687,688],{"class":100},"    image",[94,690,370],{"class":104},[94,692,693],{"class":100}," post.value?.articleCover,\n",[94,695,696,699,701],{"class":96,"line":194},[94,697,698],{"class":100},"    datePublished",[94,700,370],{"class":104},[94,702,703],{"class":100}," post.value?.publishedAt,\n",[94,705,706,709,711,714,717],{"class":96,"line":200},[94,707,708],{"class":100},"    dateModified",[94,710,370],{"class":104},[94,712,713],{"class":100}," post.value?.updatedAt ",[94,715,716],{"class":104},"??",[94,718,719],{"class":100}," post.value?.publishedAt\n",[94,721,722],{"class":96,"line":206},[94,723,724],{"class":100},"  }),\n",[94,726,727,730],{"class":96,"line":212},[94,728,729],{"class":325},"  defineBreadcrumb",[94,731,391],{"class":100},[94,733,734,737,739],{"class":96,"line":218},[94,735,736],{"class":100},"    itemListElement",[94,738,370],{"class":104},[94,740,407],{"class":100},[94,742,743,746,748,751,754,756,759,761,763,766,768],{"class":96,"line":224},[94,744,745],{"class":100},"      { name",[94,747,370],{"class":104},[94,749,750],{"class":115}," \"",[94,752,753],{"class":119},"Home",[94,755,116],{"class":115},[94,757,758],{"class":100},", item",[94,760,370],{"class":104},[94,762,750],{"class":115},[94,764,765],{"class":119},"\u002F",[94,767,116],{"class":115},[94,769,770],{"class":100}," },\n",[94,772,774,776,778,780,783,785,787,789,791,794,796],{"class":96,"line":773},19,[94,775,745],{"class":100},[94,777,370],{"class":104},[94,779,750],{"class":115},[94,781,782],{"class":119},"Blog",[94,784,116],{"class":115},[94,786,758],{"class":100},[94,788,370],{"class":104},[94,790,750],{"class":115},[94,792,793],{"class":119},"\u002Fblog",[94,795,116],{"class":115},[94,797,770],{"class":100},[94,799,801,803,805],{"class":96,"line":800},20,[94,802,745],{"class":100},[94,804,370],{"class":104},[94,806,807],{"class":100}," post.value?.title }\n",[94,809,811],{"class":96,"line":810},21,[94,812,215],{"class":100},[94,814,816],{"class":96,"line":815},22,[94,817,818],{"class":100},"  })\n",[94,820,822],{"class":96,"line":821},23,[94,823,824],{"class":100},"]);\n",[94,826,828,830,832],{"class":96,"line":827},24,[94,829,227],{"class":100},[94,831,105],{"class":104},[94,833,125],{"class":100},[16,835,836,837,839,840,843,844,846],{},"Os campos vêm do front matter do artigo, então o ",[20,838,477],{}," só reflete a realidade se você atualizar o ",[20,841,842],{},"updatedAt"," quando mudar o conteúdo de verdade. O módulo converte as datas para ISO 8601 e transforma o caminho da imagem em URL absoluta a partir da ",[20,845,494],{}," do site.",[848,849,851],"h3",{"id":850},"configuração-global-do-site","Configuração global do site",[16,853,854,855,857,858,370],{},"Autor e editora não precisam ser repetidos em cada página. O ",[20,856,22],{}," usa a configuração do site e a identidade da organização, que você define uma vez no ",[20,859,369],{},[85,861,864],{"className":862,"code":863,"language":541,"meta":90,"style":90},"language-ts shiki shiki-themes dracula","export default defineNuxtConfig({\n  site: {\n    url: \"https:\u002F\u002Fseusite.com\",\n    name: \"Nome do Site\"\n  },\n  schemaOrg: {\n    identity: defineOrganization({\n      name: \"Nome do Site\",\n      logo: \"https:\u002F\u002Fseusite.com\u002Flogo-512.png\"\n    })\n  }\n});\n",[20,865,866,876,886,903,917,922,931,943,958,972,977,981],{"__ignoreMap":90},[94,867,868,870,872,874],{"class":96,"line":97},[94,869,382],{"class":104},[94,871,385],{"class":104},[94,873,388],{"class":325},[94,875,391],{"class":100},[94,877,878,881,883],{"class":96,"line":128},[94,879,880],{"class":100},"  site",[94,882,370],{"class":104},[94,884,885],{"class":100}," {\n",[94,887,888,891,893,895,898,900],{"class":96,"line":134},[94,889,890],{"class":100},"    url",[94,892,370],{"class":104},[94,894,750],{"class":115},[94,896,897],{"class":119},"https:\u002F\u002Fseusite.com",[94,899,116],{"class":115},[94,901,902],{"class":100},",\n",[94,904,905,908,910,912,915],{"class":96,"line":140},[94,906,907],{"class":100},"    name",[94,909,370],{"class":104},[94,911,750],{"class":115},[94,913,914],{"class":119},"Nome do Site",[94,916,422],{"class":115},[94,918,919],{"class":96,"line":146},[94,920,921],{"class":100},"  },\n",[94,923,924,927,929],{"class":96,"line":152},[94,925,926],{"class":100},"  schemaOrg",[94,928,370],{"class":104},[94,930,885],{"class":100},[94,932,933,936,938,941],{"class":96,"line":158},[94,934,935],{"class":100},"    identity",[94,937,370],{"class":104},[94,939,940],{"class":325}," defineOrganization",[94,942,391],{"class":100},[94,944,945,948,950,952,954,956],{"class":96,"line":164},[94,946,947],{"class":100},"      name",[94,949,370],{"class":104},[94,951,750],{"class":115},[94,953,914],{"class":119},[94,955,116],{"class":115},[94,957,902],{"class":100},[94,959,960,963,965,967,970],{"class":96,"line":170},[94,961,962],{"class":100},"      logo",[94,964,370],{"class":104},[94,966,750],{"class":115},[94,968,969],{"class":119},"https:\u002F\u002Fseusite.com\u002Flogo-512.png",[94,971,422],{"class":115},[94,973,974],{"class":96,"line":176},[94,975,976],{"class":100},"    })\n",[94,978,979],{"class":96,"line":182},[94,980,221],{"class":100},[94,982,983],{"class":96,"line":188},[94,984,437],{"class":100},[16,986,987,988,990,991,993,994,488,996,474,998,1000,1001,1004],{},"Se o ",[20,989,450],{}," não tiver ",[20,992,500],{},", o módulo usa essa identidade. Para o autor, passe um ",[20,995,487],{},[20,997,491],{},[20,999,494],{}," no ",[20,1002,1003],{},"defineArticle",".",[848,1006,1008],{"id":1007},"como-as-entidades-se-ligam","Como as entidades se ligam",[16,1010,1011,1012,1015,1016,1019,1020,1019,1023,1019,1025,474,1027,1030,1031,1034,1035,1037,1038,1040,1041,1043,1044,1046,1047,474,1049,1051],{},"O módulo monta um único ",[20,1013,1014],{},"@graph"," em que ",[20,1017,1018],{},"WebSite",", ",[20,1021,1022],{},"WebPage",[20,1024,450],{},[20,1026,487],{},[20,1028,1029],{},"Organization"," se referenciam por ",[20,1032,1033],{},"@id",". O ",[20,1036,450],{}," aponta para a ",[20,1039,1022],{}," atual, e o ",[20,1042,483],{}," e o ",[20,1045,500],{}," apontam para os nós de ",[20,1048,487],{},[20,1050,1029],{},". Essa ligação diz ao Google que o artigo pertence àquele autor e àquela marca.",[848,1053,1055],{"id":1054},"e-o-faqpage","E o FAQPage?",[16,1057,1058,1059,1061],{},"Se a página tem uma seção de perguntas e respostas visível, ainda vale marcar com ",[20,1060,82],{},". Só não espere o dropdown na busca. O exemplo abaixo gera o mesmo JSON-LD que vimos antes:",[85,1063,1065],{"className":518,"code":1064,"language":520,"meta":90,"style":90},"\u003Cscript setup>\nuseSchemaOrg([\n  defineWebPage({\n    \"@type\": \"FAQPage\"\n  }),\n  defineQuestion({\n    name: \"O que é um Gerador de CPF?\",\n    acceptedAnswer:\n      \"Um Gerador de CPF é uma ferramenta que gera números de CPF válidos, sendo útil para testes e desenvolvimento de sistemas. Ele aplica o algoritmo oficial de validação do CPF para assegurar que os números criados estejam formatados corretamente.\"\n  }),\n  defineQuestion({\n    name: \"Como funciona o Gerador de CPF?\",\n    acceptedAnswer:\n      \"O Gerador de CPF cria aleatoriamente os nove primeiros dígitos do CPF e, em seguida, calcula os dois dígitos verificadores usando o algoritmo de validação oficial, assegurando que o número gerado seja válido.\"\n  })\n]);\n\u003C\u002Fscript>\n",[20,1066,1067,1077,1083,1090,1107,1111,1118,1133,1141,1151,1155,1161,1176,1182,1191,1195,1199],{"__ignoreMap":90},[94,1068,1069,1071,1073,1075],{"class":96,"line":97},[94,1070,101],{"class":100},[94,1072,105],{"class":104},[94,1074,531],{"class":108},[94,1076,125],{"class":100},[94,1078,1079,1081],{"class":96,"line":128},[94,1080,511],{"class":325},[94,1082,656],{"class":100},[94,1084,1085,1088],{"class":96,"line":134},[94,1086,1087],{"class":325},"  defineWebPage",[94,1089,391],{"class":100},[94,1091,1092,1094,1097,1099,1101,1103,1105],{"class":96,"line":140},[94,1093,417],{"class":115},[94,1095,1096],{"class":119},"@type",[94,1098,116],{"class":115},[94,1100,370],{"class":104},[94,1102,750],{"class":115},[94,1104,82],{"class":119},[94,1106,422],{"class":115},[94,1108,1109],{"class":96,"line":146},[94,1110,724],{"class":100},[94,1112,1113,1116],{"class":96,"line":152},[94,1114,1115],{"class":325},"  defineQuestion",[94,1117,391],{"class":100},[94,1119,1120,1122,1124,1126,1129,1131],{"class":96,"line":158},[94,1121,907],{"class":100},[94,1123,370],{"class":104},[94,1125,750],{"class":115},[94,1127,1128],{"class":119},"O que é um Gerador de CPF?",[94,1130,116],{"class":115},[94,1132,902],{"class":100},[94,1134,1135,1138],{"class":96,"line":164},[94,1136,1137],{"class":100},"    acceptedAnswer",[94,1139,1140],{"class":104},":\n",[94,1142,1143,1146,1149],{"class":96,"line":170},[94,1144,1145],{"class":115},"      \"",[94,1147,1148],{"class":119},"Um Gerador de CPF é uma ferramenta que gera números de CPF válidos, sendo útil para testes e desenvolvimento de sistemas. Ele aplica o algoritmo oficial de validação do CPF para assegurar que os números criados estejam formatados corretamente.",[94,1150,422],{"class":115},[94,1152,1153],{"class":96,"line":176},[94,1154,724],{"class":100},[94,1156,1157,1159],{"class":96,"line":182},[94,1158,1115],{"class":325},[94,1160,391],{"class":100},[94,1162,1163,1165,1167,1169,1172,1174],{"class":96,"line":188},[94,1164,907],{"class":100},[94,1166,370],{"class":104},[94,1168,750],{"class":115},[94,1170,1171],{"class":119},"Como funciona o Gerador de CPF?",[94,1173,116],{"class":115},[94,1175,902],{"class":100},[94,1177,1178,1180],{"class":96,"line":194},[94,1179,1137],{"class":100},[94,1181,1140],{"class":104},[94,1183,1184,1186,1189],{"class":96,"line":200},[94,1185,1145],{"class":115},[94,1187,1188],{"class":119},"O Gerador de CPF cria aleatoriamente os nove primeiros dígitos do CPF e, em seguida, calcula os dois dígitos verificadores usando o algoritmo de validação oficial, assegurando que o número gerado seja válido.",[94,1190,422],{"class":115},[94,1192,1193],{"class":96,"line":206},[94,1194,818],{"class":100},[94,1196,1197],{"class":96,"line":212},[94,1198,824],{"class":100},[94,1200,1201,1203,1205],{"class":96,"line":218},[94,1202,227],{"class":100},[94,1204,105],{"class":104},[94,1206,125],{"class":100},[16,1208,1209],{},"Até maio de 2026, essa marcação podia render um resultado rico como o da imagem abaixo:",[61,1211],{"alt":1212,"height":1213,"src":1214,"width":1215},"exemplo de resultado rico de FAQ no Google para a pergunta sobre o que é Nuxt.JS, exibido antes de o Google encerrar o recurso",351,"\u002Fimages\u002Fblog\u002Fseo\u002Fstructured-data\u002Ffaq-rich-result-example-1.webp",681,[25,1217,1219],{"id":1218},"como-conferir-se-o-json-ld-está-no-html","Como conferir se o JSON-LD está no HTML",[16,1221,1222,1223,1034,1226,1228],{},"Abra a página no navegador e use \"Ver código-fonte da página\", não \"Inspecionar elemento\". Procure por um bloco ",[20,1224,1225],{},"\u003Cscript type=\"application\u002Fld+json\">",[20,1227,22],{}," injeta o JSON-LD durante a renderização no servidor, então ele precisa estar no HTML bruto. Se ele só aparecer depois da hidratação, revise a configuração de renderização da página.",[25,1230,1232],{"id":1231},"como-validar-os-dados-estruturados","Como validar os dados estruturados",[16,1234,1235],{},"Depois de publicar, valide a página com estas ferramentas:",[299,1237,1238,1246,1254],{},[243,1239,1240,1245],{},[284,1241,1244],{"href":1242,"rel":1243},"https:\u002F\u002Fsearch.google.com\u002Ftest\u002Frich-results",[288],"Teste de Resultados Ricos"," do Google: mostra os itens detectados na URL e lista erros e avisos.",[243,1247,1248,1253],{},[284,1249,1252],{"href":1250,"rel":1251},"https:\u002F\u002Fvalidator.schema.org",[288],"Validador do Schema Markup",": confere a sintaxe do JSON-LD segundo o schema.org, independente de o Google exibir um resultado rico.",[243,1255,1256],{},"Relatório de dados estruturados no Search Console: agrupa os erros e avisos do site inteiro.",[16,1258,1259],{},"Os problemas mais comuns em blogs são estes:",[240,1261,1262,1273,1276,1285],{},[243,1263,1264,1265,49,1267,1269,1270,1272],{},"Propriedade recomendada ausente, como ",[20,1266,467],{},[20,1268,483],{},". Não é erro crítico em ",[20,1271,450],{},", mas limita o que o Google pode usar.",[243,1274,1275],{},"Imagem pequena ou inacessível. Para o Discover, a imagem precisa ter pelo menos 1200 px de largura e a URL não pode estar bloqueada para o rastreador.",[243,1277,1278,1279,49,1282,1004],{},"Data em formato inválido. Use ISO 8601, como ",[20,1280,1281],{},"2026-10-03",[20,1283,1284],{},"2026-10-03T14:30:00-03:00",[243,1286,1287],{},"Marcação diferente do conteúdo visível. Título, autor, data e imagem do schema devem ser os mesmos que o usuário vê na página.",[25,1289,1291],{"id":1290},"como-fazer-o-google-indexar-o-seu-artigo","Como fazer o Google indexar o seu artigo",[16,1293,1294],{},"Dados estruturados corretos não adiantam se o Google não indexar a página. O fluxo para um artigo novo é este:",[299,1296,1297,1308,1311],{},[243,1298,1299,1300,1303,1304,1307],{},"Confirme que a URL está no ",[20,1301,1302],{},"sitemap.xml"," e que o sitemap está enviado no Search Console. No Nuxt, o módulo ",[20,1305,1306],{},"@nuxtjs\u002Fsitemap"," gera esse arquivo.",[243,1309,1310],{},"Cole a URL no campo \"Inspecionar qualquer URL\" do Search Console.",[243,1312,1313],{},"Clique em \"Solicitar indexação\".",[16,1315,1316],{},"O pedido de indexação coloca a URL numa fila de rastreamento, mas não garante a indexação, e o Google não informa o prazo. O Google também não publica o limite diário de pedidos. Quando você o atinge, o botão fica indisponível até o dia seguinte, então use só para URLs importantes e não reenvie a mesma página várias vezes.",[16,1318,1319],{},"Para as demais páginas, o que ajuda o Google a descobri-las são o sitemap e os links internos. Uma página sem nenhum link vindo de outras páginas do site tende a ser descoberta mais devagar. Crie links para os artigos novos a partir da listagem do blog e de posts relacionados.",[848,1321,1323],{"id":1322},"descoberta-mas-não-indexada","Descoberta, mas não indexada",[16,1325,1326],{},"No relatório de indexação de páginas, dois status confundem muita gente:",[240,1328,1329,1332],{},[243,1330,1331],{},"Descoberta, mas não indexada no momento: o Google conhece a URL, mas ainda não a rastreou. Reforce os links internos, confira se a URL está no sitemap e verifique se o servidor não está devolvendo erros 5xx ou respondendo devagar.",[243,1333,1334],{},"Rastreada, mas não indexada no momento: o Google já leu a página e decidiu não indexá-la por enquanto. Costuma ser uma questão de qualidade: conteúdo muito parecido com outro já indexado, pouco aprofundado ou fora da intenção de busca. Melhore o conteúdo e só depois peça a indexação de novo.",[25,1336,1338],{"id":1337},"como-aparecer-no-google-discover","Como aparecer no Google Discover",[16,1340,1341],{},"O Discover é o feed de conteúdo do app do Google e de navegadores móveis. Ele mostra conteúdo conforme os interesses de cada usuário, sem depender de uma pesquisa. Segundo a documentação do Google, para ser elegível o conteúdo precisa:",[240,1343,1344,1347,1354],{},[243,1345,1346],{},"Estar indexado e seguir as políticas de conteúdo do Discover, sem clickbait nem sensacionalismo.",[243,1348,1349,1350,1353],{},"Ter uma imagem com pelo menos 1200 px de largura e mais de 300.000 pixels no total, na proporção 16x9, e a meta robots ",[20,1351,1352],{},"max-image-preview:large"," habilitada.",[243,1355,1356],{},"Ser um conteúdo original, útil e feito para pessoas.",[16,1358,1359,1360,1362,1363,1366],{},"Nenhum dado estruturado é obrigatório para o Discover. Mas o Google usa o ",[20,1361,467],{}," do schema.org e a meta tag ",[20,1364,1365],{},"og:image"," para escolher a imagem do card, então vale manter as duas apontando para uma imagem boa e não usar o logo do site no lugar.",[16,1368,1369],{},"No Nuxt, a meta robots pode ser definida na própria página:",[85,1371,1373],{"className":518,"code":1372,"language":520,"meta":90,"style":90},"\u003Cscript setup>\nuseSeoMeta({\n  robots: \"index, follow, max-image-preview:large\"\n});\n\u003C\u002Fscript>\n",[20,1374,1375,1385,1392,1406,1410],{"__ignoreMap":90},[94,1376,1377,1379,1381,1383],{"class":96,"line":97},[94,1378,101],{"class":100},[94,1380,105],{"class":104},[94,1382,531],{"class":108},[94,1384,125],{"class":100},[94,1386,1387,1390],{"class":96,"line":128},[94,1388,1389],{"class":325},"useSeoMeta",[94,1391,391],{"class":100},[94,1393,1394,1397,1399,1401,1404],{"class":96,"line":134},[94,1395,1396],{"class":100},"  robots",[94,1398,370],{"class":104},[94,1400,750],{"class":115},[94,1402,1403],{"class":119},"index, follow, max-image-preview:large",[94,1405,422],{"class":115},[94,1407,1408],{"class":96,"line":140},[94,1409,437],{"class":100},[94,1411,1412,1414,1416],{"class":96,"line":146},[94,1413,227],{"class":100},[94,1415,105],{"class":104},[94,1417,125],{"class":100},[16,1419,1420],{},"O desempenho no Discover aparece no relatório próprio do Search Console. Se o seu site não tiver dados lá, o conteúdo ainda não está sendo exibido no feed.",[25,1422,1424],{"id":1423},"avisando-o-bing-com-indexnow","Avisando o Bing com IndexNow",[16,1426,1427,1428,1431,1432,1004],{},"O IndexNow é um protocolo adotado pelo Bing e por outros buscadores para avisar quando uma URL é criada, atualizada ou removida. Você gera uma chave, publica um arquivo ",[20,1429,1430],{},".txt"," com ela na raiz do domínio e faz uma requisição ao endpoint do IndexNow sempre que publicar ou atualizar um artigo. Isso avisa o buscador de que existe algo novo, mas não garante indexação imediata. O guia oficial está em ",[284,1433,1436],{"href":1434,"rel":1435},"https:\u002F\u002Fwww.bing.com\u002Findexnow\u002Fgetstarted",[288],"bing.com\u002Findexnow\u002Fgetstarted",[25,1438,1440],{"id":1439},"perguntas-frequentes","Perguntas frequentes",[848,1442,1444],{"id":1443},"preciso-de-dados-estruturados-para-o-meu-blog-rankear","Preciso de dados estruturados para o meu blog rankear?",[16,1446,1447,1448,1450],{},"Não. Eles não são obrigatórios para rankear, mas ajudam o Google a entender melhor os seus artigos. Para um blog, o ponto de partida é ",[20,1449,450],{}," com autor e imagem, mais o breadcrumb.",[848,1452,1454],{"id":1453},"vale-a-pena-manter-faqpage-se-ele-não-gera-mais-resultado-rico","Vale a pena manter FAQPage se ele não gera mais resultado rico?",[16,1456,1457],{},"Vale se a página tem uma seção de perguntas e respostas visível para o usuário. Nesse caso a marcação serve para descrever o conteúdo.",[848,1459,1461],{"id":1460},"dados-estruturados-garantem-que-meu-post-apareça-no-discover","Dados estruturados garantem que meu post apareça no Discover?",[16,1463,1464],{},"Não. O Discover não exige dados estruturados. O que pesa é o conteúdo estar indexado, ter uma imagem grande e seguir as políticas de conteúdo.",[848,1466,1468],{"id":1467},"meu-artigo-aparece-como-rastreada-mas-não-indexada-o-que-fazer","Meu artigo aparece como \"Rastreada, mas não indexada\". O que fazer?",[16,1470,1471],{},"Esse status costuma apontar para a qualidade ou a originalidade da página. Melhore o conteúdo, reforce os links internos e peça a indexação de novo depois.",[848,1473,1475],{"id":1474},"como-sei-que-o-google-está-lendo-o-meu-json-ld","Como sei que o Google está lendo o meu JSON-LD?",[16,1477,1478],{},"Confira o HTML bruto em \"Ver código-fonte da página\", teste a URL no Teste de Resultados Ricos e acompanhe o relatório de dados estruturados no Search Console.",[25,1480,1482],{"id":1481},"conclusão","Conclusão",[16,1484,1485,1486,1488,1489,1491],{},"Em cada artigo novo, marque o ",[20,1487,450],{}," com autor, imagem e datas, confira o JSON-LD no código-fonte, valide no Teste de Resultados Ricos e acompanhe o relatório de indexação no Search Console. Atualize o ",[20,1490,842],{}," só quando o conteúdo mudar de verdade e, se o Bing importa para você, configure o IndexNow.",[16,1493,1494,1495,1500,1501,1506,1507,1004],{},"Se você quiser se aprofundar, acesse a ",[284,1496,1499],{"href":1497,"rel":1498},"https:\u002F\u002Fnuxtseo.com\u002Fdocs\u002Fschema-org\u002Fgetting-started\u002Fintroduction",[288],"documentação completa do módulo",", a ",[284,1502,1505],{"href":1503,"rel":1504},"https:\u002F\u002Fdevelopers.google.com\u002Fsearch\u002Fdocs\u002Fappearance\u002Fstructured-data\u002Farticle",[288],"documentação do Google sobre dados estruturados de Article"," e a ",[284,1508,1511],{"href":1509,"rel":1510},"https:\u002F\u002Fdevelopers.google.com\u002Fsearch\u002Fdocs\u002Fappearance\u002Fgoogle-discover",[288],"documentação do Google Discover",[1513,1514,1515],"style",{},"html pre.shiki code .sCdxs, html code.shiki .sCdxs{--shiki-default:#F8F8F2}html pre.shiki code .s0Tla, html code.shiki .s0Tla{--shiki-default:#FF79C6}html pre.shiki code .sY_PY, html code.shiki .sY_PY{--shiki-default:#50FA7B;--shiki-default-font-style:italic}html pre.shiki code .seVfx, html code.shiki .seVfx{--shiki-default:#E9F284}html pre.shiki code .s-mGx, html code.shiki .s-mGx{--shiki-default:#F1FA8C}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sAOxA, html code.shiki .sAOxA{--shiki-default:#50FA7B}html pre.shiki code .shSDL, html code.shiki .shSDL{--shiki-default:#6272A4}",{"title":90,"searchDepth":128,"depth":128,"links":1517},[1518,1519,1520,1521,1522,1523,1524,1529,1530,1531,1534,1535,1536,1543],{"id":27,"depth":128,"text":28},{"id":41,"depth":128,"text":42},{"id":69,"depth":128,"text":70},{"id":234,"depth":128,"text":235},{"id":257,"depth":128,"text":258},{"id":278,"depth":128,"text":279},{"id":443,"depth":128,"text":444,"children":1525},[1526,1527,1528],{"id":850,"depth":134,"text":851},{"id":1007,"depth":134,"text":1008},{"id":1054,"depth":134,"text":1055},{"id":1218,"depth":128,"text":1219},{"id":1231,"depth":128,"text":1232},{"id":1290,"depth":128,"text":1291,"children":1532},[1533],{"id":1322,"depth":134,"text":1323},{"id":1337,"depth":128,"text":1338},{"id":1423,"depth":128,"text":1424},{"id":1439,"depth":128,"text":1440,"children":1537},[1538,1539,1540,1541,1542],{"id":1443,"depth":134,"text":1444},{"id":1453,"depth":134,"text":1454},{"id":1460,"depth":134,"text":1461},{"id":1467,"depth":134,"text":1468},{"id":1474,"depth":134,"text":1475},{"id":1481,"depth":128,"text":1482},[1545,1546,1547],"nuxt","vuejs","seo","Como adicionar dados estruturados no Nuxt.js com nuxt-schema-org: Article, breadcrumb, validação, indexação no Search Console e Google Discover, com exemplos.","how-to-create-structured-data-with-nuxtjs","md",{},"\u002Fblog\u002Fcomo-criar-dados-estruturados-com-nuxtjs","como-criar-dados-estruturados-com-nuxtjs","2025-01-22",{"title":6,"description":1548},{"loc":1552,"images":1557,"lastmod":1560},[1558,1559],{"loc":65},{"loc":1214},"2026-10-06","blog\u002Fcomo-criar-dados-estruturados-com-nuxtjs",2117,"BGjviT8apRyvkm1BK6McXSTpscdgbzA3H9QMGzuI_fw",{"id":1565,"title":1566,"articleCover":1567,"articleCoverEmbed":1568,"articleCoverEmbedUploadDate":1569,"articleCoverHeight":9,"articleCoverWidth":10,"authorId":11,"body":1570,"categoriesIds":1924,"description":1925,"enAlternateSlug":8,"extension":1550,"meta":1926,"navigation":566,"path":1927,"ptBrAlternateSlug":8,"publishedAt":1928,"seo":1929,"sitemap":1930,"stem":1934,"updatedAt":1560,"wordCount":1935,"__hash__":1936},"blog\u002Fblog\u002Fog-tags-o-que-sao-e-como-adicionar-no-seu-site.md","OG Tags: O que São e Como Adicioná-las ao Seu Site","\u002Fimages\u002Fblog\u002Fseo\u002Fo-que-e-como-utilizar-as-og-tags.webp","https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FdLgvTA-34Zo?si=u0d0IbuqPKCiprS4","2024-10-03T09:01:06-07:00",{"type":13,"value":1571,"toc":1918},[1572,1580,1583,1589,1593,1609,1828,1832,1835,1862,1865,1879,1883,1904,1910,1912,1915],[16,1573,282,1574,1579],{},[284,1575,1578],{"href":1576,"rel":1577},"https:\u002F\u002Fogp.me\u002F",[288],"Open Graph Protocol"," é um protocolo criado pelo Facebook em 2010 que define um padrão de metadados que devemos seguir e preencher para integrar um site com as mídias sociais, por exemplo, isso é utilizado para que ao compartilhar o link de um site, seja exibido o título, imagem e descrição do conteúdo.",[16,1581,1582],{},"Inicialmente o Open Graph Protocol foi pensado e desenvolvido para uso no Facebook, mas atualmente, por exemplo, outras plataformas como LinkedIn e Discord realizam o uso das OG Tags.",[61,1584],{"alt":1585,"height":1586,"src":1587,"width":1588},"exemplo do resultado do uso das OG Tags no Linkedin",398,"\u002Fimages\u002Fblog\u002Fseo\u002Fexemplo-de-uso-das-og-tags-no-linkedin.webp",531,[25,1590,1592],{"id":1591},"como-adicionar-og-tags-em-um-site","Como adicionar OG Tags em um site?",[16,1594,1595,1596,1599,1600,1603,1604,370],{},"Para adicionar as OG Tags será necessário realizar a inclusão de novas meta tags no cabeçalho da página web, onde o atributo ",[20,1597,1598],{},"property"," é o nome da OG Tag e o atributo ",[20,1601,1602],{},"content"," define o valor, como o exemplo abaixo de um ",[284,1605,1608],{"href":1606,"rel":1607},"https:\u002F\u002Fcodigoaoponto.com\u002Fblog\u002Fcomo-recuperar-arquivos-perdidos-no-git-pelo-vscode",[288],"artigo no Código ao Ponto",[85,1610,1612],{"className":87,"code":1611,"language":89,"meta":90,"style":90},"\u003Chead>\n  \u003Cmeta\n    property=\"og:title\"\n    content=\"Como recuperar arquivos perdidos no Git pelo VSCode | Código ao Ponto\"\n  \u002F>\n\n  \u003Cmeta\n    property=\"og:description\"\n    content=\"Aprenda a recuperar alterações de código perdidas utilizando uma funcionalidade do Vscode chamada Local History que salva diferentes versões do seu código.\"\n  \u002F>\n\n  \u003Cmeta\n    property=\"og:image\"\n    content=\"\u002Fimages\u002Fblog\u002Fcomo-recuperar-arquivos-perdido-no-git-pelo-vscode.webp\"\n  \u002F>\n\n  \u003Cmeta property=\"og:type\" content=\"article\" \u002F>\n\n  \u003Cmeta\n    property=\"og:url\"\n    content=\"https:\u002F\u002Fcodigoaoponto.com\u002Fblog\u002Fcomo-recuperar-arquivos-perdidos-no-git-pelo-vscode\"\n  \u002F>\n\u003C\u002Fhead>\n",[20,1613,1614,1623,1631,1645,1659,1664,1668,1674,1687,1700,1704,1708,1714,1726,1739,1743,1747,1781,1785,1791,1804,1816,1820],{"__ignoreMap":90},[94,1615,1616,1618,1621],{"class":96,"line":97},[94,1617,101],{"class":100},[94,1619,1620],{"class":104},"head",[94,1622,125],{"class":100},[94,1624,1625,1628],{"class":96,"line":128},[94,1626,1627],{"class":100},"  \u003C",[94,1629,1630],{"class":104},"meta\n",[94,1632,1633,1636,1638,1640,1643],{"class":96,"line":134},[94,1634,1635],{"class":108},"    property",[94,1637,112],{"class":104},[94,1639,116],{"class":115},[94,1641,1642],{"class":119},"og:title",[94,1644,422],{"class":115},[94,1646,1647,1650,1652,1654,1657],{"class":96,"line":140},[94,1648,1649],{"class":108},"    content",[94,1651,112],{"class":104},[94,1653,116],{"class":115},[94,1655,1656],{"class":119},"Como recuperar arquivos perdidos no Git pelo VSCode | Código ao Ponto",[94,1658,422],{"class":115},[94,1660,1661],{"class":96,"line":146},[94,1662,1663],{"class":100},"  \u002F>\n",[94,1665,1666],{"class":96,"line":152},[94,1667,567],{"emptyLinePlaceholder":566},[94,1669,1670,1672],{"class":96,"line":158},[94,1671,1627],{"class":100},[94,1673,1630],{"class":104},[94,1675,1676,1678,1680,1682,1685],{"class":96,"line":164},[94,1677,1635],{"class":108},[94,1679,112],{"class":104},[94,1681,116],{"class":115},[94,1683,1684],{"class":119},"og:description",[94,1686,422],{"class":115},[94,1688,1689,1691,1693,1695,1698],{"class":96,"line":170},[94,1690,1649],{"class":108},[94,1692,112],{"class":104},[94,1694,116],{"class":115},[94,1696,1697],{"class":119},"Aprenda a recuperar alterações de código perdidas utilizando uma funcionalidade do Vscode chamada Local History que salva diferentes versões do seu código.",[94,1699,422],{"class":115},[94,1701,1702],{"class":96,"line":176},[94,1703,1663],{"class":100},[94,1705,1706],{"class":96,"line":182},[94,1707,567],{"emptyLinePlaceholder":566},[94,1709,1710,1712],{"class":96,"line":188},[94,1711,1627],{"class":100},[94,1713,1630],{"class":104},[94,1715,1716,1718,1720,1722,1724],{"class":96,"line":194},[94,1717,1635],{"class":108},[94,1719,112],{"class":104},[94,1721,116],{"class":115},[94,1723,1365],{"class":119},[94,1725,422],{"class":115},[94,1727,1728,1730,1732,1734,1737],{"class":96,"line":200},[94,1729,1649],{"class":108},[94,1731,112],{"class":104},[94,1733,116],{"class":115},[94,1735,1736],{"class":119},"\u002Fimages\u002Fblog\u002Fcomo-recuperar-arquivos-perdido-no-git-pelo-vscode.webp",[94,1738,422],{"class":115},[94,1740,1741],{"class":96,"line":206},[94,1742,1663],{"class":100},[94,1744,1745],{"class":96,"line":212},[94,1746,567],{"emptyLinePlaceholder":566},[94,1748,1749,1751,1754,1757,1759,1761,1764,1766,1769,1771,1773,1776,1778],{"class":96,"line":218},[94,1750,1627],{"class":100},[94,1752,1753],{"class":104},"meta",[94,1755,1756],{"class":108}," property",[94,1758,112],{"class":104},[94,1760,116],{"class":115},[94,1762,1763],{"class":119},"og:type",[94,1765,116],{"class":115},[94,1767,1768],{"class":108}," content",[94,1770,112],{"class":104},[94,1772,116],{"class":115},[94,1774,1775],{"class":119},"article",[94,1777,116],{"class":115},[94,1779,1780],{"class":100}," \u002F>\n",[94,1782,1783],{"class":96,"line":224},[94,1784,567],{"emptyLinePlaceholder":566},[94,1786,1787,1789],{"class":96,"line":773},[94,1788,1627],{"class":100},[94,1790,1630],{"class":104},[94,1792,1793,1795,1797,1799,1802],{"class":96,"line":800},[94,1794,1635],{"class":108},[94,1796,112],{"class":104},[94,1798,116],{"class":115},[94,1800,1801],{"class":119},"og:url",[94,1803,422],{"class":115},[94,1805,1806,1808,1810,1812,1814],{"class":96,"line":810},[94,1807,1649],{"class":108},[94,1809,112],{"class":104},[94,1811,116],{"class":115},[94,1813,1606],{"class":119},[94,1815,422],{"class":115},[94,1817,1818],{"class":96,"line":815},[94,1819,1663],{"class":100},[94,1821,1822,1824,1826],{"class":96,"line":821},[94,1823,227],{"class":100},[94,1825,1620],{"class":104},[94,1827,125],{"class":100},[25,1829,1831],{"id":1830},"os-diferentes-tipos-de-og-tags","Os diferentes tipos de OG Tags",[16,1833,1834],{},"Existe uma grande variedade de OG Tags, algumas que são fundamentais de se utilizar e outras que são complementares. Abaixo segue as essenciais:",[299,1836,1837,1842,1847,1852,1857],{},[243,1838,1839,1841],{},[20,1840,1642],{}," - define o título da página",[243,1843,1844,1846],{},[20,1845,1763],{}," - define o tipo de conteúdo da página. Exemplos: artigo, site, vídeo, etc.",[243,1848,1849,1851],{},[20,1850,1365],{}," - define a imagem exibida, talvez a tag mais importante, que captura a atenção do usuário.",[243,1853,1854,1856],{},[20,1855,1801],{}," - define a URL canônica da página",[243,1858,1859,1861],{},[20,1860,1684],{}," - define o texto de descrição que normalmente é exibido abaixo da imagem.",[16,1863,1864],{},"E agora algumas das OG Tags complementares, que são úteis em casos específicos:",[299,1866,1867,1873],{},[243,1868,1869,1872],{},[20,1870,1871],{},"og:audio"," - define a URL de um arquivo de aúdio presente na página",[243,1874,1875,1878],{},[20,1876,1877],{},"og:video"," - define a URL de um arquivo de vídeo presente na página.",[25,1880,1882],{"id":1881},"como-testar-as-og-tags-de-um-site","Como testar as OG Tags de um site?",[16,1884,1885,1886,1891,1892,1019,1895,1019,1898,474,1901,1004],{},"Vou te recomendar o site ",[284,1887,1890],{"href":1888,"rel":1889},"https:\u002F\u002Fwww.opengraph.xyz\u002F",[288],"Open Graph",", nele basta você colocar a URL do site que você quer validar o correto funcionamento das OG tags e fazer essa verificação sem precisar compartilhar o link do seu site em cada uma das mídias sociais que você quer testar. O site traz previews das OG Tags para ",[20,1893,1894],{},"Facebook",[20,1896,1897],{},"Twitter",[20,1899,1900],{},"LinkedIn",[20,1902,1903],{},"Discord",[61,1905],{"alt":1906,"height":1907,"src":1908,"width":1909},"utilizando o site Open Graph para visualizar o preview do link do seu site nas mídias sociais com as OG Tags",742,"\u002Fimages\u002Fblog\u002Fseo\u002Futilizando-o-site-open-graph-para-ver-preview-das-og-tags.webp",628,[25,1911,1482],{"id":1481},[16,1913,1914],{},"As OG Tags realizam um papel essencial na integração do seu site com mídias sociais como Twitter, Tiktok e LinkedIn, melhorando a apresentação do conteúdo do site e aumentando a chance de usuários clicarem no link compartilhado e acessarem o seu site.",[1513,1916,1917],{},"html pre.shiki code .sCdxs, html code.shiki .sCdxs{--shiki-default:#F8F8F2}html pre.shiki code .s0Tla, html code.shiki .s0Tla{--shiki-default:#FF79C6}html pre.shiki code .sY_PY, html code.shiki .sY_PY{--shiki-default:#50FA7B;--shiki-default-font-style:italic}html pre.shiki code .seVfx, html code.shiki .seVfx{--shiki-default:#E9F284}html pre.shiki code .s-mGx, html code.shiki .s-mGx{--shiki-default:#F1FA8C}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":90,"searchDepth":128,"depth":128,"links":1919},[1920,1921,1922,1923],{"id":1591,"depth":128,"text":1592},{"id":1830,"depth":128,"text":1831},{"id":1881,"depth":128,"text":1882},{"id":1481,"depth":128,"text":1482},[1547],"Descubra como o Open Graph Protocol melhora a integração do seu site com mídias sociais, exibindo título, imagem e descrição nos links compartilhados.",{},"\u002Fblog\u002Fog-tags-o-que-sao-e-como-adicionar-no-seu-site","2024-10-05",{"title":1566,"description":1925},{"loc":1927,"images":1931,"lastmod":1560},[1932,1933],{"loc":1587},{"loc":1908},"blog\u002Fog-tags-o-que-sao-e-como-adicionar-no-seu-site",446,"BnZneeQw7Qs29d8xIucUeWEp1mLoLAAzJIgx1EvYyBY",{"id":1938,"title":1939,"articleCover":1940,"articleCoverEmbed":8,"articleCoverEmbedUploadDate":8,"articleCoverHeight":9,"articleCoverWidth":10,"authorId":11,"body":1941,"categoriesIds":3855,"description":3856,"enAlternateSlug":3857,"extension":1550,"meta":3858,"navigation":566,"path":3859,"ptBrAlternateSlug":3860,"publishedAt":3861,"seo":3862,"sitemap":3863,"stem":3869,"updatedAt":1560,"wordCount":3870,"__hash__":3871},"blog\u002Fblog\u002Fweb-vitals-como-a-experiencia-do-usuario-vai-afetar-o-seo-do-seu-site.md","Web Vitals e SEO: como a experiência do usuário afeta o seu site","\u002Fimages\u002Fblog\u002Fseo\u002Fweb-vitals\u002Fweb-vitals-como-a-experiencia-do-usuario-vai-afetar-o-seo-do-seu-site.webp",{"type":13,"value":1942,"toc":3833},[1943,1950,1967,1978,1981,1999,2003,2006,2009,2012,2016,2019,2030,2033,2044,2048,2055,2058,2065,2069,2072,2121,2124,2144,2227,2464,2476,2483,2490,2557,2618,2625,2629,2634,2641,2652,2656,2659,2686,2689,2693,2711,2715,2722,2807,2817,2820,2899,2913,3072,3076,3083,3090,3099,3106,3110,3121,3125,3132,3311,3317,3474,3477,3534,3538,3548,3551,3558,3564,3572,3575,3579,3586,3589,3600,3609,3613,3616,3624,3631,3635,3649,3798,3801,3803,3806,3821,3827,3830],[16,1944,1945,1946,1004],{},"Antes de falar de Web Vitals, vale lembrar ",[1947,1948,1949],"strong",{},"o que é SEO",[16,1951,1952,1953,1956,1957,1019,1960,474,1963,1966],{},"SEO, sigla para Search Engine Optimization (Otimização para Motores de Busca), é um conjunto de técnicas para otimizar um site de modo que os ",[20,1954,1955],{},"Search Crawlers"," (os robôs de busca de ",[20,1958,1959],{},"Google",[20,1961,1962],{},"Bing",[20,1964,1965],{},"DuckDuckGo",") consigam conhecer e indexar as páginas dele.",[16,1968,1969,1970,1973,1974,1977],{},"Quanto mais otimizado o site, maior a ",[1947,1971,1972],{},"chance"," de ele aparecer nas primeiras posições dos ",[20,1975,1976],{},"SERPs (Search Engine Result Pages)",", os resultados de busca, e de receber mais acessos.",[16,1979,1980],{},"Dá para dividir o SEO em três frentes:",[240,1982,1983,1990,1993],{},[243,1984,1985,1986,1989],{},"On-Page: conteúdo, palavras-chave, meta tags (como as ",[284,1987,1988],{"href":1927},"OG tags",") e estrutura do site.",[243,1991,1992],{},"Off-Page: estratégias externas, como backlinks vindos de outros sites.",[243,1994,1995,1996,1004],{},"Técnico: performance, tempo de carregamento, segurança (HTTPS) e ",[284,1997,1998],{"href":1552},"dados estruturados",[25,2000,2002],{"id":2001},"e-os-web-vitals","E os Web Vitals?",[16,2004,2005],{},"O Google criou os Web Vitals em 2020. Eles são um conjunto de métricas que medem, com números, a qualidade da experiência de quem usa um site.",[16,2007,2008],{},"Eles entram no SEO técnico. Ao otimizá-los, o site carrega mais rápido, responde melhor aos cliques e dá uma experiência melhor ao usuário.",[16,2010,2011],{},"O SEO cuida da visibilidade nos buscadores, e os Core Web Vitals cuidam de a página ser rápida e estável quando o visitante chega. Trabalhar as duas coisas juntas aumenta a chance de ranquear bem e de manter o visitante na página.",[25,2013,2015],{"id":2014},"core-web-vitals","Core Web Vitals",[16,2017,2018],{},"Os Core Web Vitals são um subconjunto dos Web Vitals. Hoje eles são três métricas:",[240,2020,2021,2024,2027],{},[243,2022,2023],{},"CLS, Cumulative Layout Shift",[243,2025,2026],{},"LCP, Largest Contentful Paint",[243,2028,2029],{},"INP, Interaction to Next Paint",[16,2031,2032],{},"O Google separa as principais das demais por três motivos:",[240,2034,2035,2038,2041],{},[243,2036,2037],{},"Priorização: com as métricas principais definidas, fica claro onde a pessoa desenvolvedora deve começar a otimizar.",[243,2039,2040],{},"Simplicidade: com poucas métricas, é mais fácil entender quais otimizações fazer.",[243,2042,2043],{},"Alinhamento com o Google: o Google é o buscador mais usado do mundo e quer entregar boas páginas aos seus usuários. Os Core Web Vitals fazem parte disso, e uma página que passa neles entrega o tipo de experiência que o Google procura.",[25,2045,2047],{"id":2046},"cumulative-layout-shift-cls","Cumulative Layout Shift (CLS)",[61,2049],{":copyright":2050,"alt":2051,"height":2052,"src":2053,"width":2054},"{\"title\": \"Métrica de CLS do Web Vitals\", \"licenseId\": \"cc4\", \"author\": {\"name\": \"web.dev\", \"url\": \"https:\u002F\u002Fweb.dev\" }}","Ilustração do CLS mostrando elementos da página se movendo durante o carregamento",210,"\u002Fimages\u002Fblog\u002Fseo\u002Fweb-vitals\u002Fcls-cumulative-layout-shift.webp",240,[16,2056,2057],{},"O CLS mede a estabilidade visual de uma página, ou seja, o quanto os elementos se mexem de forma inesperada durante o carregamento. Um CLS alto indica que o layout muda de repente, e quem está lendo acaba clicando no lugar errado.",[16,2059,2060,2061,2064],{},"Para ter uma boa experiência, o site deve manter o CLS em ",[1947,2062,2063],{},"0,1 ou menos"," em pelo menos 75% das visitas.",[848,2066,2068],{"id":2067},"exemplos-de-erros-de-cls","Exemplos de erros de CLS",[16,2070,2071],{},"O primeiro caso, bem comum, é a imagem que carrega depois do resto da página. Ela \"empurra\" o conteúdo para baixo para abrir espaço. A solução é definir largura e altura na imagem, para o navegador reservar o espaço antes de baixá-la.",[85,2073,2075],{"className":87,"code":2074,"language":89,"meta":90,"style":90},"\u003Cimg src=\"\u002Fcodigo-ao-ponto.jpg\" width=\"600\" height=\"400\" \u002F>\n",[20,2076,2077],{"__ignoreMap":90},[94,2078,2079,2081,2083,2086,2088,2090,2093,2095,2098,2100,2102,2105,2107,2110,2112,2114,2117,2119],{"class":96,"line":97},[94,2080,101],{"class":100},[94,2082,61],{"class":104},[94,2084,2085],{"class":108}," src",[94,2087,112],{"class":104},[94,2089,116],{"class":115},[94,2091,2092],{"class":119},"\u002Fcodigo-ao-ponto.jpg",[94,2094,116],{"class":115},[94,2096,2097],{"class":108}," width",[94,2099,112],{"class":104},[94,2101,116],{"class":115},[94,2103,2104],{"class":119},"600",[94,2106,116],{"class":115},[94,2108,2109],{"class":108}," height",[94,2111,112],{"class":104},[94,2113,116],{"class":115},[94,2115,2116],{"class":119},"400",[94,2118,116],{"class":115},[94,2120,1780],{"class":100},[16,2122,2123],{},"O segundo caso são as fontes personalizadas. O navegador precisa baixá-las antes de renderizar o texto corretamente, e isso causa um deslocamento quando a fonte web chega e substitui a fonte de fallback.",[16,2125,2126,2127,474,2130,2133,2134,1000,2137,2140,2141,1004],{},"Para resolver, pré-carregue a fonte com a tag ",[20,2128,2129],{},"link",[20,2131,2132],{},"rel=\"preload\"",", use ",[20,2135,2136],{},"font-display",[20,2138,2139],{},"@font-face"," e ajuste as métricas da fonte de fallback com ",[20,2142,2143],{},"size-adjust",[85,2145,2147],{"className":87,"code":2146,"language":89,"meta":90,"style":90},"\u003C!-- Pré-carregar a fonte crítica acima da dobra -->\n\u003Clink\n  rel=\"preload\"\n  href=\"\u002Ffonts\u002Finter.woff2\"\n  as=\"font\"\n  type=\"font\u002Fwoff2\"\n  crossorigin\n\u002F>\n",[20,2148,2149,2154,2161,2175,2189,2203,2217,2222],{"__ignoreMap":90},[94,2150,2151],{"class":96,"line":97},[94,2152,2153],{"class":396},"\u003C!-- Pré-carregar a fonte crítica acima da dobra -->\n",[94,2155,2156,2158],{"class":96,"line":128},[94,2157,101],{"class":100},[94,2159,2160],{"class":104},"link\n",[94,2162,2163,2166,2168,2170,2173],{"class":96,"line":134},[94,2164,2165],{"class":108},"  rel",[94,2167,112],{"class":104},[94,2169,116],{"class":115},[94,2171,2172],{"class":119},"preload",[94,2174,422],{"class":115},[94,2176,2177,2180,2182,2184,2187],{"class":96,"line":140},[94,2178,2179],{"class":108},"  href",[94,2181,112],{"class":104},[94,2183,116],{"class":115},[94,2185,2186],{"class":119},"\u002Ffonts\u002Finter.woff2",[94,2188,422],{"class":115},[94,2190,2191,2194,2196,2198,2201],{"class":96,"line":146},[94,2192,2193],{"class":108},"  as",[94,2195,112],{"class":104},[94,2197,116],{"class":115},[94,2199,2200],{"class":119},"font",[94,2202,422],{"class":115},[94,2204,2205,2208,2210,2212,2215],{"class":96,"line":152},[94,2206,2207],{"class":108},"  type",[94,2209,112],{"class":104},[94,2211,116],{"class":115},[94,2213,2214],{"class":119},"font\u002Fwoff2",[94,2216,422],{"class":115},[94,2218,2219],{"class":96,"line":158},[94,2220,2221],{"class":108},"  crossorigin\n",[94,2223,2224],{"class":96,"line":164},[94,2225,2226],{"class":100},"\u002F>\n",[85,2228,2232],{"className":2229,"code":2230,"language":2231,"meta":90,"style":90},"language-css shiki shiki-themes dracula","@font-face {\n  font-family: \"Inter\";\n  src: url(\"\u002Ffonts\u002Finter.woff2\") format(\"woff2\");\n  font-display: swap;\n}\n\n\u002F* Fallback com métricas ajustadas para evitar CLS *\u002F\n@font-face {\n  font-family: \"Inter Fallback\";\n  src: local(\"Arial\");\n  size-adjust: 107%;\n  ascent-override: 90%;\n  descent-override: 22%;\n  line-gap-override: 0%;\n}\n\nbody {\n  font-family: \"Inter\", \"Inter Fallback\", sans-serif;\n}\n","css",[20,2233,2234,2240,2258,2293,2306,2311,2315,2320,2326,2341,2361,2376,2390,2404,2418,2422,2426,2433,2460],{"__ignoreMap":90},[94,2235,2236,2238],{"class":96,"line":97},[94,2237,2139],{"class":104},[94,2239,885],{"class":100},[94,2241,2242,2246,2248,2250,2253,2255],{"class":96,"line":128},[94,2243,2245],{"class":2244},"sLL85","  font-family",[94,2247,370],{"class":104},[94,2249,750],{"class":115},[94,2251,2252],{"class":119},"Inter",[94,2254,116],{"class":115},[94,2256,2257],{"class":100},";\n",[94,2259,2260,2263,2265,2268,2270,2272,2274,2276,2279,2282,2284,2286,2289,2291],{"class":96,"line":134},[94,2261,2262],{"class":2244},"  src",[94,2264,370],{"class":104},[94,2266,2267],{"class":2244}," url",[94,2269,590],{"class":100},[94,2271,116],{"class":115},[94,2273,2186],{"class":119},[94,2275,116],{"class":115},[94,2277,2278],{"class":100},") ",[94,2280,2281],{"class":2244},"format",[94,2283,590],{"class":100},[94,2285,116],{"class":115},[94,2287,2288],{"class":119},"woff2",[94,2290,116],{"class":115},[94,2292,645],{"class":100},[94,2294,2295,2298,2300,2304],{"class":96,"line":140},[94,2296,2297],{"class":2244},"  font-display",[94,2299,370],{"class":104},[94,2301,2303],{"class":2302},"sIQBb"," swap",[94,2305,2257],{"class":100},[94,2307,2308],{"class":96,"line":146},[94,2309,2310],{"class":100},"}\n",[94,2312,2313],{"class":96,"line":152},[94,2314,567],{"emptyLinePlaceholder":566},[94,2316,2317],{"class":96,"line":158},[94,2318,2319],{"class":396},"\u002F* Fallback com métricas ajustadas para evitar CLS *\u002F\n",[94,2321,2322,2324],{"class":96,"line":164},[94,2323,2139],{"class":104},[94,2325,885],{"class":100},[94,2327,2328,2330,2332,2334,2337,2339],{"class":96,"line":170},[94,2329,2245],{"class":2244},[94,2331,370],{"class":104},[94,2333,750],{"class":115},[94,2335,2336],{"class":119},"Inter Fallback",[94,2338,116],{"class":115},[94,2340,2257],{"class":100},[94,2342,2343,2345,2347,2350,2352,2354,2357,2359],{"class":96,"line":176},[94,2344,2262],{"class":2244},[94,2346,370],{"class":104},[94,2348,2349],{"class":2244}," local",[94,2351,590],{"class":100},[94,2353,116],{"class":115},[94,2355,2356],{"class":119},"Arial",[94,2358,116],{"class":115},[94,2360,645],{"class":100},[94,2362,2363,2366,2368,2371,2374],{"class":96,"line":182},[94,2364,2365],{"class":2244},"  size-adjust",[94,2367,370],{"class":104},[94,2369,2370],{"class":2302}," 107",[94,2372,2373],{"class":104},"%",[94,2375,2257],{"class":100},[94,2377,2378,2381,2383,2386,2388],{"class":96,"line":188},[94,2379,2380],{"class":100},"  ascent-override",[94,2382,370],{"class":104},[94,2384,2385],{"class":2302}," 90",[94,2387,2373],{"class":104},[94,2389,2257],{"class":100},[94,2391,2392,2395,2397,2400,2402],{"class":96,"line":194},[94,2393,2394],{"class":100},"  descent-override",[94,2396,370],{"class":104},[94,2398,2399],{"class":2302}," 22",[94,2401,2373],{"class":104},[94,2403,2257],{"class":100},[94,2405,2406,2409,2411,2414,2416],{"class":96,"line":200},[94,2407,2408],{"class":100},"  line-gap-override",[94,2410,370],{"class":104},[94,2412,2413],{"class":2302}," 0",[94,2415,2373],{"class":104},[94,2417,2257],{"class":100},[94,2419,2420],{"class":96,"line":206},[94,2421,2310],{"class":100},[94,2423,2424],{"class":96,"line":212},[94,2425,567],{"emptyLinePlaceholder":566},[94,2427,2428,2431],{"class":96,"line":218},[94,2429,2430],{"class":104},"body",[94,2432,885],{"class":100},[94,2434,2435,2437,2439,2441,2443,2445,2447,2449,2451,2453,2455,2458],{"class":96,"line":224},[94,2436,2245],{"class":2244},[94,2438,370],{"class":104},[94,2440,750],{"class":115},[94,2442,2252],{"class":119},[94,2444,116],{"class":115},[94,2446,1019],{"class":100},[94,2448,116],{"class":115},[94,2450,2336],{"class":119},[94,2452,116],{"class":115},[94,2454,1019],{"class":100},[94,2456,2457],{"class":2302},"sans-serif",[94,2459,2257],{"class":100},[94,2461,2462],{"class":96,"line":773},[94,2463,2310],{"class":100},[16,2465,282,2466,2469,2470,1019,2472,2475],{},[20,2467,2468],{},"font-display: swap"," mostra o texto na hora usando a fonte de fallback e troca para a fonte web quando ela carrega. Para a troca não deslocar nada, você ajusta as métricas da fonte de fallback (",[20,2471,2143],{},[20,2473,2474],{},"ascent-override"," e as demais) para que ela ocupe o mesmo espaço da fonte web.",[16,2477,2478,2479,2482],{},"Se a fonte não for crítica, use ",[20,2480,2481],{},"font-display: optional",". Nesse caso, a fonte web só é usada se carregar em cerca de 100 ms. Se demorar mais, o navegador mantém a fallback nessa navegação, e a troca de fonte deixa de ser fonte de CLS.",[16,2484,2485,2486,2489],{},"O terceiro caso são ",[1947,2487,2488],{},"banners, anúncios e embeds injetados sem espaço reservado",". Quando um script de terceiro insere um anúncio depois que a página já renderizou, o conteúdo abaixo é empurrado.",[85,2491,2493],{"className":87,"code":2492,"language":89,"meta":90,"style":90},"\u003C!-- Ruim: slot de anúncio sem dimensões -->\n\u003Cdiv id=\"ad-slot\">\u003C\u002Fdiv>\n\u003Cscript>\n  loadAd(\"ad-slot\");\n\u003C\u002Fscript>\n",[20,2494,2495,2500,2526,2534,2549],{"__ignoreMap":90},[94,2496,2497],{"class":96,"line":97},[94,2498,2499],{"class":396},"\u003C!-- Ruim: slot de anúncio sem dimensões -->\n",[94,2501,2502,2504,2507,2510,2512,2514,2517,2519,2522,2524],{"class":96,"line":128},[94,2503,101],{"class":100},[94,2505,2506],{"class":104},"div",[94,2508,2509],{"class":108}," id",[94,2511,112],{"class":104},[94,2513,116],{"class":115},[94,2515,2516],{"class":119},"ad-slot",[94,2518,116],{"class":115},[94,2520,2521],{"class":100},">\u003C\u002F",[94,2523,2506],{"class":104},[94,2525,125],{"class":100},[94,2527,2528,2530,2532],{"class":96,"line":134},[94,2529,101],{"class":100},[94,2531,105],{"class":104},[94,2533,125],{"class":100},[94,2535,2536,2539,2541,2543,2545,2547],{"class":96,"line":140},[94,2537,2538],{"class":325},"  loadAd",[94,2540,590],{"class":100},[94,2542,116],{"class":115},[94,2544,2516],{"class":119},[94,2546,116],{"class":115},[94,2548,645],{"class":100},[94,2550,2551,2553,2555],{"class":96,"line":146},[94,2552,227],{"class":100},[94,2554,105],{"class":104},[94,2556,125],{"class":100},[85,2558,2560],{"className":87,"code":2559,"language":89,"meta":90,"style":90},"\u003C!-- Bom: espaço reservado com min-height ou aspect-ratio -->\n\u003Cdiv\n  id=\"ad-slot\"\n  style=\"min-height: 250px; width: 300px; background-color: #f3f4f6;\"\n>\n  \u003C!-- Anúncio será injetado aqui -->\n\u003C\u002Fdiv>\n",[20,2561,2562,2567,2574,2587,2601,2605,2610],{"__ignoreMap":90},[94,2563,2564],{"class":96,"line":97},[94,2565,2566],{"class":396},"\u003C!-- Bom: espaço reservado com min-height ou aspect-ratio -->\n",[94,2568,2569,2571],{"class":96,"line":128},[94,2570,101],{"class":100},[94,2572,2573],{"class":104},"div\n",[94,2575,2576,2579,2581,2583,2585],{"class":96,"line":134},[94,2577,2578],{"class":108},"  id",[94,2580,112],{"class":104},[94,2582,116],{"class":115},[94,2584,2516],{"class":119},[94,2586,422],{"class":115},[94,2588,2589,2592,2594,2596,2599],{"class":96,"line":140},[94,2590,2591],{"class":108},"  style",[94,2593,112],{"class":104},[94,2595,116],{"class":115},[94,2597,2598],{"class":119},"min-height: 250px; width: 300px; background-color: #f3f4f6;",[94,2600,422],{"class":115},[94,2602,2603],{"class":96,"line":146},[94,2604,125],{"class":100},[94,2606,2607],{"class":96,"line":152},[94,2608,2609],{"class":396},"  \u003C!-- Anúncio será injetado aqui -->\n",[94,2611,2612,2614,2616],{"class":96,"line":158},[94,2613,227],{"class":100},[94,2615,2506],{"class":104},[94,2617,125],{"class":100},[16,2619,2620,2621,2624],{},"Em embeds responsivos, como vídeos do YouTube, use ",[20,2622,2623],{},"aspect-ratio"," no CSS para reservar o espaço proporcional antes do carregamento.",[25,2626,2628],{"id":2627},"largest-contentful-paint-lcp","Largest Contentful Paint (LCP)",[61,2630],{":copyright":2631,"alt":2632,"height":2052,"src":2633,"width":2054},"{\"title\": \"Métrica de LCP do Web Vitals\", \"licenseId\": \"cc4\", \"author\": {\"name\": \"web.dev\", \"url\": \"https:\u002F\u002Fweb.dev\" }}","Ilustração do LCP destacando o maior elemento de conteúdo visível na viewport","\u002Fimages\u002Fblog\u002Fseo\u002Fweb-vitals\u002Flcp-largest-contentful-paint.webp",[16,2635,2636,2637,2640],{},"O LCP mede quanto tempo a página leva para renderizar o ",[1947,2638,2639],{},"maior elemento de conteúdo visível"," na viewport. Esse elemento pode ser uma imagem, um bloco de texto, um vídeo ou um SVG.",[16,2642,2643,2644,2647,2648,2651],{},"Um LCP ",[1947,2645,2646],{},"bom"," é de ",[1947,2649,2650],{},"2,5 segundos ou menos"," no percentil 75 das visitas reais.",[848,2653,2655],{"id":2654},"o-que-conta-como-lcp","O que conta como LCP",[16,2657,2658],{},"O navegador considera candidatos a LCP:",[240,2660,2661,2671,2677,2683],{},[243,2662,2663,2664,1019,2667,2670],{},"Imagens (",[20,2665,2666],{},"\u003Cimg>",[20,2668,2669],{},"\u003Cpicture>",")",[243,2672,2673,2674],{},"Elementos ",[20,2675,2676],{},"\u003Cvideo>",[243,2678,2679,2680,2670],{},"Elementos com imagem de fundo via CSS (",[20,2681,2682],{},"background-image",[243,2684,2685],{},"Blocos de texto (parágrafos e títulos)",[16,2687,2688],{},"Na maioria das páginas, o LCP é a imagem principal (hero image) ou o título.",[848,2690,2692],{"id":2691},"causas-comuns-de-lcp-alto","Causas comuns de LCP alto",[240,2694,2695,2698,2705,2708],{},[243,2696,2697],{},"TTFB alto: o servidor demora para responder à requisição inicial.",[243,2699,2700,2701,2704],{},"Imagem principal com lazy loading: usar ",[20,2702,2703],{},"loading=\"lazy\""," na imagem acima da dobra atrasa o LCP.",[243,2706,2707],{},"Recursos que bloqueiam a renderização: CSS ou JS pesado antes do conteúdo crítico.",[243,2709,2710],{},"Imagem pesada: arquivos grandes em formatos não otimizados.",[848,2712,2714],{"id":2713},"como-melhorar-o-lcp","Como melhorar o LCP",[16,2716,2717,2718,2721],{},"Use ",[20,2719,2720],{},"fetchpriority=\"high\""," na imagem principal para priorizar o download dela.",[85,2723,2725],{"className":87,"code":2724,"language":89,"meta":90,"style":90},"\u003Cimg\n  src=\"\u002Fhero.webp\"\n  fetchpriority=\"high\"\n  width=\"1600\"\n  height=\"900\"\n  alt=\"Descrição da imagem principal\"\n\u002F>\n",[20,2726,2727,2734,2747,2761,2775,2789,2803],{"__ignoreMap":90},[94,2728,2729,2731],{"class":96,"line":97},[94,2730,101],{"class":100},[94,2732,2733],{"class":104},"img\n",[94,2735,2736,2738,2740,2742,2745],{"class":96,"line":128},[94,2737,2262],{"class":108},[94,2739,112],{"class":104},[94,2741,116],{"class":115},[94,2743,2744],{"class":119},"\u002Fhero.webp",[94,2746,422],{"class":115},[94,2748,2749,2752,2754,2756,2759],{"class":96,"line":134},[94,2750,2751],{"class":108},"  fetchpriority",[94,2753,112],{"class":104},[94,2755,116],{"class":115},[94,2757,2758],{"class":119},"high",[94,2760,422],{"class":115},[94,2762,2763,2766,2768,2770,2773],{"class":96,"line":140},[94,2764,2765],{"class":108},"  width",[94,2767,112],{"class":104},[94,2769,116],{"class":115},[94,2771,2772],{"class":119},"1600",[94,2774,422],{"class":115},[94,2776,2777,2780,2782,2784,2787],{"class":96,"line":146},[94,2778,2779],{"class":108},"  height",[94,2781,112],{"class":104},[94,2783,116],{"class":115},[94,2785,2786],{"class":119},"900",[94,2788,422],{"class":115},[94,2790,2791,2794,2796,2798,2801],{"class":96,"line":152},[94,2792,2793],{"class":108},"  alt",[94,2795,112],{"class":104},[94,2797,116],{"class":115},[94,2799,2800],{"class":119},"Descrição da imagem principal",[94,2802,422],{"class":115},[94,2804,2805],{"class":96,"line":158},[94,2806,2226],{"class":100},[16,2808,2809,2810,2812,2813,2816],{},"Não use ",[20,2811,2703],{}," na imagem do LCP. Deixe que ela carregue de imediato (ou use ",[20,2814,2815],{},"loading=\"eager\""," de forma explícita).",[16,2818,2819],{},"Se o navegador não descobre a imagem principal cedo, pré-carregue-a.",[85,2821,2823],{"className":87,"code":2822,"language":89,"meta":90,"style":90},"\u003Clink\n  rel=\"preload\"\n  as=\"image\"\n  href=\"\u002Fhero.webp\"\n  imagesrcset=\"\u002Fhero-400.webp 400w, \u002Fhero-800.webp 800w, \u002Fhero-1200.webp 1200w\"\n  imagesizes=\"(max-width: 600px) 100vw, 50vw\"\n\u002F>\n",[20,2824,2825,2831,2843,2855,2867,2881,2895],{"__ignoreMap":90},[94,2826,2827,2829],{"class":96,"line":97},[94,2828,101],{"class":100},[94,2830,2160],{"class":104},[94,2832,2833,2835,2837,2839,2841],{"class":96,"line":128},[94,2834,2165],{"class":108},[94,2836,112],{"class":104},[94,2838,116],{"class":115},[94,2840,2172],{"class":119},[94,2842,422],{"class":115},[94,2844,2845,2847,2849,2851,2853],{"class":96,"line":134},[94,2846,2193],{"class":108},[94,2848,112],{"class":104},[94,2850,116],{"class":115},[94,2852,467],{"class":119},[94,2854,422],{"class":115},[94,2856,2857,2859,2861,2863,2865],{"class":96,"line":140},[94,2858,2179],{"class":108},[94,2860,112],{"class":104},[94,2862,116],{"class":115},[94,2864,2744],{"class":119},[94,2866,422],{"class":115},[94,2868,2869,2872,2874,2876,2879],{"class":96,"line":146},[94,2870,2871],{"class":108},"  imagesrcset",[94,2873,112],{"class":104},[94,2875,116],{"class":115},[94,2877,2878],{"class":119},"\u002Fhero-400.webp 400w, \u002Fhero-800.webp 800w, \u002Fhero-1200.webp 1200w",[94,2880,422],{"class":115},[94,2882,2883,2886,2888,2890,2893],{"class":96,"line":152},[94,2884,2885],{"class":108},"  imagesizes",[94,2887,112],{"class":104},[94,2889,116],{"class":115},[94,2891,2892],{"class":119},"(max-width: 600px) 100vw, 50vw",[94,2894,422],{"class":115},[94,2896,2897],{"class":96,"line":158},[94,2898,2226],{"class":100},[16,2900,2901,2902,49,2905,2908,2909,2912],{},"Converta as imagens para ",[1947,2903,2904],{},"AVIF",[1947,2906,2907],{},"WebP"," e use ",[20,2910,2911],{},"srcset"," para servir o tamanho certo a cada dispositivo.",[85,2914,2916],{"className":87,"code":2915,"language":89,"meta":90,"style":90},"\u003Cpicture>\n  \u003Csource srcset=\"\u002Fhero.avif\" type=\"image\u002Favif\" \u002F>\n  \u003Csource srcset=\"\u002Fhero.webp\" type=\"image\u002Fwebp\" \u002F>\n  \u003Cimg\n    src=\"\u002Fhero.jpg\"\n    fetchpriority=\"high\"\n    width=\"1600\"\n    height=\"900\"\n    alt=\"Descrição da imagem principal\"\n  \u002F>\n\u003C\u002Fpicture>\n",[20,2917,2918,2927,2959,2988,2994,3008,3021,3034,3047,3060,3064],{"__ignoreMap":90},[94,2919,2920,2922,2925],{"class":96,"line":97},[94,2921,101],{"class":100},[94,2923,2924],{"class":104},"picture",[94,2926,125],{"class":100},[94,2928,2929,2931,2934,2937,2939,2941,2944,2946,2948,2950,2952,2955,2957],{"class":96,"line":128},[94,2930,1627],{"class":100},[94,2932,2933],{"class":104},"source",[94,2935,2936],{"class":108}," srcset",[94,2938,112],{"class":104},[94,2940,116],{"class":115},[94,2942,2943],{"class":119},"\u002Fhero.avif",[94,2945,116],{"class":115},[94,2947,109],{"class":108},[94,2949,112],{"class":104},[94,2951,116],{"class":115},[94,2953,2954],{"class":119},"image\u002Favif",[94,2956,116],{"class":115},[94,2958,1780],{"class":100},[94,2960,2961,2963,2965,2967,2969,2971,2973,2975,2977,2979,2981,2984,2986],{"class":96,"line":134},[94,2962,1627],{"class":100},[94,2964,2933],{"class":104},[94,2966,2936],{"class":108},[94,2968,112],{"class":104},[94,2970,116],{"class":115},[94,2972,2744],{"class":119},[94,2974,116],{"class":115},[94,2976,109],{"class":108},[94,2978,112],{"class":104},[94,2980,116],{"class":115},[94,2982,2983],{"class":119},"image\u002Fwebp",[94,2985,116],{"class":115},[94,2987,1780],{"class":100},[94,2989,2990,2992],{"class":96,"line":140},[94,2991,1627],{"class":100},[94,2993,2733],{"class":104},[94,2995,2996,2999,3001,3003,3006],{"class":96,"line":146},[94,2997,2998],{"class":108},"    src",[94,3000,112],{"class":104},[94,3002,116],{"class":115},[94,3004,3005],{"class":119},"\u002Fhero.jpg",[94,3007,422],{"class":115},[94,3009,3010,3013,3015,3017,3019],{"class":96,"line":152},[94,3011,3012],{"class":108},"    fetchpriority",[94,3014,112],{"class":104},[94,3016,116],{"class":115},[94,3018,2758],{"class":119},[94,3020,422],{"class":115},[94,3022,3023,3026,3028,3030,3032],{"class":96,"line":158},[94,3024,3025],{"class":108},"    width",[94,3027,112],{"class":104},[94,3029,116],{"class":115},[94,3031,2772],{"class":119},[94,3033,422],{"class":115},[94,3035,3036,3039,3041,3043,3045],{"class":96,"line":164},[94,3037,3038],{"class":108},"    height",[94,3040,112],{"class":104},[94,3042,116],{"class":115},[94,3044,2786],{"class":119},[94,3046,422],{"class":115},[94,3048,3049,3052,3054,3056,3058],{"class":96,"line":170},[94,3050,3051],{"class":108},"    alt",[94,3053,112],{"class":104},[94,3055,116],{"class":115},[94,3057,2800],{"class":119},[94,3059,422],{"class":115},[94,3061,3062],{"class":96,"line":176},[94,3063,1663],{"class":100},[94,3065,3066,3068,3070],{"class":96,"line":182},[94,3067,227],{"class":100},[94,3069,2924],{"class":104},[94,3071,125],{"class":100},[25,3073,3075],{"id":3074},"interaction-to-next-paint-inp","Interaction to Next Paint (INP)",[61,3077],{":copyright":3078,"alt":3079,"height":3080,"src":3081,"width":3082},"{\"title\": \"Métrica de INP do Web Vitals\", \"licenseId\": \"cc4\", \"author\": {\"name\": \"web.dev\", \"url\": \"https:\u002F\u002Fweb.dev\" }}","Ilustração do INP mostrando o tempo entre a interação do usuário e a próxima pintura na tela",194,"\u002Fimages\u002Fblog\u002Fseo\u002Fweb-vitals\u002Finp-interaction-to-next-paint.webp",259,[16,3084,3085,3086,3089],{},"O INP mede a ",[1947,3087,3088],{},"responsividade"," da página. Ele observa a latência de todas as interações (cliques, toques e teclas) durante a visita e reporta o valor da interação mais lenta, desconsiderando casos isolados muito fora da curva.",[16,3091,3092,3093,2647,3095,3098],{},"Um INP ",[1947,3094,2646],{},[1947,3096,3097],{},"200 ms ou menos"," no percentil 75.",[16,3100,3101,3102,3105],{},"O INP substituiu o FID (First Input Delay) como Core Web Vital em ",[1947,3103,3104],{},"março de 2024",". O FID media só o atraso da primeira interação. O INP considera todas as interações e mede o tempo completo, do início da interação até a próxima pintura com retorno visual.",[848,3107,3109],{"id":3108},"o-que-causa-inp-alto","O que causa INP alto",[240,3111,3112,3115,3118],{},[243,3113,3114],{},"Long tasks: tarefas JavaScript que bloqueiam a thread principal por mais de 50 ms.",[243,3116,3117],{},"Handlers de input pesados: código que roda a cada clique, tecla digitada ou rolagem.",[243,3119,3120],{},"Scripts de terceiros: analytics, anúncios e widgets sociais disputando a thread principal.",[848,3122,3124],{"id":3123},"como-melhorar-o-inp","Como melhorar o INP",[16,3126,3127,3128,3131],{},"Quebre tarefas longas em pedaços menores e use ",[20,3129,3130],{},"scheduler.yield()"," para devolver o controle ao navegador entre eles.",[85,3133,3135],{"className":373,"code":3134,"language":375,"meta":90,"style":90},"\u002F\u002F Helper com fallback para navegadores sem scheduler.yield()\nfunction yieldToMain() {\n  if (\"scheduler\" in window && \"yield\" in scheduler) {\n    return scheduler.yield();\n  }\n  return new Promise((resolve) => setTimeout(resolve, 0));\n}\n\nasync function processJobs(jobQueue) {\n  for (const job of jobQueue) {\n    job();\n    await yieldToMain();\n  }\n}\n",[20,3136,3137,3142,3153,3189,3201,3205,3242,3246,3250,3269,3287,3294,3303,3307],{"__ignoreMap":90},[94,3138,3139],{"class":96,"line":97},[94,3140,3141],{"class":396},"\u002F\u002F Helper com fallback para navegadores sem scheduler.yield()\n",[94,3143,3144,3147,3150],{"class":96,"line":128},[94,3145,3146],{"class":104},"function",[94,3148,3149],{"class":325}," yieldToMain",[94,3151,3152],{"class":100},"() {\n",[94,3154,3155,3158,3161,3163,3166,3168,3171,3174,3177,3179,3182,3184,3186],{"class":96,"line":134},[94,3156,3157],{"class":104},"  if",[94,3159,3160],{"class":100}," (",[94,3162,116],{"class":115},[94,3164,3165],{"class":119},"scheduler",[94,3167,116],{"class":115},[94,3169,3170],{"class":104}," in",[94,3172,3173],{"class":100}," window ",[94,3175,3176],{"class":104},"&&",[94,3178,750],{"class":115},[94,3180,3181],{"class":119},"yield",[94,3183,116],{"class":115},[94,3185,3170],{"class":104},[94,3187,3188],{"class":100}," scheduler) {\n",[94,3190,3191,3194,3197,3199],{"class":96,"line":140},[94,3192,3193],{"class":104},"    return",[94,3195,3196],{"class":100}," scheduler.",[94,3198,3181],{"class":325},[94,3200,561],{"class":100},[94,3202,3203],{"class":96,"line":146},[94,3204,221],{"class":100},[94,3206,3207,3210,3214,3218,3221,3225,3227,3230,3233,3236,3239],{"class":96,"line":152},[94,3208,3209],{"class":104},"  return",[94,3211,3213],{"class":3212},"sviCg"," new",[94,3215,3217],{"class":3216},"sCp4m"," Promise",[94,3219,3220],{"class":100},"((",[94,3222,3224],{"class":3223},"sGEwX","resolve",[94,3226,2278],{"class":100},[94,3228,3229],{"class":104},"=>",[94,3231,3232],{"class":325}," setTimeout",[94,3234,3235],{"class":100},"(resolve, ",[94,3237,3238],{"class":2302},"0",[94,3240,3241],{"class":100},"));\n",[94,3243,3244],{"class":96,"line":158},[94,3245,2310],{"class":100},[94,3247,3248],{"class":96,"line":164},[94,3249,567],{"emptyLinePlaceholder":566},[94,3251,3252,3255,3258,3261,3263,3266],{"class":96,"line":170},[94,3253,3254],{"class":104},"async",[94,3256,3257],{"class":104}," function",[94,3259,3260],{"class":325}," processJobs",[94,3262,590],{"class":100},[94,3264,3265],{"class":3223},"jobQueue",[94,3267,3268],{"class":100},") {\n",[94,3270,3271,3274,3276,3278,3281,3284],{"class":96,"line":176},[94,3272,3273],{"class":104},"  for",[94,3275,3160],{"class":100},[94,3277,550],{"class":104},[94,3279,3280],{"class":100}," job ",[94,3282,3283],{"class":104},"of",[94,3285,3286],{"class":100}," jobQueue) {\n",[94,3288,3289,3292],{"class":96,"line":182},[94,3290,3291],{"class":325},"    job",[94,3293,561],{"class":100},[94,3295,3296,3299,3301],{"class":96,"line":188},[94,3297,3298],{"class":104},"    await",[94,3300,3149],{"class":325},[94,3302,561],{"class":100},[94,3304,3305],{"class":96,"line":194},[94,3306,221],{"class":100},[94,3308,3309],{"class":96,"line":200},[94,3310,2310],{"class":100},[16,3312,2717,3313,3316],{},[1947,3314,3315],{},"debounce"," em handlers de input que disparam com frequência.",[85,3318,3320],{"className":373,"code":3319,"language":375,"meta":90,"style":90},"function debounce(fn, delay) {\n  let timeout;\n  return (...args) => {\n    clearTimeout(timeout);\n    timeout = setTimeout(() => fn(...args), delay);\n  };\n}\n\ninput.addEventListener(\n  \"input\",\n  debounce((e) => {\n    searchAPI(e.target.value);\n  }, 300)\n);\n",[20,3321,3322,3341,3349,3367,3375,3399,3404,3408,3412,3423,3435,3451,3459,3470],{"__ignoreMap":90},[94,3323,3324,3326,3329,3331,3334,3336,3339],{"class":96,"line":97},[94,3325,3146],{"class":104},[94,3327,3328],{"class":325}," debounce",[94,3330,590],{"class":100},[94,3332,3333],{"class":3223},"fn",[94,3335,1019],{"class":100},[94,3337,3338],{"class":3223},"delay",[94,3340,3268],{"class":100},[94,3342,3343,3346],{"class":96,"line":128},[94,3344,3345],{"class":104},"  let",[94,3347,3348],{"class":100}," timeout;\n",[94,3350,3351,3353,3355,3358,3361,3363,3365],{"class":96,"line":134},[94,3352,3209],{"class":104},[94,3354,3160],{"class":100},[94,3356,3357],{"class":104},"...",[94,3359,3360],{"class":3223},"args",[94,3362,2278],{"class":100},[94,3364,3229],{"class":104},[94,3366,885],{"class":100},[94,3368,3369,3372],{"class":96,"line":140},[94,3370,3371],{"class":325},"    clearTimeout",[94,3373,3374],{"class":100},"(timeout);\n",[94,3376,3377,3380,3382,3384,3387,3389,3392,3394,3396],{"class":96,"line":146},[94,3378,3379],{"class":100},"    timeout ",[94,3381,112],{"class":104},[94,3383,3232],{"class":325},[94,3385,3386],{"class":100},"(() ",[94,3388,3229],{"class":104},[94,3390,3391],{"class":325}," fn",[94,3393,590],{"class":100},[94,3395,3357],{"class":104},[94,3397,3398],{"class":100},"args), delay);\n",[94,3400,3401],{"class":96,"line":152},[94,3402,3403],{"class":100},"  };\n",[94,3405,3406],{"class":96,"line":158},[94,3407,2310],{"class":100},[94,3409,3410],{"class":96,"line":164},[94,3411,567],{"emptyLinePlaceholder":566},[94,3413,3414,3417,3420],{"class":96,"line":170},[94,3415,3416],{"class":100},"input.",[94,3418,3419],{"class":325},"addEventListener",[94,3421,3422],{"class":100},"(\n",[94,3424,3425,3428,3431,3433],{"class":96,"line":176},[94,3426,3427],{"class":115},"  \"",[94,3429,3430],{"class":119},"input",[94,3432,116],{"class":115},[94,3434,902],{"class":100},[94,3436,3437,3440,3442,3445,3447,3449],{"class":96,"line":182},[94,3438,3439],{"class":325},"  debounce",[94,3441,3220],{"class":100},[94,3443,3444],{"class":3223},"e",[94,3446,2278],{"class":100},[94,3448,3229],{"class":104},[94,3450,885],{"class":100},[94,3452,3453,3456],{"class":96,"line":188},[94,3454,3455],{"class":325},"    searchAPI",[94,3457,3458],{"class":100},"(e.target.value);\n",[94,3460,3461,3464,3467],{"class":96,"line":194},[94,3462,3463],{"class":100},"  }, ",[94,3465,3466],{"class":2302},"300",[94,3468,3469],{"class":100},")\n",[94,3471,3472],{"class":96,"line":200},[94,3473,645],{"class":100},[16,3475,3476],{},"Adie o JavaScript não crítico para depois que a página estiver interativa.",[85,3478,3480],{"className":87,"code":3479,"language":89,"meta":90,"style":90},"\u003Cscript src=\"\u002Fanalytics.js\" defer>\u003C\u002Fscript>\n\u003Cscript src=\"\u002Fchat-widget.js\" async>\u003C\u002Fscript>\n",[20,3481,3482,3508],{"__ignoreMap":90},[94,3483,3484,3486,3488,3490,3492,3494,3497,3499,3502,3504,3506],{"class":96,"line":97},[94,3485,101],{"class":100},[94,3487,105],{"class":104},[94,3489,2085],{"class":108},[94,3491,112],{"class":104},[94,3493,116],{"class":115},[94,3495,3496],{"class":119},"\u002Fanalytics.js",[94,3498,116],{"class":115},[94,3500,3501],{"class":108}," defer",[94,3503,2521],{"class":100},[94,3505,105],{"class":104},[94,3507,125],{"class":100},[94,3509,3510,3512,3514,3516,3518,3520,3523,3525,3528,3530,3532],{"class":96,"line":128},[94,3511,101],{"class":100},[94,3513,105],{"class":104},[94,3515,2085],{"class":108},[94,3517,112],{"class":104},[94,3519,116],{"class":115},[94,3521,3522],{"class":119},"\u002Fchat-widget.js",[94,3524,116],{"class":115},[94,3526,3527],{"class":108}," async",[94,3529,2521],{"class":100},[94,3531,105],{"class":104},[94,3533,125],{"class":100},[25,3535,3537],{"id":3536},"tbt","TBT",[16,3539,282,3540,3543,3544,3547],{},[1947,3541,3542],{},"TBT (Total Blocking Time)"," não é um Core Web Vital. Ele é uma métrica de ",[1947,3545,3546],{},"laboratório",", usada pelo Lighthouse para avaliar a performance em testes controlados.",[16,3549,3550],{},"O TBT soma o tempo em que a thread principal ficou bloqueada por tarefas longas (acima de 50 ms) entre o FCP (First Contentful Paint) e o momento em que a página fica interativa.",[16,3552,3553,3554,3557],{},"Ele serve como ",[1947,3555,3556],{},"indicador do INP"," quando você não tem dados de campo suficientes. Se o TBT está alto no Lighthouse, é provável que o INP em produção também esteja ruim.",[16,3559,3560,3561,370],{},"Outras métricas do Web Vitals que ",[1947,3562,3563],{},"não são Core",[240,3565,3566,3569],{},[243,3567,3568],{},"TTFB (Time to First Byte): tempo até o primeiro byte da resposta do servidor.",[243,3570,3571],{},"FCP (First Contentful Paint): tempo até o primeiro conteúdo ser renderizado.",[16,3573,3574],{},"Elas ajudam no diagnóstico, mas não entram na avaliação de \"passou ou não passou\" dos Core Web Vitals.",[25,3576,3578],{"id":3577},"o-ciclo-de-vida-das-métricas-do-web-vitals","O ciclo de vida das métricas do Web Vitals",[61,3580],{":copyright":3581,"alt":3582,"height":3583,"src":3584,"width":3585},"{\"title\": \"The stages of the Core Web Vitals lifecycle\", \"licenseId\": \"cc4\", \"author\": {\"name\": \"web.dev\", \"url\": \"https:\u002F\u002Fweb.dev\" }}","O ciclo de vida das métricas dos Web Vitals, com as fases Experimental, Pending e Stable",61,"\u002Fimages\u002Fblog\u002Fseo\u002Fweb-vitals\u002Fo-ciclo-de-vida-dos-web-vitals.webp",600,[16,3587,3588],{},"As métricas passam por três fases até virarem Core Web Vitals estáveis:",[240,3590,3591,3594,3597],{},[243,3592,3593],{},"Experimental: a métrica está em teste e coletando dados. Ainda não é recomendada como indicador de performance em produção.",[243,3595,3596],{},"Pending: a métrica se mostrou útil e está pronta para substituir uma existente, mas o Google dá um prazo para a comunidade se ajustar.",[243,3598,3599],{},"Stable: a métrica é oficialmente um Core Web Vital.",[16,3601,3602,3603,3606,3607,1004],{},"A troca do ",[1947,3604,3605],{},"FID pelo INP"," é o exemplo mais recente. O INP começou como experimental, passou para pending em 2023 e se tornou stable em ",[1947,3608,3104],{},[25,3610,3612],{"id":3611},"como-medir","Como medir",[16,3614,3615],{},"Existem duas formas de medir os Core Web Vitals:",[240,3617,3618,3621],{},[243,3619,3620],{},"Dados de campo: métricas coletadas de usuários reais, pelo Chrome User Experience Report (CrUX). É o que o Google usa na avaliação.",[243,3622,3623],{},"Dados de laboratório: métricas coletadas em ambiente controlado, pelo Lighthouse ou pelo Chrome DevTools. Servem para diagnóstico e para testar antes de publicar.",[16,3625,3626,3627,3630],{},"O Google avalia os Core Web Vitals no ",[1947,3628,3629],{},"percentil 75"," das visitas. Na prática, 75% das experiências reais precisam estar na faixa \"boa\" para a página passar.",[848,3632,3634],{"id":3633},"ferramentas-para-medir","Ferramentas para medir",[240,3636,3637,3640,3643,3646],{},[243,3638,3639],{},"PageSpeed Insights: mostra dados de campo (CrUX) e de laboratório (Lighthouse) de uma URL.",[243,3641,3642],{},"Google Search Console: o relatório de Core Web Vitals mostra quais páginas do site passam ou falham, com base em dados de usuários reais.",[243,3644,3645],{},"Lighthouse: ferramenta de auditoria do Chrome DevTools. Gera métricas de laboratório, incluindo o TBT.",[243,3647,3648],{},"Biblioteca web-vitals: pacote npm para coletar as métricas em produção.",[85,3650,3652],{"className":373,"code":3651,"language":375,"meta":90,"style":90},"import { onLCP, onINP, onCLS } from \"web-vitals\";\n\nonLCP((metric) => {\n  console.log(\"LCP:\", metric.value);\n});\n\nonINP((metric) => {\n  console.log(\"INP:\", metric.value);\n});\n\nonCLS((metric) => {\n  console.log(\"CLS:\", metric.value);\n});\n",[20,3653,3654,3674,3678,3694,3714,3718,3722,3737,3754,3758,3762,3777,3794],{"__ignoreMap":90},[94,3655,3656,3659,3662,3665,3667,3670,3672],{"class":96,"line":97},[94,3657,3658],{"class":104},"import",[94,3660,3661],{"class":100}," { onLCP, onINP, onCLS } ",[94,3663,3664],{"class":104},"from",[94,3666,750],{"class":115},[94,3668,3669],{"class":119},"web-vitals",[94,3671,116],{"class":115},[94,3673,2257],{"class":100},[94,3675,3676],{"class":96,"line":128},[94,3677,567],{"emptyLinePlaceholder":566},[94,3679,3680,3683,3685,3688,3690,3692],{"class":96,"line":134},[94,3681,3682],{"class":325},"onLCP",[94,3684,3220],{"class":100},[94,3686,3687],{"class":3223},"metric",[94,3689,2278],{"class":100},[94,3691,3229],{"class":104},[94,3693,885],{"class":100},[94,3695,3696,3699,3702,3704,3706,3709,3711],{"class":96,"line":140},[94,3697,3698],{"class":100},"  console.",[94,3700,3701],{"class":325},"log",[94,3703,590],{"class":100},[94,3705,116],{"class":115},[94,3707,3708],{"class":119},"LCP:",[94,3710,116],{"class":115},[94,3712,3713],{"class":100},", metric.value);\n",[94,3715,3716],{"class":96,"line":146},[94,3717,437],{"class":100},[94,3719,3720],{"class":96,"line":152},[94,3721,567],{"emptyLinePlaceholder":566},[94,3723,3724,3727,3729,3731,3733,3735],{"class":96,"line":158},[94,3725,3726],{"class":325},"onINP",[94,3728,3220],{"class":100},[94,3730,3687],{"class":3223},[94,3732,2278],{"class":100},[94,3734,3229],{"class":104},[94,3736,885],{"class":100},[94,3738,3739,3741,3743,3745,3747,3750,3752],{"class":96,"line":164},[94,3740,3698],{"class":100},[94,3742,3701],{"class":325},[94,3744,590],{"class":100},[94,3746,116],{"class":115},[94,3748,3749],{"class":119},"INP:",[94,3751,116],{"class":115},[94,3753,3713],{"class":100},[94,3755,3756],{"class":96,"line":170},[94,3757,437],{"class":100},[94,3759,3760],{"class":96,"line":176},[94,3761,567],{"emptyLinePlaceholder":566},[94,3763,3764,3767,3769,3771,3773,3775],{"class":96,"line":182},[94,3765,3766],{"class":325},"onCLS",[94,3768,3220],{"class":100},[94,3770,3687],{"class":3223},[94,3772,2278],{"class":100},[94,3774,3229],{"class":104},[94,3776,885],{"class":100},[94,3778,3779,3781,3783,3785,3787,3790,3792],{"class":96,"line":188},[94,3780,3698],{"class":100},[94,3782,3701],{"class":325},[94,3784,590],{"class":100},[94,3786,116],{"class":115},[94,3788,3789],{"class":119},"CLS:",[94,3791,116],{"class":115},[94,3793,3713],{"class":100},[94,3795,3796],{"class":96,"line":194},[94,3797,437],{"class":100},[16,3799,3800],{},"A biblioteca entrega os valores reais de cada métrica, e você decide o que fazer com eles, por exemplo enviá-los ao seu sistema de monitoramento.",[25,3802,1482],{"id":1481},[16,3804,3805],{},"Voltando à pergunta do título: a experiência do usuário afeta o SEO do seu site?",[16,3807,3808,3809,3812,3813,3816,3817,3820],{},"Afeta, mas não tanto quanto o conteúdo. A experiência da página é um ",[1947,3810,3811],{},"sinal de ranqueamento"," no Google, mas ",[1947,3814,3815],{},"relevância e qualidade do conteúdo pesam mais",". Core Web Vitals bons funcionam como ",[1947,3818,3819],{},"critério de desempate"," entre páginas com conteúdo parecido, e ainda melhoram conversão e retenção.",[16,3822,3823,3824,3826],{},"No ",[1947,3825,1962],{},", a performance da página também conta, com menos ênfase que no Google. Ele considera velocidade de carregamento e experiência do usuário, mas prioriza a relevância do conteúdo e a autoridade do domínio.",[16,3828,3829],{},"Uma página rápida e estável também converte mais e mantém as pessoas lendo por mais tempo, e isso já justifica o trabalho nos Core Web Vitals.",[1513,3831,3832],{},"html pre.shiki code .sCdxs, html code.shiki .sCdxs{--shiki-default:#F8F8F2}html pre.shiki code .s0Tla, html code.shiki .s0Tla{--shiki-default:#FF79C6}html pre.shiki code .sY_PY, html code.shiki .sY_PY{--shiki-default:#50FA7B;--shiki-default-font-style:italic}html pre.shiki code .seVfx, html code.shiki .seVfx{--shiki-default:#E9F284}html pre.shiki code .s-mGx, html code.shiki .s-mGx{--shiki-default:#F1FA8C}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .shSDL, html code.shiki .shSDL{--shiki-default:#6272A4}html pre.shiki code .sLL85, html code.shiki .sLL85{--shiki-default:#8BE9FD}html pre.shiki code .sIQBb, html code.shiki .sIQBb{--shiki-default:#BD93F9}html pre.shiki code .sAOxA, html code.shiki .sAOxA{--shiki-default:#50FA7B}html pre.shiki code .sviCg, html code.shiki .sviCg{--shiki-default:#FF79C6;--shiki-default-font-weight:bold}html pre.shiki code .sCp4m, html code.shiki .sCp4m{--shiki-default:#8BE9FD;--shiki-default-font-style:italic}html pre.shiki code .sGEwX, html code.shiki .sGEwX{--shiki-default:#FFB86C;--shiki-default-font-style:italic}",{"title":90,"searchDepth":128,"depth":128,"links":3834},[3835,3836,3837,3840,3845,3849,3850,3851,3854],{"id":2001,"depth":128,"text":2002},{"id":2014,"depth":128,"text":2015},{"id":2046,"depth":128,"text":2047,"children":3838},[3839],{"id":2067,"depth":134,"text":2068},{"id":2627,"depth":128,"text":2628,"children":3841},[3842,3843,3844],{"id":2654,"depth":134,"text":2655},{"id":2691,"depth":134,"text":2692},{"id":2713,"depth":134,"text":2714},{"id":3074,"depth":128,"text":3075,"children":3846},[3847,3848],{"id":3108,"depth":134,"text":3109},{"id":3123,"depth":134,"text":3124},{"id":3536,"depth":128,"text":3537},{"id":3577,"depth":128,"text":3578},{"id":3611,"depth":128,"text":3612,"children":3852},[3853],{"id":3633,"depth":134,"text":3634},{"id":1481,"depth":128,"text":1482},[1547,3669],"Entenda o que são os Core Web Vitals e aprenda a medir e melhorar LCP, INP e CLS para oferecer uma experiência melhor e ajudar no SEO do site, passo a passo.","core-web-vitals-how-user-experience-affects-seo",{},"\u002Fblog\u002Fweb-vitals-como-a-experiencia-do-usuario-vai-afetar-o-seo-do-seu-site","web-vitals-como-a-experiencia-do-usuario-vai-afetar-o-seo-do-seu-site","2024-10-25",{"title":1939,"description":3856},{"loc":3859,"images":3864,"lastmod":1560},[3865,3866,3867,3868],{"loc":2053},{"loc":2633},{"loc":3081},{"loc":3584},"blog\u002Fweb-vitals-como-a-experiencia-do-usuario-vai-afetar-o-seo-do-seu-site",1798,"gJvE8xoGP-jt0Iq9WJWATYXbcHs4GIEX4RmHMUFRsHY",1791682337985]