[{"data":1,"prerenderedAt":3489},["ShallowReactive",2],{"en-seo-category-articles":3},[4,2015],{"id":5,"title":6,"articleCover":7,"articleCoverEmbed":8,"articleCoverEmbedUploadDate":8,"articleCoverHeight":9,"articleCoverWidth":10,"authorId":11,"body":12,"categoriesIds":1995,"description":1997,"enAlternateSlug":1998,"extension":1999,"meta":2000,"navigation":423,"path":2001,"ptBrAlternateSlug":2002,"publishedAt":2003,"seo":2004,"sitemap":2005,"stem":2012,"updatedAt":2011,"wordCount":2013,"__hash__":2014},"blogEn\u002Fen\u002Fblog\u002Fcore-web-vitals-how-user-experience-affects-seo.md","Core Web Vitals and SEO: How User Experience Affects Your Site","\u002Fimages\u002Fen\u002Fblog\u002Fseo\u002Fweb-vitals\u002Fcore-web-vitals-how-user-experience-affects-seo.webp",null,720,1280,"thiago-nunes-batista",{"type":13,"value":14,"toc":1973},"minimark",[15,24,40,51,54,72,77,80,83,86,90,93,104,107,118,122,130,133,140,145,148,213,216,238,330,585,597,604,611,682,743,750,754,759,766,777,781,784,811,814,818,836,840,847,932,942,945,1025,1040,1202,1206,1213,1220,1229,1236,1240,1251,1255,1262,1446,1452,1610,1613,1670,1674,1684,1687,1694,1700,1708,1711,1715,1722,1725,1736,1745,1749,1752,1760,1767,1771,1785,1935,1938,1942,1945,1960,1966,1969],[16,17,18,19,23],"p",{},"Before getting into Web Vitals, it helps to remember ",[20,21,22],"strong",{},"what SEO is",".",[16,25,26,27,31,32,35,36,39],{},"SEO stands for Search Engine Optimization. It is a set of techniques that make a site easier for search crawlers (the bots behind ",[28,29,30],"code",{},"Google",", ",[28,33,34],{},"Bing"," and ",[28,37,38],{},"DuckDuckGo",") to discover and index.",[16,41,42,43,46,47,50],{},"The better optimized a site is, the greater the ",[20,44,45],{},"chance"," it shows up in the top positions of the ",[28,48,49],{},"SERPs (Search Engine Result Pages)"," and gets more visits.",[16,52,53],{},"SEO has three main areas:",[55,56,57,61,64],"ul",{},[58,59,60],"li",{},"On-Page: content, keywords, meta tags and site structure.",[58,62,63],{},"Off-Page: external signals, such as backlinks from other sites.",[58,65,66,67,23],{},"Technical: performance, load time, security (HTTPS) and ",[68,69,71],"a",{"href":70},"\u002Fen\u002Fblog\u002Fhow-to-create-structured-data-with-nuxtjs","structured data",[73,74,76],"h2",{"id":75},"what-about-web-vitals","What about Web Vitals?",[16,78,79],{},"Google launched Web Vitals in 2020. They are a set of metrics that put numbers on the quality of the experience people have on a site.",[16,81,82],{},"They belong to technical SEO. When you optimize them, the site loads faster, reacts quicker to clicks and gives users a better experience.",[16,84,85],{},"SEO is about visibility in search engines, and Core Web Vitals are about the page being fast and stable once the visitor arrives. Working on both raises your chances of ranking well and of keeping people on the page.",[73,87,89],{"id":88},"core-web-vitals","Core Web Vitals",[16,91,92],{},"Core Web Vitals are a subset of Web Vitals. Today they are three metrics:",[55,94,95,98,101],{},[58,96,97],{},"CLS, Cumulative Layout Shift",[58,99,100],{},"LCP, Largest Contentful Paint",[58,102,103],{},"INP, Interaction to Next Paint",[16,105,106],{},"Google separates the main metrics from the rest for three reasons:",[55,108,109,112,115],{},[58,110,111],{},"Prioritization: with the main metrics defined, developers know where to start optimizing.",[58,113,114],{},"Simplicity: with only a few metrics, it is easier to see which optimizations to make.",[58,116,117],{},"Alignment with Google: Google is the most used search engine in the world and wants to send users to good pages. Core Web Vitals are part of that, so a page that passes them delivers the kind of experience Google is looking for.",[73,119,121],{"id":120},"cumulative-layout-shift-cls","Cumulative Layout Shift (CLS)",[123,124],"img",{":copyright":125,"alt":126,"height":127,"src":128,"width":129},"{\"title\": \"CLS Web Vitals metric\", \"licenseId\": \"cc4\", \"author\": {\"name\": \"web.dev\", \"url\": \"https:\u002F\u002Fweb.dev\" }}","CLS illustration showing page elements moving around while the page loads",210,"\u002Fimages\u002Fblog\u002Fseo\u002Fweb-vitals\u002Fcls-cumulative-layout-shift.webp",240,[16,131,132],{},"CLS measures the visual stability of a page: how much elements move unexpectedly while it loads. A high CLS means the layout changes suddenly, and readers end up tapping the wrong thing.",[16,134,135,136,139],{},"For a good experience, your site should keep CLS at ",[20,137,138],{},"0.1 or less"," for at least 75% of visits.",[141,142,144],"h3",{"id":143},"examples-of-cls-problems","Examples of CLS problems",[16,146,147],{},"The first and most common case is an image that loads after the rest of the page. It \"pushes\" the content down to make room for itself. The fix is to set width and height on the image, so the browser reserves the space before downloading it.",[149,150,155],"pre",{"className":151,"code":152,"language":153,"meta":154,"style":154},"language-html shiki shiki-themes dracula","\u003Cimg src=\"\u002Fcodigo-ao-ponto.jpg\" width=\"600\" height=\"400\" \u002F>\n","html","",[28,156,157],{"__ignoreMap":154},[158,159,162,166,169,173,176,180,184,186,189,191,193,196,198,201,203,205,208,210],"span",{"class":160,"line":161},"line",1,[158,163,165],{"class":164},"sCdxs","\u003C",[158,167,123],{"class":168},"s0Tla",[158,170,172],{"class":171},"sY_PY"," src",[158,174,175],{"class":168},"=",[158,177,179],{"class":178},"seVfx","\"",[158,181,183],{"class":182},"s-mGx","\u002Fcodigo-ao-ponto.jpg",[158,185,179],{"class":178},[158,187,188],{"class":171}," width",[158,190,175],{"class":168},[158,192,179],{"class":178},[158,194,195],{"class":182},"600",[158,197,179],{"class":178},[158,199,200],{"class":171}," height",[158,202,175],{"class":168},[158,204,179],{"class":178},[158,206,207],{"class":182},"400",[158,209,179],{"class":178},[158,211,212],{"class":164}," \u002F>\n",[16,214,215],{},"The second case is custom fonts. The browser has to download them before it can render the text properly, which causes a shift when the web font arrives and replaces the fallback font.",[16,217,218,219,222,223,226,227,230,231,234,235,23],{},"To fix it, preload the font with a ",[28,220,221],{},"link"," tag and ",[28,224,225],{},"rel=\"preload\"",", use ",[28,228,229],{},"font-display"," in ",[28,232,233],{},"@font-face"," and adjust the fallback font metrics with ",[28,236,237],{},"size-adjust",[149,239,241],{"className":151,"code":240,"language":153,"meta":154,"style":154},"\u003C!-- Preload the critical above-the-fold font -->\n\u003Clink\n  rel=\"preload\"\n  href=\"\u002Ffonts\u002Finter.woff2\"\n  as=\"font\"\n  type=\"font\u002Fwoff2\"\n  crossorigin\n\u002F>\n",[28,242,243,249,257,273,288,303,318,324],{"__ignoreMap":154},[158,244,245],{"class":160,"line":161},[158,246,248],{"class":247},"shSDL","\u003C!-- Preload the critical above-the-fold font -->\n",[158,250,252,254],{"class":160,"line":251},2,[158,253,165],{"class":164},[158,255,256],{"class":168},"link\n",[158,258,260,263,265,267,270],{"class":160,"line":259},3,[158,261,262],{"class":171},"  rel",[158,264,175],{"class":168},[158,266,179],{"class":178},[158,268,269],{"class":182},"preload",[158,271,272],{"class":178},"\"\n",[158,274,276,279,281,283,286],{"class":160,"line":275},4,[158,277,278],{"class":171},"  href",[158,280,175],{"class":168},[158,282,179],{"class":178},[158,284,285],{"class":182},"\u002Ffonts\u002Finter.woff2",[158,287,272],{"class":178},[158,289,291,294,296,298,301],{"class":160,"line":290},5,[158,292,293],{"class":171},"  as",[158,295,175],{"class":168},[158,297,179],{"class":178},[158,299,300],{"class":182},"font",[158,302,272],{"class":178},[158,304,306,309,311,313,316],{"class":160,"line":305},6,[158,307,308],{"class":171},"  type",[158,310,175],{"class":168},[158,312,179],{"class":178},[158,314,315],{"class":182},"font\u002Fwoff2",[158,317,272],{"class":178},[158,319,321],{"class":160,"line":320},7,[158,322,323],{"class":171},"  crossorigin\n",[158,325,327],{"class":160,"line":326},8,[158,328,329],{"class":164},"\u002F>\n",[149,331,335],{"className":332,"code":333,"language":334,"meta":154,"style":154},"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 with adjusted metrics to avoid 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",[28,336,337,344,364,401,414,419,425,430,436,452,473,489,504,519,534,539,544,552,580],{"__ignoreMap":154},[158,338,339,341],{"class":160,"line":161},[158,340,233],{"class":168},[158,342,343],{"class":164}," {\n",[158,345,346,350,353,356,359,361],{"class":160,"line":251},[158,347,349],{"class":348},"sLL85","  font-family",[158,351,352],{"class":168},":",[158,354,355],{"class":178}," \"",[158,357,358],{"class":182},"Inter",[158,360,179],{"class":178},[158,362,363],{"class":164},";\n",[158,365,366,369,371,374,377,379,381,383,386,389,391,393,396,398],{"class":160,"line":259},[158,367,368],{"class":348},"  src",[158,370,352],{"class":168},[158,372,373],{"class":348}," url",[158,375,376],{"class":164},"(",[158,378,179],{"class":178},[158,380,285],{"class":182},[158,382,179],{"class":178},[158,384,385],{"class":164},") ",[158,387,388],{"class":348},"format",[158,390,376],{"class":164},[158,392,179],{"class":178},[158,394,395],{"class":182},"woff2",[158,397,179],{"class":178},[158,399,400],{"class":164},");\n",[158,402,403,406,408,412],{"class":160,"line":275},[158,404,405],{"class":348},"  font-display",[158,407,352],{"class":168},[158,409,411],{"class":410},"sIQBb"," swap",[158,413,363],{"class":164},[158,415,416],{"class":160,"line":290},[158,417,418],{"class":164},"}\n",[158,420,421],{"class":160,"line":305},[158,422,424],{"emptyLinePlaceholder":423},true,"\n",[158,426,427],{"class":160,"line":320},[158,428,429],{"class":247},"\u002F* Fallback with adjusted metrics to avoid CLS *\u002F\n",[158,431,432,434],{"class":160,"line":326},[158,433,233],{"class":168},[158,435,343],{"class":164},[158,437,439,441,443,445,448,450],{"class":160,"line":438},9,[158,440,349],{"class":348},[158,442,352],{"class":168},[158,444,355],{"class":178},[158,446,447],{"class":182},"Inter Fallback",[158,449,179],{"class":178},[158,451,363],{"class":164},[158,453,455,457,459,462,464,466,469,471],{"class":160,"line":454},10,[158,456,368],{"class":348},[158,458,352],{"class":168},[158,460,461],{"class":348}," local",[158,463,376],{"class":164},[158,465,179],{"class":178},[158,467,468],{"class":182},"Arial",[158,470,179],{"class":178},[158,472,400],{"class":164},[158,474,476,479,481,484,487],{"class":160,"line":475},11,[158,477,478],{"class":348},"  size-adjust",[158,480,352],{"class":168},[158,482,483],{"class":410}," 107",[158,485,486],{"class":168},"%",[158,488,363],{"class":164},[158,490,492,495,497,500,502],{"class":160,"line":491},12,[158,493,494],{"class":164},"  ascent-override",[158,496,352],{"class":168},[158,498,499],{"class":410}," 90",[158,501,486],{"class":168},[158,503,363],{"class":164},[158,505,507,510,512,515,517],{"class":160,"line":506},13,[158,508,509],{"class":164},"  descent-override",[158,511,352],{"class":168},[158,513,514],{"class":410}," 22",[158,516,486],{"class":168},[158,518,363],{"class":164},[158,520,522,525,527,530,532],{"class":160,"line":521},14,[158,523,524],{"class":164},"  line-gap-override",[158,526,352],{"class":168},[158,528,529],{"class":410}," 0",[158,531,486],{"class":168},[158,533,363],{"class":164},[158,535,537],{"class":160,"line":536},15,[158,538,418],{"class":164},[158,540,542],{"class":160,"line":541},16,[158,543,424],{"emptyLinePlaceholder":423},[158,545,547,550],{"class":160,"line":546},17,[158,548,549],{"class":168},"body",[158,551,343],{"class":164},[158,553,555,557,559,561,563,565,567,569,571,573,575,578],{"class":160,"line":554},18,[158,556,349],{"class":348},[158,558,352],{"class":168},[158,560,355],{"class":178},[158,562,358],{"class":182},[158,564,179],{"class":178},[158,566,31],{"class":164},[158,568,179],{"class":178},[158,570,447],{"class":182},[158,572,179],{"class":178},[158,574,31],{"class":164},[158,576,577],{"class":410},"sans-serif",[158,579,363],{"class":164},[158,581,583],{"class":160,"line":582},19,[158,584,418],{"class":164},[16,586,587,590,591,31,593,596],{},[28,588,589],{},"font-display: swap"," shows the text right away in the fallback font and switches to the web font once it loads. To keep that switch from moving anything, you adjust the fallback font metrics (",[28,592,237],{},[28,594,595],{},"ascent-override"," and the others) so it takes up the same space as the web font.",[16,598,599,600,603],{},"If the font is not critical, use ",[28,601,602],{},"font-display: optional",". The web font is then used only if it loads within about 100 ms. If it takes longer, the browser keeps the fallback for that navigation, and the font swap stops being a source of CLS.",[16,605,606,607,610],{},"The third case is ",[20,608,609],{},"banners, ads and embeds injected without reserved space",". When a third-party script inserts an ad after the page has already rendered, everything below it gets pushed down.",[149,612,614],{"className":151,"code":613,"language":153,"meta":154,"style":154},"\u003C!-- Bad: ad slot without dimensions -->\n\u003Cdiv id=\"ad-slot\">\u003C\u002Fdiv>\n\u003Cscript>\n  loadAd(\"ad-slot\");\n\u003C\u002Fscript>\n",[28,615,616,621,648,657,673],{"__ignoreMap":154},[158,617,618],{"class":160,"line":161},[158,619,620],{"class":247},"\u003C!-- Bad: ad slot without dimensions -->\n",[158,622,623,625,628,631,633,635,638,640,643,645],{"class":160,"line":251},[158,624,165],{"class":164},[158,626,627],{"class":168},"div",[158,629,630],{"class":171}," id",[158,632,175],{"class":168},[158,634,179],{"class":178},[158,636,637],{"class":182},"ad-slot",[158,639,179],{"class":178},[158,641,642],{"class":164},">\u003C\u002F",[158,644,627],{"class":168},[158,646,647],{"class":164},">\n",[158,649,650,652,655],{"class":160,"line":259},[158,651,165],{"class":164},[158,653,654],{"class":168},"script",[158,656,647],{"class":164},[158,658,659,663,665,667,669,671],{"class":160,"line":275},[158,660,662],{"class":661},"sAOxA","  loadAd",[158,664,376],{"class":164},[158,666,179],{"class":178},[158,668,637],{"class":182},[158,670,179],{"class":178},[158,672,400],{"class":164},[158,674,675,678,680],{"class":160,"line":290},[158,676,677],{"class":164},"\u003C\u002F",[158,679,654],{"class":168},[158,681,647],{"class":164},[149,683,685],{"className":151,"code":684,"language":153,"meta":154,"style":154},"\u003C!-- Good: reserved space with min-height or aspect-ratio -->\n\u003Cdiv\n  id=\"ad-slot\"\n  style=\"min-height: 250px; width: 300px; background-color: #f3f4f6;\"\n>\n  \u003C!-- The ad will be injected here -->\n\u003C\u002Fdiv>\n",[28,686,687,692,699,712,726,730,735],{"__ignoreMap":154},[158,688,689],{"class":160,"line":161},[158,690,691],{"class":247},"\u003C!-- Good: reserved space with min-height or aspect-ratio -->\n",[158,693,694,696],{"class":160,"line":251},[158,695,165],{"class":164},[158,697,698],{"class":168},"div\n",[158,700,701,704,706,708,710],{"class":160,"line":259},[158,702,703],{"class":171},"  id",[158,705,175],{"class":168},[158,707,179],{"class":178},[158,709,637],{"class":182},[158,711,272],{"class":178},[158,713,714,717,719,721,724],{"class":160,"line":275},[158,715,716],{"class":171},"  style",[158,718,175],{"class":168},[158,720,179],{"class":178},[158,722,723],{"class":182},"min-height: 250px; width: 300px; background-color: #f3f4f6;",[158,725,272],{"class":178},[158,727,728],{"class":160,"line":290},[158,729,647],{"class":164},[158,731,732],{"class":160,"line":305},[158,733,734],{"class":247},"  \u003C!-- The ad will be injected here -->\n",[158,736,737,739,741],{"class":160,"line":320},[158,738,677],{"class":164},[158,740,627],{"class":168},[158,742,647],{"class":164},[16,744,745,746,749],{},"For responsive embeds, such as YouTube videos, use ",[28,747,748],{},"aspect-ratio"," in CSS to reserve proportional space before they load.",[73,751,753],{"id":752},"largest-contentful-paint-lcp","Largest Contentful Paint (LCP)",[123,755],{":copyright":756,"alt":757,"height":127,"src":758,"width":129},"{\"title\": \"LCP Web Vitals metric\", \"licenseId\": \"cc4\", \"author\": {\"name\": \"web.dev\", \"url\": \"https:\u002F\u002Fweb.dev\" }}","LCP illustration highlighting the largest content element visible in the viewport","\u002Fimages\u002Fblog\u002Fseo\u002Fweb-vitals\u002Flcp-largest-contentful-paint.webp",[16,760,761,762,765],{},"LCP measures how long the page takes to render the ",[20,763,764],{},"largest visible content element"," in the viewport. That element can be an image, a block of text, a video or an SVG.",[16,767,768,769,772,773,776],{},"A ",[20,770,771],{},"good"," LCP is ",[20,774,775],{},"2.5 seconds or less"," at the 75th percentile of real visits.",[141,778,780],{"id":779},"what-counts-as-lcp","What counts as LCP",[16,782,783],{},"The browser considers these as LCP candidates:",[55,785,786,796,802,808],{},[58,787,788,789,31,792,795],{},"Images (",[28,790,791],{},"\u003Cimg>",[28,793,794],{},"\u003Cpicture>",")",[58,797,798,801],{},[28,799,800],{},"\u003Cvideo>"," elements",[58,803,804,805,795],{},"Elements with a CSS background image (",[28,806,807],{},"background-image",[58,809,810],{},"Blocks of text (paragraphs and headings)",[16,812,813],{},"On most pages, the LCP is the main image (hero image) or the heading.",[141,815,817],{"id":816},"common-causes-of-a-high-lcp","Common causes of a high LCP",[55,819,820,823,830,833],{},[58,821,822],{},"High TTFB: the server takes a long time to answer the initial request.",[58,824,825,826,829],{},"Lazy-loaded hero image: using ",[28,827,828],{},"loading=\"lazy\""," on an above-the-fold image delays the LCP.",[58,831,832],{},"Render-blocking resources: heavy CSS or JS before the critical content.",[58,834,835],{},"Heavy images: large files in unoptimized formats.",[141,837,839],{"id":838},"how-to-improve-lcp","How to improve LCP",[16,841,842,843,846],{},"Use ",[28,844,845],{},"fetchpriority=\"high\""," on the main image to prioritize its download.",[149,848,850],{"className":151,"code":849,"language":153,"meta":154,"style":154},"\u003Cimg\n  src=\"\u002Fhero.webp\"\n  fetchpriority=\"high\"\n  width=\"1600\"\n  height=\"900\"\n  alt=\"Description of the main image\"\n\u002F>\n",[28,851,852,859,872,886,900,914,928],{"__ignoreMap":154},[158,853,854,856],{"class":160,"line":161},[158,855,165],{"class":164},[158,857,858],{"class":168},"img\n",[158,860,861,863,865,867,870],{"class":160,"line":251},[158,862,368],{"class":171},[158,864,175],{"class":168},[158,866,179],{"class":178},[158,868,869],{"class":182},"\u002Fhero.webp",[158,871,272],{"class":178},[158,873,874,877,879,881,884],{"class":160,"line":259},[158,875,876],{"class":171},"  fetchpriority",[158,878,175],{"class":168},[158,880,179],{"class":178},[158,882,883],{"class":182},"high",[158,885,272],{"class":178},[158,887,888,891,893,895,898],{"class":160,"line":275},[158,889,890],{"class":171},"  width",[158,892,175],{"class":168},[158,894,179],{"class":178},[158,896,897],{"class":182},"1600",[158,899,272],{"class":178},[158,901,902,905,907,909,912],{"class":160,"line":290},[158,903,904],{"class":171},"  height",[158,906,175],{"class":168},[158,908,179],{"class":178},[158,910,911],{"class":182},"900",[158,913,272],{"class":178},[158,915,916,919,921,923,926],{"class":160,"line":305},[158,917,918],{"class":171},"  alt",[158,920,175],{"class":168},[158,922,179],{"class":178},[158,924,925],{"class":182},"Description of the main image",[158,927,272],{"class":178},[158,929,930],{"class":160,"line":320},[158,931,329],{"class":164},[16,933,934,935,937,938,941],{},"Do not use ",[28,936,828],{}," on the LCP image. Let it load right away (or set ",[28,939,940],{},"loading=\"eager\""," explicitly).",[16,943,944],{},"If the browser does not discover the main image early, preload it.",[149,946,948],{"className":151,"code":947,"language":153,"meta":154,"style":154},"\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",[28,949,950,956,968,981,993,1007,1021],{"__ignoreMap":154},[158,951,952,954],{"class":160,"line":161},[158,953,165],{"class":164},[158,955,256],{"class":168},[158,957,958,960,962,964,966],{"class":160,"line":251},[158,959,262],{"class":171},[158,961,175],{"class":168},[158,963,179],{"class":178},[158,965,269],{"class":182},[158,967,272],{"class":178},[158,969,970,972,974,976,979],{"class":160,"line":259},[158,971,293],{"class":171},[158,973,175],{"class":168},[158,975,179],{"class":178},[158,977,978],{"class":182},"image",[158,980,272],{"class":178},[158,982,983,985,987,989,991],{"class":160,"line":275},[158,984,278],{"class":171},[158,986,175],{"class":168},[158,988,179],{"class":178},[158,990,869],{"class":182},[158,992,272],{"class":178},[158,994,995,998,1000,1002,1005],{"class":160,"line":290},[158,996,997],{"class":171},"  imagesrcset",[158,999,175],{"class":168},[158,1001,179],{"class":178},[158,1003,1004],{"class":182},"\u002Fhero-400.webp 400w, \u002Fhero-800.webp 800w, \u002Fhero-1200.webp 1200w",[158,1006,272],{"class":178},[158,1008,1009,1012,1014,1016,1019],{"class":160,"line":305},[158,1010,1011],{"class":171},"  imagesizes",[158,1013,175],{"class":168},[158,1015,179],{"class":178},[158,1017,1018],{"class":182},"(max-width: 600px) 100vw, 50vw",[158,1020,272],{"class":178},[158,1022,1023],{"class":160,"line":320},[158,1024,329],{"class":164},[16,1026,1027,1028,1031,1032,1035,1036,1039],{},"Convert images to ",[20,1029,1030],{},"AVIF"," or ",[20,1033,1034],{},"WebP"," and use ",[28,1037,1038],{},"srcset"," to serve the right size to each device.",[149,1041,1043],{"className":151,"code":1042,"language":153,"meta":154,"style":154},"\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=\"Description of the main image\"\n  \u002F>\n\u003C\u002Fpicture>\n",[28,1044,1045,1054,1088,1117,1123,1137,1150,1163,1176,1189,1194],{"__ignoreMap":154},[158,1046,1047,1049,1052],{"class":160,"line":161},[158,1048,165],{"class":164},[158,1050,1051],{"class":168},"picture",[158,1053,647],{"class":164},[158,1055,1056,1059,1062,1065,1067,1069,1072,1074,1077,1079,1081,1084,1086],{"class":160,"line":251},[158,1057,1058],{"class":164},"  \u003C",[158,1060,1061],{"class":168},"source",[158,1063,1064],{"class":171}," srcset",[158,1066,175],{"class":168},[158,1068,179],{"class":178},[158,1070,1071],{"class":182},"\u002Fhero.avif",[158,1073,179],{"class":178},[158,1075,1076],{"class":171}," type",[158,1078,175],{"class":168},[158,1080,179],{"class":178},[158,1082,1083],{"class":182},"image\u002Favif",[158,1085,179],{"class":178},[158,1087,212],{"class":164},[158,1089,1090,1092,1094,1096,1098,1100,1102,1104,1106,1108,1110,1113,1115],{"class":160,"line":259},[158,1091,1058],{"class":164},[158,1093,1061],{"class":168},[158,1095,1064],{"class":171},[158,1097,175],{"class":168},[158,1099,179],{"class":178},[158,1101,869],{"class":182},[158,1103,179],{"class":178},[158,1105,1076],{"class":171},[158,1107,175],{"class":168},[158,1109,179],{"class":178},[158,1111,1112],{"class":182},"image\u002Fwebp",[158,1114,179],{"class":178},[158,1116,212],{"class":164},[158,1118,1119,1121],{"class":160,"line":275},[158,1120,1058],{"class":164},[158,1122,858],{"class":168},[158,1124,1125,1128,1130,1132,1135],{"class":160,"line":290},[158,1126,1127],{"class":171},"    src",[158,1129,175],{"class":168},[158,1131,179],{"class":178},[158,1133,1134],{"class":182},"\u002Fhero.jpg",[158,1136,272],{"class":178},[158,1138,1139,1142,1144,1146,1148],{"class":160,"line":305},[158,1140,1141],{"class":171},"    fetchpriority",[158,1143,175],{"class":168},[158,1145,179],{"class":178},[158,1147,883],{"class":182},[158,1149,272],{"class":178},[158,1151,1152,1155,1157,1159,1161],{"class":160,"line":320},[158,1153,1154],{"class":171},"    width",[158,1156,175],{"class":168},[158,1158,179],{"class":178},[158,1160,897],{"class":182},[158,1162,272],{"class":178},[158,1164,1165,1168,1170,1172,1174],{"class":160,"line":326},[158,1166,1167],{"class":171},"    height",[158,1169,175],{"class":168},[158,1171,179],{"class":178},[158,1173,911],{"class":182},[158,1175,272],{"class":178},[158,1177,1178,1181,1183,1185,1187],{"class":160,"line":438},[158,1179,1180],{"class":171},"    alt",[158,1182,175],{"class":168},[158,1184,179],{"class":178},[158,1186,925],{"class":182},[158,1188,272],{"class":178},[158,1190,1191],{"class":160,"line":454},[158,1192,1193],{"class":164},"  \u002F>\n",[158,1195,1196,1198,1200],{"class":160,"line":475},[158,1197,677],{"class":164},[158,1199,1051],{"class":168},[158,1201,647],{"class":164},[73,1203,1205],{"id":1204},"interaction-to-next-paint-inp","Interaction to Next Paint (INP)",[123,1207],{":copyright":1208,"alt":1209,"height":1210,"src":1211,"width":1212},"{\"title\": \"INP Web Vitals metric\", \"licenseId\": \"cc4\", \"author\": {\"name\": \"web.dev\", \"url\": \"https:\u002F\u002Fweb.dev\" }}","INP illustration showing the time between a user interaction and the next paint on screen",194,"\u002Fimages\u002Fblog\u002Fseo\u002Fweb-vitals\u002Finp-interaction-to-next-paint.webp",259,[16,1214,1215,1216,1219],{},"INP measures the ",[20,1217,1218],{},"responsiveness"," of the page. It looks at the latency of every interaction (clicks, taps and key presses) during the visit and reports the slowest one, setting aside isolated extreme cases.",[16,1221,768,1222,1224,1225,1228],{},[20,1223,771],{}," INP is ",[20,1226,1227],{},"200 ms or less"," at the 75th percentile.",[16,1230,1231,1232,1235],{},"INP replaced FID (First Input Delay) as a Core Web Vital in ",[20,1233,1234],{},"March 2024",". FID measured only the delay of the first interaction. INP looks at all interactions and measures the full time, from the start of the interaction to the next paint with visual feedback.",[141,1237,1239],{"id":1238},"what-causes-a-high-inp","What causes a high INP",[55,1241,1242,1245,1248],{},[58,1243,1244],{},"Long tasks: JavaScript tasks that block the main thread for more than 50 ms.",[58,1246,1247],{},"Heavy input handlers: code that runs on every click, keystroke or scroll.",[58,1249,1250],{},"Third-party scripts: analytics, ads and social widgets competing for the main thread.",[141,1252,1254],{"id":1253},"how-to-improve-inp","How to improve INP",[16,1256,1257,1258,1261],{},"Break long tasks into smaller chunks and use ",[28,1259,1260],{},"scheduler.yield()"," to hand control back to the browser between them.",[149,1263,1267],{"className":1264,"code":1265,"language":1266,"meta":154,"style":154},"language-js shiki shiki-themes dracula","\u002F\u002F Helper with a fallback for browsers without 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","js",[28,1268,1269,1274,1285,1321,1334,1339,1376,1380,1384,1403,1422,1429,1438,1442],{"__ignoreMap":154},[158,1270,1271],{"class":160,"line":161},[158,1272,1273],{"class":247},"\u002F\u002F Helper with a fallback for browsers without scheduler.yield()\n",[158,1275,1276,1279,1282],{"class":160,"line":251},[158,1277,1278],{"class":168},"function",[158,1280,1281],{"class":661}," yieldToMain",[158,1283,1284],{"class":164},"() {\n",[158,1286,1287,1290,1293,1295,1298,1300,1303,1306,1309,1311,1314,1316,1318],{"class":160,"line":259},[158,1288,1289],{"class":168},"  if",[158,1291,1292],{"class":164}," (",[158,1294,179],{"class":178},[158,1296,1297],{"class":182},"scheduler",[158,1299,179],{"class":178},[158,1301,1302],{"class":168}," in",[158,1304,1305],{"class":164}," window ",[158,1307,1308],{"class":168},"&&",[158,1310,355],{"class":178},[158,1312,1313],{"class":182},"yield",[158,1315,179],{"class":178},[158,1317,1302],{"class":168},[158,1319,1320],{"class":164}," scheduler) {\n",[158,1322,1323,1326,1329,1331],{"class":160,"line":275},[158,1324,1325],{"class":168},"    return",[158,1327,1328],{"class":164}," scheduler.",[158,1330,1313],{"class":661},[158,1332,1333],{"class":164},"();\n",[158,1335,1336],{"class":160,"line":290},[158,1337,1338],{"class":164},"  }\n",[158,1340,1341,1344,1348,1352,1355,1359,1361,1364,1367,1370,1373],{"class":160,"line":305},[158,1342,1343],{"class":168},"  return",[158,1345,1347],{"class":1346},"sviCg"," new",[158,1349,1351],{"class":1350},"sCp4m"," Promise",[158,1353,1354],{"class":164},"((",[158,1356,1358],{"class":1357},"sGEwX","resolve",[158,1360,385],{"class":164},[158,1362,1363],{"class":168},"=>",[158,1365,1366],{"class":661}," setTimeout",[158,1368,1369],{"class":164},"(resolve, ",[158,1371,1372],{"class":410},"0",[158,1374,1375],{"class":164},"));\n",[158,1377,1378],{"class":160,"line":320},[158,1379,418],{"class":164},[158,1381,1382],{"class":160,"line":326},[158,1383,424],{"emptyLinePlaceholder":423},[158,1385,1386,1389,1392,1395,1397,1400],{"class":160,"line":438},[158,1387,1388],{"class":168},"async",[158,1390,1391],{"class":168}," function",[158,1393,1394],{"class":661}," processJobs",[158,1396,376],{"class":164},[158,1398,1399],{"class":1357},"jobQueue",[158,1401,1402],{"class":164},") {\n",[158,1404,1405,1408,1410,1413,1416,1419],{"class":160,"line":454},[158,1406,1407],{"class":168},"  for",[158,1409,1292],{"class":164},[158,1411,1412],{"class":168},"const",[158,1414,1415],{"class":164}," job ",[158,1417,1418],{"class":168},"of",[158,1420,1421],{"class":164}," jobQueue) {\n",[158,1423,1424,1427],{"class":160,"line":475},[158,1425,1426],{"class":661},"    job",[158,1428,1333],{"class":164},[158,1430,1431,1434,1436],{"class":160,"line":491},[158,1432,1433],{"class":168},"    await",[158,1435,1281],{"class":661},[158,1437,1333],{"class":164},[158,1439,1440],{"class":160,"line":506},[158,1441,1338],{"class":164},[158,1443,1444],{"class":160,"line":521},[158,1445,418],{"class":164},[16,1447,842,1448,1451],{},[20,1449,1450],{},"debounce"," on input handlers that fire often.",[149,1453,1455],{"className":1264,"code":1454,"language":1266,"meta":154,"style":154},"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",[28,1456,1457,1476,1484,1502,1510,1534,1539,1543,1547,1558,1571,1587,1595,1606],{"__ignoreMap":154},[158,1458,1459,1461,1464,1466,1469,1471,1474],{"class":160,"line":161},[158,1460,1278],{"class":168},[158,1462,1463],{"class":661}," debounce",[158,1465,376],{"class":164},[158,1467,1468],{"class":1357},"fn",[158,1470,31],{"class":164},[158,1472,1473],{"class":1357},"delay",[158,1475,1402],{"class":164},[158,1477,1478,1481],{"class":160,"line":251},[158,1479,1480],{"class":168},"  let",[158,1482,1483],{"class":164}," timeout;\n",[158,1485,1486,1488,1490,1493,1496,1498,1500],{"class":160,"line":259},[158,1487,1343],{"class":168},[158,1489,1292],{"class":164},[158,1491,1492],{"class":168},"...",[158,1494,1495],{"class":1357},"args",[158,1497,385],{"class":164},[158,1499,1363],{"class":168},[158,1501,343],{"class":164},[158,1503,1504,1507],{"class":160,"line":275},[158,1505,1506],{"class":661},"    clearTimeout",[158,1508,1509],{"class":164},"(timeout);\n",[158,1511,1512,1515,1517,1519,1522,1524,1527,1529,1531],{"class":160,"line":290},[158,1513,1514],{"class":164},"    timeout ",[158,1516,175],{"class":168},[158,1518,1366],{"class":661},[158,1520,1521],{"class":164},"(() ",[158,1523,1363],{"class":168},[158,1525,1526],{"class":661}," fn",[158,1528,376],{"class":164},[158,1530,1492],{"class":168},[158,1532,1533],{"class":164},"args), delay);\n",[158,1535,1536],{"class":160,"line":305},[158,1537,1538],{"class":164},"  };\n",[158,1540,1541],{"class":160,"line":320},[158,1542,418],{"class":164},[158,1544,1545],{"class":160,"line":326},[158,1546,424],{"emptyLinePlaceholder":423},[158,1548,1549,1552,1555],{"class":160,"line":438},[158,1550,1551],{"class":164},"input.",[158,1553,1554],{"class":661},"addEventListener",[158,1556,1557],{"class":164},"(\n",[158,1559,1560,1563,1566,1568],{"class":160,"line":454},[158,1561,1562],{"class":178},"  \"",[158,1564,1565],{"class":182},"input",[158,1567,179],{"class":178},[158,1569,1570],{"class":164},",\n",[158,1572,1573,1576,1578,1581,1583,1585],{"class":160,"line":475},[158,1574,1575],{"class":661},"  debounce",[158,1577,1354],{"class":164},[158,1579,1580],{"class":1357},"e",[158,1582,385],{"class":164},[158,1584,1363],{"class":168},[158,1586,343],{"class":164},[158,1588,1589,1592],{"class":160,"line":491},[158,1590,1591],{"class":661},"    searchAPI",[158,1593,1594],{"class":164},"(e.target.value);\n",[158,1596,1597,1600,1603],{"class":160,"line":506},[158,1598,1599],{"class":164},"  }, ",[158,1601,1602],{"class":410},"300",[158,1604,1605],{"class":164},")\n",[158,1607,1608],{"class":160,"line":521},[158,1609,400],{"class":164},[16,1611,1612],{},"Defer non-critical JavaScript until after the page is interactive.",[149,1614,1616],{"className":151,"code":1615,"language":153,"meta":154,"style":154},"\u003Cscript src=\"\u002Fanalytics.js\" defer>\u003C\u002Fscript>\n\u003Cscript src=\"\u002Fchat-widget.js\" async>\u003C\u002Fscript>\n",[28,1617,1618,1644],{"__ignoreMap":154},[158,1619,1620,1622,1624,1626,1628,1630,1633,1635,1638,1640,1642],{"class":160,"line":161},[158,1621,165],{"class":164},[158,1623,654],{"class":168},[158,1625,172],{"class":171},[158,1627,175],{"class":168},[158,1629,179],{"class":178},[158,1631,1632],{"class":182},"\u002Fanalytics.js",[158,1634,179],{"class":178},[158,1636,1637],{"class":171}," defer",[158,1639,642],{"class":164},[158,1641,654],{"class":168},[158,1643,647],{"class":164},[158,1645,1646,1648,1650,1652,1654,1656,1659,1661,1664,1666,1668],{"class":160,"line":251},[158,1647,165],{"class":164},[158,1649,654],{"class":168},[158,1651,172],{"class":171},[158,1653,175],{"class":168},[158,1655,179],{"class":178},[158,1657,1658],{"class":182},"\u002Fchat-widget.js",[158,1660,179],{"class":178},[158,1662,1663],{"class":171}," async",[158,1665,642],{"class":164},[158,1667,654],{"class":168},[158,1669,647],{"class":164},[73,1671,1673],{"id":1672},"tbt","TBT",[16,1675,1676,1679,1680,1683],{},[20,1677,1678],{},"TBT (Total Blocking Time)"," is not a Core Web Vital. It is a ",[20,1681,1682],{},"lab"," metric that Lighthouse uses to assess performance in controlled tests.",[16,1685,1686],{},"TBT adds up the time the main thread was blocked by long tasks (over 50 ms) between FCP (First Contentful Paint) and the moment the page becomes interactive.",[16,1688,1689,1690,1693],{},"It works as an ",[20,1691,1692],{},"indicator for INP"," when you do not have enough field data. If TBT is high in Lighthouse, your INP in production is probably poor too.",[16,1695,1696,1697,352],{},"Other Web Vitals that are ",[20,1698,1699],{},"not Core",[55,1701,1702,1705],{},[58,1703,1704],{},"TTFB (Time to First Byte): time until the first byte of the server response.",[58,1706,1707],{},"FCP (First Contentful Paint): time until the first content is rendered.",[16,1709,1710],{},"They help with diagnosis, but they do not count toward the pass or fail assessment of Core Web Vitals.",[73,1712,1714],{"id":1713},"the-lifecycle-of-web-vitals-metrics","The lifecycle of Web Vitals metrics",[123,1716],{":copyright":1717,"alt":1718,"height":1719,"src":1720,"width":1721},"{\"title\": \"The stages of the Core Web Vitals lifecycle\", \"licenseId\": \"cc4\", \"author\": {\"name\": \"web.dev\", \"url\": \"https:\u002F\u002Fweb.dev\" }}","The lifecycle of Web Vitals metrics, with the Experimental, Pending and Stable stages",61,"\u002Fimages\u002Fblog\u002Fseo\u002Fweb-vitals\u002Fo-ciclo-de-vida-dos-web-vitals.webp",600,[16,1723,1724],{},"Metrics go through three stages before becoming stable Core Web Vitals:",[55,1726,1727,1730,1733],{},[58,1728,1729],{},"Experimental: the metric is being tested and collecting data. It is not yet recommended as a production performance indicator.",[58,1731,1732],{},"Pending: the metric proved useful and is ready to replace an existing one, but Google gives the community time to adjust.",[58,1734,1735],{},"Stable: the metric is officially a Core Web Vital.",[16,1737,1738,1739,1742,1743,23],{},"The swap of ",[20,1740,1741],{},"FID for INP"," is the most recent example. INP started as experimental, moved to pending in 2023 and became stable in ",[20,1744,1234],{},[73,1746,1748],{"id":1747},"how-to-measure","How to measure",[16,1750,1751],{},"There are two ways to measure Core Web Vitals:",[55,1753,1754,1757],{},[58,1755,1756],{},"Field data: metrics collected from real users through the Chrome User Experience Report (CrUX). This is what Google uses for the assessment.",[58,1758,1759],{},"Lab data: metrics collected in a controlled environment with Lighthouse or Chrome DevTools. Useful for diagnosis and for testing before you ship.",[16,1761,1762,1763,1766],{},"Google assesses Core Web Vitals at the ",[20,1764,1765],{},"75th percentile"," of visits. In practice, 75% of real experiences need to fall in the \"good\" range for the page to pass.",[141,1768,1770],{"id":1769},"tools-to-measure","Tools to measure",[55,1772,1773,1776,1779,1782],{},[58,1774,1775],{},"PageSpeed Insights: shows field data (CrUX) and lab data (Lighthouse) for a URL.",[58,1777,1778],{},"Google Search Console: the Core Web Vitals report shows which pages on your site pass or fail, based on real user data.",[58,1780,1781],{},"Lighthouse: the audit tool in Chrome DevTools. It produces lab metrics, including TBT.",[58,1783,1784],{},"web-vitals library: an npm package for collecting the metrics in production.",[149,1786,1788],{"className":1264,"code":1787,"language":1266,"meta":154,"style":154},"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",[28,1789,1790,1810,1814,1830,1850,1855,1859,1874,1891,1895,1899,1914,1931],{"__ignoreMap":154},[158,1791,1792,1795,1798,1801,1803,1806,1808],{"class":160,"line":161},[158,1793,1794],{"class":168},"import",[158,1796,1797],{"class":164}," { onLCP, onINP, onCLS } ",[158,1799,1800],{"class":168},"from",[158,1802,355],{"class":178},[158,1804,1805],{"class":182},"web-vitals",[158,1807,179],{"class":178},[158,1809,363],{"class":164},[158,1811,1812],{"class":160,"line":251},[158,1813,424],{"emptyLinePlaceholder":423},[158,1815,1816,1819,1821,1824,1826,1828],{"class":160,"line":259},[158,1817,1818],{"class":661},"onLCP",[158,1820,1354],{"class":164},[158,1822,1823],{"class":1357},"metric",[158,1825,385],{"class":164},[158,1827,1363],{"class":168},[158,1829,343],{"class":164},[158,1831,1832,1835,1838,1840,1842,1845,1847],{"class":160,"line":275},[158,1833,1834],{"class":164},"  console.",[158,1836,1837],{"class":661},"log",[158,1839,376],{"class":164},[158,1841,179],{"class":178},[158,1843,1844],{"class":182},"LCP:",[158,1846,179],{"class":178},[158,1848,1849],{"class":164},", metric.value);\n",[158,1851,1852],{"class":160,"line":290},[158,1853,1854],{"class":164},"});\n",[158,1856,1857],{"class":160,"line":305},[158,1858,424],{"emptyLinePlaceholder":423},[158,1860,1861,1864,1866,1868,1870,1872],{"class":160,"line":320},[158,1862,1863],{"class":661},"onINP",[158,1865,1354],{"class":164},[158,1867,1823],{"class":1357},[158,1869,385],{"class":164},[158,1871,1363],{"class":168},[158,1873,343],{"class":164},[158,1875,1876,1878,1880,1882,1884,1887,1889],{"class":160,"line":326},[158,1877,1834],{"class":164},[158,1879,1837],{"class":661},[158,1881,376],{"class":164},[158,1883,179],{"class":178},[158,1885,1886],{"class":182},"INP:",[158,1888,179],{"class":178},[158,1890,1849],{"class":164},[158,1892,1893],{"class":160,"line":438},[158,1894,1854],{"class":164},[158,1896,1897],{"class":160,"line":454},[158,1898,424],{"emptyLinePlaceholder":423},[158,1900,1901,1904,1906,1908,1910,1912],{"class":160,"line":475},[158,1902,1903],{"class":661},"onCLS",[158,1905,1354],{"class":164},[158,1907,1823],{"class":1357},[158,1909,385],{"class":164},[158,1911,1363],{"class":168},[158,1913,343],{"class":164},[158,1915,1916,1918,1920,1922,1924,1927,1929],{"class":160,"line":491},[158,1917,1834],{"class":164},[158,1919,1837],{"class":661},[158,1921,376],{"class":164},[158,1923,179],{"class":178},[158,1925,1926],{"class":182},"CLS:",[158,1928,179],{"class":178},[158,1930,1849],{"class":164},[158,1932,1933],{"class":160,"line":506},[158,1934,1854],{"class":164},[16,1936,1937],{},"The library gives you the real value of each metric, and you decide what to do with it, for example send it to your monitoring system.",[73,1939,1941],{"id":1940},"conclusion","Conclusion",[16,1943,1944],{},"Back to the question in the title: does user experience affect your site's SEO?",[16,1946,1947,1948,1951,1952,1955,1956,1959],{},"It does, but less than content does. Page experience is a ",[20,1949,1950],{},"ranking signal"," on Google, but ",[20,1953,1954],{},"relevance and content quality weigh more",". Good Core Web Vitals work as a ",[20,1957,1958],{},"tiebreaker"," between pages with similar content, and they also improve conversion and retention.",[16,1961,1962,1963,1965],{},"On ",[20,1964,34],{},", page performance also counts, with less emphasis than on Google. It considers load speed and user experience, but puts relevance and domain authority first.",[16,1967,1968],{},"A fast, stable page also converts more and keeps people reading longer, which is reason enough to work on Core Web Vitals.",[1970,1971,1972],"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 .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":154,"searchDepth":251,"depth":251,"links":1974},[1975,1976,1977,1980,1985,1989,1990,1991,1994],{"id":75,"depth":251,"text":76},{"id":88,"depth":251,"text":89},{"id":120,"depth":251,"text":121,"children":1978},[1979],{"id":143,"depth":259,"text":144},{"id":752,"depth":251,"text":753,"children":1981},[1982,1983,1984],{"id":779,"depth":259,"text":780},{"id":816,"depth":259,"text":817},{"id":838,"depth":259,"text":839},{"id":1204,"depth":251,"text":1205,"children":1986},[1987,1988],{"id":1238,"depth":259,"text":1239},{"id":1253,"depth":259,"text":1254},{"id":1672,"depth":251,"text":1673},{"id":1713,"depth":251,"text":1714},{"id":1747,"depth":251,"text":1748,"children":1992},[1993],{"id":1769,"depth":259,"text":1770},{"id":1940,"depth":251,"text":1941},[1996,1805],"seo","Learn what Core Web Vitals are and how to measure and improve LCP, INP and CLS to give visitors a better experience and help your site's SEO, step by step.","core-web-vitals-how-user-experience-affects-seo","md",{},"\u002Fen\u002Fblog\u002Fcore-web-vitals-how-user-experience-affects-seo","web-vitals-como-a-experiencia-do-usuario-vai-afetar-o-seo-do-seu-site","2024-10-25",{"title":6,"description":1997},{"loc":2001,"images":2006,"lastmod":2011},[2007,2008,2009,2010],{"loc":128},{"loc":758},{"loc":1211},{"loc":1720},"2026-10-06","en\u002Fblog\u002Fcore-web-vitals-how-user-experience-affects-seo",1677,"L3hm4FbnWENIlKO8xefatTM-yP_5wt5AadGS8F4FCSQ",{"id":2016,"title":2017,"articleCover":2018,"articleCoverEmbed":8,"articleCoverEmbedUploadDate":8,"articleCoverHeight":9,"articleCoverWidth":10,"authorId":11,"body":2019,"categoriesIds":3473,"description":3476,"enAlternateSlug":3477,"extension":1999,"meta":3478,"navigation":423,"path":70,"ptBrAlternateSlug":3479,"publishedAt":3480,"seo":3481,"sitemap":3482,"stem":3486,"updatedAt":2011,"wordCount":3487,"__hash__":3488},"blogEn\u002Fen\u002Fblog\u002Fhow-to-create-structured-data-with-nuxtjs.md","What is Structured Data and How to Add it in Nuxt.JS","\u002Fimages\u002Fen\u002Fblog\u002Fseo\u002Fstructured-data\u002Fstructured-data-thumb-1.webp",{"type":13,"value":2020,"toc":3445},[2021,2028,2032,2035,2042,2046,2054,2061,2067,2071,2074,2084,2195,2199,2202,2213,2216,2220,2223,2237,2241,2254,2257,2266,2273,2297,2303,2318,2329,2390,2393,2397,2407,2452,2462,2772,2784,2788,2796,2919,2938,2942,2983,2987,2993,3138,3141,3147,3151,3161,3165,3168,3191,3194,3222,3226,3229,3248,3251,3254,3258,3261,3269,3273,3276,3291,3301,3304,3352,3355,3359,3371,3375,3379,3385,3389,3392,3396,3399,3403,3406,3410,3413,3415,3424,3442],[16,2022,2023,2024,2027],{},"Here you will see what Structured Data is, when to use it, when not to, and how to mark up your blog articles in Nuxt.JS with ",[28,2025,2026],{},"nuxt-schema-org",". After that come validating the markup and what to do so Google discovers and indexes your content and, when possible, recommends it in Discover.",[73,2029,2031],{"id":2030},"what-is-structured-data","What is Structured Data?",[16,2033,2034],{},"Structured data is information from a website that is organized in a standardized format such as JSON-LD, Microdata, or RDFa. Google recommends JSON-LD, which is kept separate from the visible HTML and is the easiest to maintain, and it is the format we use here.",[16,2036,2037,2038,2041],{},"Through structured data, search engines like Google receive more information about what your page is about. Based on this information, along with other factors, search engines can display ",[28,2039,2040],{},"Rich Results"," of your site's pages in search results.",[73,2043,2045],{"id":2044},"what-are-rich-snippets","What are Rich Snippets?",[16,2047,2048,1031,2051,2053],{},[28,2049,2050],{},"Rich Snippets",[28,2052,2040],{}," are visual enhancements in search results such as images, prices, breadcrumbs, review stars, etc.",[16,2055,2056,2057,2060],{},"Below, you can see an example of a Rich Result on Google from the ",[28,2058,2059],{},"Yahoo Finance"," website, where an image, title, and publication date are displayed. These visual elements increase the chances of attracting the user's attention and driving them to your site.",[123,2062],{"alt":2063,"height":2064,"src":2065,"width":2066},"example of a rich search result on Google from Yahoo Finance",358,"\u002Fimages\u002Fblog\u002Fseo\u002Fstructured-data\u002Fyahoo-finances-schema-org-rich-result.webp",688,[73,2068,2070],{"id":2069},"example-of-structured-data-code","Example of Structured Data Code",[16,2072,2073],{},"Below you can see an example of structured data in JSON-LD. Don't worry, you won't need to write this manually, we'll use a Nuxt tool to generate the code.",[2075,2076,2077],"blockquote",{},[16,2078,2079,2080,2083],{},"This example uses ",[28,2081,2082],{},"FAQPage",", which was the most common rich result type for years. Google stopped showing the FAQ rich result on May 7, 2026, for every kind of site, and removed the feature's documentation in June. The markup is still valid in schema.org, but today it only describes the content and does not change how your result looks in search.",[149,2085,2087],{"className":151,"code":2086,"language":153,"meta":154,"style":154},"\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\": \"What is a CPF Generator?\",\n        \"acceptedAnswer\": {\n          \"@type\": \"Answer\",\n          \"text\": \"A CPF Generator is a tool that generates valid CPF numbers, useful for testing and system development. It applies the official CPF validation algorithm to ensure that the generated numbers are correctly formatted.\"\n        }\n      }\n    ]\n  }\n\u003C\u002Fscript>\n",[28,2088,2089,2108,2113,2118,2123,2128,2133,2138,2143,2148,2153,2158,2163,2168,2173,2178,2183,2187],{"__ignoreMap":154},[158,2090,2091,2093,2095,2097,2099,2101,2104,2106],{"class":160,"line":161},[158,2092,165],{"class":164},[158,2094,654],{"class":168},[158,2096,1076],{"class":171},[158,2098,175],{"class":168},[158,2100,179],{"class":178},[158,2102,2103],{"class":182},"application\u002Fld+json",[158,2105,179],{"class":178},[158,2107,647],{"class":164},[158,2109,2110],{"class":160,"line":251},[158,2111,2112],{"class":164},"  {\n",[158,2114,2115],{"class":160,"line":259},[158,2116,2117],{"class":164},"    \"@type\": \"FAQPage\",\n",[158,2119,2120],{"class":160,"line":275},[158,2121,2122],{"class":164},"    \"@context\": \"https:\u002F\u002Fschema.org\",\n",[158,2124,2125],{"class":160,"line":290},[158,2126,2127],{"class":164},"    \"@graph\": [\n",[158,2129,2130],{"class":160,"line":305},[158,2131,2132],{"class":164},"      {\n",[158,2134,2135],{"class":160,"line":320},[158,2136,2137],{"class":164},"        \"@id\": \"https:\u002F\u002Fcodigoaoponto.com\u002Ftools\u002Fcpf-generator\u002F#\u002Fschema\u002Fquestion\u002Fc6e1aab\",\n",[158,2139,2140],{"class":160,"line":326},[158,2141,2142],{"class":164},"        \"@type\": \"Question\",\n",[158,2144,2145],{"class":160,"line":438},[158,2146,2147],{"class":164},"        \"inLanguage\": \"pt-BR\",\n",[158,2149,2150],{"class":160,"line":454},[158,2151,2152],{"class":164},"        \"name\": \"What is a CPF Generator?\",\n",[158,2154,2155],{"class":160,"line":475},[158,2156,2157],{"class":164},"        \"acceptedAnswer\": {\n",[158,2159,2160],{"class":160,"line":491},[158,2161,2162],{"class":164},"          \"@type\": \"Answer\",\n",[158,2164,2165],{"class":160,"line":506},[158,2166,2167],{"class":164},"          \"text\": \"A CPF Generator is a tool that generates valid CPF numbers, useful for testing and system development. It applies the official CPF validation algorithm to ensure that the generated numbers are correctly formatted.\"\n",[158,2169,2170],{"class":160,"line":521},[158,2171,2172],{"class":164},"        }\n",[158,2174,2175],{"class":160,"line":536},[158,2176,2177],{"class":164},"      }\n",[158,2179,2180],{"class":160,"line":541},[158,2181,2182],{"class":164},"    ]\n",[158,2184,2185],{"class":160,"line":546},[158,2186,1338],{"class":164},[158,2188,2189,2191,2193],{"class":160,"line":554},[158,2190,677],{"class":164},[158,2192,654],{"class":168},[158,2194,647],{"class":164},[73,2196,2198],{"id":2197},"when-to-use-structured-data","When to Use Structured Data?",[16,2200,2201],{},"Use Structured Data when:",[55,2203,2204,2207,2210],{},[58,2205,2206],{},"The page content fits into one of the supported categories, such as articles, products, recipes, events, job postings, etc.",[58,2208,2209],{},"You want to increase your page visibility and click-through rate (CTR).",[58,2211,2212],{},"You want to help search engines better understand your website's content.",[16,2214,2215],{},"In any case, what you mark up has to be visible to the user on the page, and the properties have to be kept up to date.",[73,2217,2219],{"id":2218},"when-not-to-use-structured-data","When Not to Use Structured Data?",[16,2221,2222],{},"Avoid using Structured Data when:",[55,2224,2225,2228,2231,2234],{},[58,2226,2227],{},"The page content does not fit into the supported categories.",[58,2229,2230],{},"The content is of low quality; structured data won't improve it.",[58,2232,2233],{},"The content changes frequently, making it costly to update this information regularly.",[58,2235,2236],{},"The marked-up content does not appear on the page. Google treats that as misuse of structured data and can apply a manual action to your site.",[73,2238,2240],{"id":2239},"installing-the-schemaorg-package-in-nuxt","Installing the Schema.org Package in Nuxt",[16,2242,2243,2249,2250,2253],{},[68,2244,2248],{"href":2245,"rel":2246},"https:\u002F\u002Fnuxtseo.com",[2247],"nofollow","Nuxt SEO"," is a collection of SEO modules that make it easier to develop ",[28,2251,2252],{},"technical SEO"," for your website. In this tutorial, we will use the module that simplifies the implementation of structured data.",[16,2255,2256],{},"You can install this module in several ways; here, I'll show the two main ones:",[2258,2259,2260,2263],"ol",{},[58,2261,2262],{},"nuxi (Nuxt's official command-line interface)",[58,2264,2265],{},"npm (Package manager)",[16,2267,2268,2269,2272],{},"If you are using ",[28,2270,2271],{},"nuxi",", simply run the following command:",[149,2274,2278],{"className":2275,"code":2276,"language":2277,"meta":154,"style":154},"language-bash shiki shiki-themes dracula","npx nuxi module add schema-org\n","bash",[28,2279,2280],{"__ignoreMap":154},[158,2281,2282,2285,2288,2291,2294],{"class":160,"line":161},[158,2283,2284],{"class":661},"npx",[158,2286,2287],{"class":182}," nuxi",[158,2289,2290],{"class":182}," module",[158,2292,2293],{"class":182}," add",[158,2295,2296],{"class":182}," schema-org\n",[16,2298,2268,2299,2302],{},[28,2300,2301],{},"npm",", you'll need an extra step. Start by installing the package:",[149,2304,2306],{"className":2275,"code":2305,"language":2277,"meta":154,"style":154},"npm i nuxt-schema-org\n",[28,2307,2308],{"__ignoreMap":154},[158,2309,2310,2312,2315],{"class":160,"line":161},[158,2311,2301],{"class":661},[158,2313,2314],{"class":182}," i",[158,2316,2317],{"class":182}," nuxt-schema-org\n",[16,2319,2320,2321,2324,2325,2328],{},"Then add the installed package to the ",[28,2322,2323],{},"modules"," option in the ",[28,2326,2327],{},"nuxt.config.ts"," file:",[149,2330,2332],{"className":1264,"code":2331,"language":1266,"meta":154,"style":154},"export default defineNuxtConfig({\n  \u002F\u002F other configurations...\n  modules: [\n    \u002F\u002F other modules\n    \"nuxt-schema-org\"\n  ]\n  \u002F\u002F other configurations...\n});\n",[28,2333,2334,2348,2353,2363,2368,2377,2382,2386],{"__ignoreMap":154},[158,2335,2336,2339,2342,2345],{"class":160,"line":161},[158,2337,2338],{"class":168},"export",[158,2340,2341],{"class":168}," default",[158,2343,2344],{"class":661}," defineNuxtConfig",[158,2346,2347],{"class":164},"({\n",[158,2349,2350],{"class":160,"line":251},[158,2351,2352],{"class":247},"  \u002F\u002F other configurations...\n",[158,2354,2355,2358,2360],{"class":160,"line":259},[158,2356,2357],{"class":164},"  modules",[158,2359,352],{"class":168},[158,2361,2362],{"class":164}," [\n",[158,2364,2365],{"class":160,"line":275},[158,2366,2367],{"class":247},"    \u002F\u002F other modules\n",[158,2369,2370,2373,2375],{"class":160,"line":290},[158,2371,2372],{"class":178},"    \"",[158,2374,2026],{"class":182},[158,2376,272],{"class":178},[158,2378,2379],{"class":160,"line":305},[158,2380,2381],{"class":164},"  ]\n",[158,2383,2384],{"class":160,"line":320},[158,2385,2352],{"class":247},[158,2387,2388],{"class":160,"line":326},[158,2389,1854],{"class":164},[16,2391,2392],{},"Once this is done, we can start using the tool.",[73,2394,2396],{"id":2395},"structured-data-for-articles-in-nuxtjs","Structured Data for Articles in Nuxt.JS",[16,2398,2399,2400,2403,2404,2406],{},"For a blog, the most useful type is ",[28,2401,2402],{},"Article",". It tells Google that the page is an article, who wrote it, when it was published and updated, and which image represents it. Google does not require any property for ",[28,2405,2402],{},", but it recommends these:",[55,2408,2409,2415,2420,2429,2446],{},[58,2410,2411,2414],{},[28,2412,2413],{},"headline",": the article title.",[58,2416,2417,2419],{},[28,2418,978],{},": a representative image. Google recommends several high-resolution images in 16x9, 4x3 and 1x1 aspect ratios.",[58,2421,2422,35,2425,2428],{},[28,2423,2424],{},"datePublished",[28,2426,2427],{},"dateModified",": the date of first publication and of the last modification, in ISO 8601 format.",[58,2430,2431,2434,2435,2438,2439,35,2442,2445],{},[28,2432,2433],{},"author",": preferably a ",[28,2436,2437],{},"Person"," with ",[28,2440,2441],{},"name",[28,2443,2444],{},"url",", pointing to a page that identifies the author.",[58,2447,2448,2451],{},[28,2449,2450],{},"publisher",": the organization behind the site, with a name and logo.",[16,2453,2454,2455,2458,2459,2461],{},"In Nuxt, the ",[28,2456,2457],{},"useSchemaOrg"," composable is globally available, and you can use it inside the ",[28,2460,654],{}," tag of the page. In a blog page that loads the post with Nuxt Content, it looks like this:",[149,2463,2467],{"className":2464,"code":2465,"language":2466,"meta":154,"style":154},"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",[28,2468,2469,2492,2506,2510,2553,2582,2586,2590,2597,2604,2614,2624,2634,2644,2660,2665,2672,2681,2710,2736,2746,2751,2757,2763],{"__ignoreMap":154},[158,2470,2471,2473,2475,2478,2481,2483,2485,2488,2490],{"class":160,"line":161},[158,2472,165],{"class":164},[158,2474,654],{"class":168},[158,2476,2477],{"class":171}," setup",[158,2479,2480],{"class":171}," lang",[158,2482,175],{"class":168},[158,2484,179],{"class":178},[158,2486,2487],{"class":182},"ts",[158,2489,179],{"class":178},[158,2491,647],{"class":164},[158,2493,2494,2496,2499,2501,2504],{"class":160,"line":251},[158,2495,1412],{"class":168},[158,2497,2498],{"class":164}," route ",[158,2500,175],{"class":168},[158,2502,2503],{"class":661}," useRoute",[158,2505,1333],{"class":164},[158,2507,2508],{"class":160,"line":259},[158,2509,424],{"emptyLinePlaceholder":423},[158,2511,2512,2514,2517,2519,2522,2524,2527,2530,2532,2535,2538,2541,2544,2547,2550],{"class":160,"line":275},[158,2513,1412],{"class":168},[158,2515,2516],{"class":164}," { data",[158,2518,352],{"class":168},[158,2520,2521],{"class":164}," post } ",[158,2523,175],{"class":168},[158,2525,2526],{"class":168}," await",[158,2528,2529],{"class":661}," useAsyncData",[158,2531,376],{"class":164},[158,2533,2534],{"class":182},"`post-",[158,2536,2537],{"class":168},"${",[158,2539,2540],{"class":164},"route.path",[158,2542,2543],{"class":168},"}",[158,2545,2546],{"class":182},"`",[158,2548,2549],{"class":164},", () ",[158,2551,2552],{"class":168},"=>\n",[158,2554,2555,2558,2560,2562,2565,2567,2570,2573,2576,2579],{"class":160,"line":290},[158,2556,2557],{"class":661},"  queryCollection",[158,2559,376],{"class":164},[158,2561,179],{"class":178},[158,2563,2564],{"class":182},"blog",[158,2566,179],{"class":178},[158,2568,2569],{"class":164},").",[158,2571,2572],{"class":661},"path",[158,2574,2575],{"class":164},"(route.path).",[158,2577,2578],{"class":661},"first",[158,2580,2581],{"class":164},"()\n",[158,2583,2584],{"class":160,"line":305},[158,2585,400],{"class":164},[158,2587,2588],{"class":160,"line":320},[158,2589,424],{"emptyLinePlaceholder":423},[158,2591,2592,2594],{"class":160,"line":326},[158,2593,2457],{"class":661},[158,2595,2596],{"class":164},"([\n",[158,2598,2599,2602],{"class":160,"line":438},[158,2600,2601],{"class":661},"  defineArticle",[158,2603,2347],{"class":164},[158,2605,2606,2609,2611],{"class":160,"line":454},[158,2607,2608],{"class":164},"    headline",[158,2610,352],{"class":168},[158,2612,2613],{"class":164}," post.value?.title,\n",[158,2615,2616,2619,2621],{"class":160,"line":475},[158,2617,2618],{"class":164},"    description",[158,2620,352],{"class":168},[158,2622,2623],{"class":164}," post.value?.description,\n",[158,2625,2626,2629,2631],{"class":160,"line":491},[158,2627,2628],{"class":164},"    image",[158,2630,352],{"class":168},[158,2632,2633],{"class":164}," post.value?.articleCover,\n",[158,2635,2636,2639,2641],{"class":160,"line":506},[158,2637,2638],{"class":164},"    datePublished",[158,2640,352],{"class":168},[158,2642,2643],{"class":164}," post.value?.publishedAt,\n",[158,2645,2646,2649,2651,2654,2657],{"class":160,"line":521},[158,2647,2648],{"class":164},"    dateModified",[158,2650,352],{"class":168},[158,2652,2653],{"class":164}," post.value?.updatedAt ",[158,2655,2656],{"class":168},"??",[158,2658,2659],{"class":164}," post.value?.publishedAt\n",[158,2661,2662],{"class":160,"line":536},[158,2663,2664],{"class":164},"  }),\n",[158,2666,2667,2670],{"class":160,"line":541},[158,2668,2669],{"class":661},"  defineBreadcrumb",[158,2671,2347],{"class":164},[158,2673,2674,2677,2679],{"class":160,"line":546},[158,2675,2676],{"class":164},"    itemListElement",[158,2678,352],{"class":168},[158,2680,2362],{"class":164},[158,2682,2683,2686,2688,2690,2693,2695,2698,2700,2702,2705,2707],{"class":160,"line":554},[158,2684,2685],{"class":164},"      { name",[158,2687,352],{"class":168},[158,2689,355],{"class":178},[158,2691,2692],{"class":182},"Home",[158,2694,179],{"class":178},[158,2696,2697],{"class":164},", item",[158,2699,352],{"class":168},[158,2701,355],{"class":178},[158,2703,2704],{"class":182},"\u002F",[158,2706,179],{"class":178},[158,2708,2709],{"class":164}," },\n",[158,2711,2712,2714,2716,2718,2721,2723,2725,2727,2729,2732,2734],{"class":160,"line":582},[158,2713,2685],{"class":164},[158,2715,352],{"class":168},[158,2717,355],{"class":178},[158,2719,2720],{"class":182},"Blog",[158,2722,179],{"class":178},[158,2724,2697],{"class":164},[158,2726,352],{"class":168},[158,2728,355],{"class":178},[158,2730,2731],{"class":182},"\u002Fblog",[158,2733,179],{"class":178},[158,2735,2709],{"class":164},[158,2737,2739,2741,2743],{"class":160,"line":2738},20,[158,2740,2685],{"class":164},[158,2742,352],{"class":168},[158,2744,2745],{"class":164}," post.value?.title }\n",[158,2747,2749],{"class":160,"line":2748},21,[158,2750,2182],{"class":164},[158,2752,2754],{"class":160,"line":2753},22,[158,2755,2756],{"class":164},"  })\n",[158,2758,2760],{"class":160,"line":2759},23,[158,2761,2762],{"class":164},"]);\n",[158,2764,2766,2768,2770],{"class":160,"line":2765},24,[158,2767,677],{"class":164},[158,2769,654],{"class":168},[158,2771,647],{"class":164},[16,2773,2774,2775,2777,2778,2781,2782,23],{},"The fields come from the article's front matter, so ",[28,2776,2427],{}," only reflects reality if you update ",[28,2779,2780],{},"updatedAt"," when the content actually changes. The module converts the dates to ISO 8601 and turns the image path into an absolute URL using the site ",[28,2783,2444],{},[141,2785,2787],{"id":2786},"global-site-configuration","Global Site Configuration",[16,2789,2790,2791,2793,2794,352],{},"Author and publisher do not need to be repeated on every page. ",[28,2792,2026],{}," uses the site configuration and the organization identity, which you define once in ",[28,2795,2327],{},[149,2797,2800],{"className":2798,"code":2799,"language":2487,"meta":154,"style":154},"language-ts shiki shiki-themes dracula","export default defineNuxtConfig({\n  site: {\n    url: \"https:\u002F\u002Fyoursite.com\",\n    name: \"Site Name\"\n  },\n  schemaOrg: {\n    identity: defineOrganization({\n      name: \"Site Name\",\n      logo: \"https:\u002F\u002Fyoursite.com\u002Flogo-512.png\"\n    })\n  }\n});\n",[28,2801,2802,2812,2821,2837,2851,2856,2865,2877,2892,2906,2911,2915],{"__ignoreMap":154},[158,2803,2804,2806,2808,2810],{"class":160,"line":161},[158,2805,2338],{"class":168},[158,2807,2341],{"class":168},[158,2809,2344],{"class":661},[158,2811,2347],{"class":164},[158,2813,2814,2817,2819],{"class":160,"line":251},[158,2815,2816],{"class":164},"  site",[158,2818,352],{"class":168},[158,2820,343],{"class":164},[158,2822,2823,2826,2828,2830,2833,2835],{"class":160,"line":259},[158,2824,2825],{"class":164},"    url",[158,2827,352],{"class":168},[158,2829,355],{"class":178},[158,2831,2832],{"class":182},"https:\u002F\u002Fyoursite.com",[158,2834,179],{"class":178},[158,2836,1570],{"class":164},[158,2838,2839,2842,2844,2846,2849],{"class":160,"line":275},[158,2840,2841],{"class":164},"    name",[158,2843,352],{"class":168},[158,2845,355],{"class":178},[158,2847,2848],{"class":182},"Site Name",[158,2850,272],{"class":178},[158,2852,2853],{"class":160,"line":290},[158,2854,2855],{"class":164},"  },\n",[158,2857,2858,2861,2863],{"class":160,"line":305},[158,2859,2860],{"class":164},"  schemaOrg",[158,2862,352],{"class":168},[158,2864,343],{"class":164},[158,2866,2867,2870,2872,2875],{"class":160,"line":320},[158,2868,2869],{"class":164},"    identity",[158,2871,352],{"class":168},[158,2873,2874],{"class":661}," defineOrganization",[158,2876,2347],{"class":164},[158,2878,2879,2882,2884,2886,2888,2890],{"class":160,"line":326},[158,2880,2881],{"class":164},"      name",[158,2883,352],{"class":168},[158,2885,355],{"class":178},[158,2887,2848],{"class":182},[158,2889,179],{"class":178},[158,2891,1570],{"class":164},[158,2893,2894,2897,2899,2901,2904],{"class":160,"line":438},[158,2895,2896],{"class":164},"      logo",[158,2898,352],{"class":168},[158,2900,355],{"class":178},[158,2902,2903],{"class":182},"https:\u002F\u002Fyoursite.com\u002Flogo-512.png",[158,2905,272],{"class":178},[158,2907,2908],{"class":160,"line":454},[158,2909,2910],{"class":164},"    })\n",[158,2912,2913],{"class":160,"line":475},[158,2914,1338],{"class":164},[158,2916,2917],{"class":160,"line":491},[158,2918,1854],{"class":164},[16,2920,2921,2922,2924,2925,2927,2928,2438,2930,35,2932,2934,2935,23],{},"If the ",[28,2923,2402],{}," has no ",[28,2926,2450],{},", the module uses this identity. For the author, pass a ",[28,2929,2437],{},[28,2931,2441],{},[28,2933,2444],{}," to ",[28,2936,2937],{},"defineArticle",[141,2939,2941],{"id":2940},"how-the-entities-connect","How the Entities Connect",[16,2943,2944,2945,2948,2949,31,2952,31,2955,31,2957,35,2959,2962,2963,2966,2967,2969,2970,2972,2973,35,2975,2977,2978,35,2980,2982],{},"The module builds a single ",[28,2946,2947],{},"@graph"," in which ",[28,2950,2951],{},"WebSite",[28,2953,2954],{},"WebPage",[28,2956,2402],{},[28,2958,2437],{},[28,2960,2961],{},"Organization"," reference each other by ",[28,2964,2965],{},"@id",". The ",[28,2968,2402],{}," points to the current ",[28,2971,2954],{},", and ",[28,2974,2433],{},[28,2976,2450],{}," point to the ",[28,2979,2437],{},[28,2981,2961],{}," nodes. That link tells Google the article belongs to that author and that brand.",[141,2984,2986],{"id":2985},"what-about-faqpage","What About FAQPage?",[16,2988,2989,2990,2992],{},"If the page has a visible question and answer section, marking it up with ",[28,2991,2082],{}," is still worth it. Just don't expect the dropdown in search. The example below generates the same JSON-LD we saw earlier:",[149,2994,2996],{"className":2464,"code":2995,"language":2466,"meta":154,"style":154},"\u003Cscript setup>\nuseSchemaOrg([\n  defineWebPage({\n    \"@type\": \"FAQPage\"\n  }),\n  defineQuestion({\n    name: \"What is a CPF Generator?\",\n    acceptedAnswer:\n      \"A CPF Generator is a tool that generates valid CPF numbers, useful for testing and system development. It applies the official CPF validation algorithm to ensure that the generated numbers are correctly formatted.\"\n  }),\n  defineQuestion({\n    name: \"How does the CPF Generator work?\",\n    acceptedAnswer:\n      \"The CPF Generator randomly creates the first nine digits of the CPF and then calculates the two check digits using the official validation algorithm, ensuring the generated number is valid.\"\n  })\n]);\n\u003C\u002Fscript>\n",[28,2997,2998,3008,3014,3021,3038,3042,3049,3064,3072,3082,3086,3092,3107,3113,3122,3126,3130],{"__ignoreMap":154},[158,2999,3000,3002,3004,3006],{"class":160,"line":161},[158,3001,165],{"class":164},[158,3003,654],{"class":168},[158,3005,2477],{"class":171},[158,3007,647],{"class":164},[158,3009,3010,3012],{"class":160,"line":251},[158,3011,2457],{"class":661},[158,3013,2596],{"class":164},[158,3015,3016,3019],{"class":160,"line":259},[158,3017,3018],{"class":661},"  defineWebPage",[158,3020,2347],{"class":164},[158,3022,3023,3025,3028,3030,3032,3034,3036],{"class":160,"line":275},[158,3024,2372],{"class":178},[158,3026,3027],{"class":182},"@type",[158,3029,179],{"class":178},[158,3031,352],{"class":168},[158,3033,355],{"class":178},[158,3035,2082],{"class":182},[158,3037,272],{"class":178},[158,3039,3040],{"class":160,"line":290},[158,3041,2664],{"class":164},[158,3043,3044,3047],{"class":160,"line":305},[158,3045,3046],{"class":661},"  defineQuestion",[158,3048,2347],{"class":164},[158,3050,3051,3053,3055,3057,3060,3062],{"class":160,"line":320},[158,3052,2841],{"class":164},[158,3054,352],{"class":168},[158,3056,355],{"class":178},[158,3058,3059],{"class":182},"What is a CPF Generator?",[158,3061,179],{"class":178},[158,3063,1570],{"class":164},[158,3065,3066,3069],{"class":160,"line":326},[158,3067,3068],{"class":164},"    acceptedAnswer",[158,3070,3071],{"class":168},":\n",[158,3073,3074,3077,3080],{"class":160,"line":438},[158,3075,3076],{"class":178},"      \"",[158,3078,3079],{"class":182},"A CPF Generator is a tool that generates valid CPF numbers, useful for testing and system development. It applies the official CPF validation algorithm to ensure that the generated numbers are correctly formatted.",[158,3081,272],{"class":178},[158,3083,3084],{"class":160,"line":454},[158,3085,2664],{"class":164},[158,3087,3088,3090],{"class":160,"line":475},[158,3089,3046],{"class":661},[158,3091,2347],{"class":164},[158,3093,3094,3096,3098,3100,3103,3105],{"class":160,"line":491},[158,3095,2841],{"class":164},[158,3097,352],{"class":168},[158,3099,355],{"class":178},[158,3101,3102],{"class":182},"How does the CPF Generator work?",[158,3104,179],{"class":178},[158,3106,1570],{"class":164},[158,3108,3109,3111],{"class":160,"line":506},[158,3110,3068],{"class":164},[158,3112,3071],{"class":168},[158,3114,3115,3117,3120],{"class":160,"line":521},[158,3116,3076],{"class":178},[158,3118,3119],{"class":182},"The CPF Generator randomly creates the first nine digits of the CPF and then calculates the two check digits using the official validation algorithm, ensuring the generated number is valid.",[158,3121,272],{"class":178},[158,3123,3124],{"class":160,"line":536},[158,3125,2756],{"class":164},[158,3127,3128],{"class":160,"line":541},[158,3129,2762],{"class":164},[158,3131,3132,3134,3136],{"class":160,"line":546},[158,3133,677],{"class":164},[158,3135,654],{"class":168},[158,3137,647],{"class":164},[16,3139,3140],{},"Until May 2026, this markup could produce a rich result like the one in the image below:",[123,3142],{"alt":3143,"height":3144,"src":3145,"width":3146},"example of a rich FAQ result on Google for the question about what Nuxt.JS is, shown before Google ended the feature",351,"\u002Fimages\u002Fblog\u002Fseo\u002Fstructured-data\u002Ffaq-rich-result-example-1.webp",681,[73,3148,3150],{"id":3149},"how-to-check-that-the-json-ld-is-in-the-html","How to Check That the JSON-LD Is in the HTML",[16,3152,3153,3154,3157,3158,3160],{},"Open the page in the browser and use \"View page source\", not \"Inspect element\". Look for a ",[28,3155,3156],{},"\u003Cscript type=\"application\u002Fld+json\">"," block. ",[28,3159,2026],{}," injects the JSON-LD during server rendering, so it has to be in the raw HTML. If it only shows up after hydration, review the rendering configuration of the page.",[73,3162,3164],{"id":3163},"how-to-validate-structured-data","How to Validate Structured Data",[16,3166,3167],{},"After publishing, validate the page with these tools:",[2258,3169,3170,3179,3188],{},[58,3171,3172,3173,3178],{},"Google's ",[68,3174,3177],{"href":3175,"rel":3176},"https:\u002F\u002Fsearch.google.com\u002Ftest\u002Frich-results",[2247],"Rich Results Test",": shows the items detected on the URL and lists errors and warnings.",[58,3180,3181,3182,3187],{},"The ",[68,3183,3186],{"href":3184,"rel":3185},"https:\u002F\u002Fvalidator.schema.org",[2247],"Schema Markup Validator",": checks the JSON-LD syntax against schema.org, regardless of whether Google shows a rich result.",[58,3189,3190],{},"The structured data report in Search Console: groups the errors and warnings of the whole site.",[16,3192,3193],{},"The most common problems on blogs are these:",[55,3195,3196,3207,3210,3219],{},[58,3197,3198,3199,1031,3201,3203,3204,3206],{},"A missing recommended property, such as ",[28,3200,978],{},[28,3202,2433],{},". It is not a critical error in ",[28,3205,2402],{},", but it limits what Google can use.",[58,3208,3209],{},"A small or inaccessible image. For Discover, the image needs to be at least 1200 px wide and the URL cannot be blocked for the crawler.",[58,3211,3212,3213,1031,3216,23],{},"An invalid date format. Use ISO 8601, like ",[28,3214,3215],{},"2026-10-03",[28,3217,3218],{},"2026-10-03T14:30:00-03:00",[58,3220,3221],{},"Markup that differs from the visible content. The title, author, date and image in the schema must match what the user sees on the page.",[73,3223,3225],{"id":3224},"how-to-get-google-to-index-your-article","How to Get Google to Index Your Article",[16,3227,3228],{},"Correct structured data does not help if Google does not index the page. The flow for a new article is this:",[2258,3230,3231,3242,3245],{},[58,3232,3233,3234,3237,3238,3241],{},"Confirm the URL is in ",[28,3235,3236],{},"sitemap.xml"," and that the sitemap is submitted in Search Console. In Nuxt, the ",[28,3239,3240],{},"@nuxtjs\u002Fsitemap"," module generates this file.",[58,3243,3244],{},"Paste the URL in the \"Inspect any URL\" field of Search Console.",[58,3246,3247],{},"Click \"Request indexing\".",[16,3249,3250],{},"The indexing request puts the URL in a crawl queue, but it does not guarantee indexing, and Google does not give a timeframe. Google also does not publish the daily request limit. When you reach it, the button becomes unavailable until the next day, so use it only for important URLs and do not resubmit the same page several times.",[16,3252,3253],{},"For the other pages, what helps Google find them is the sitemap and internal links. A page with no links from other pages on the site tends to be discovered more slowly. Link to new articles from the blog listing and from related posts.",[141,3255,3257],{"id":3256},"discovered-currently-not-indexed","Discovered, Currently Not Indexed",[16,3259,3260],{},"In the page indexing report, two statuses confuse many people:",[55,3262,3263,3266],{},[58,3264,3265],{},"Discovered, currently not indexed: Google knows the URL but has not crawled it yet. Strengthen internal links, check that the URL is in the sitemap and verify that the server is not returning 5xx errors or responding slowly.",[58,3267,3268],{},"Crawled, currently not indexed: Google already read the page and decided not to index it for now. It is usually a quality issue: content too similar to something already indexed, shallow, or off the search intent. Improve the content and only then request indexing again.",[73,3270,3272],{"id":3271},"how-to-appear-in-google-discover","How to Appear in Google Discover",[16,3274,3275],{},"Discover is the content feed in the Google app and on mobile browsers. It shows content based on each user's interests, without depending on a search. According to Google's documentation, to be eligible the content needs to:",[55,3277,3278,3281,3288],{},[58,3279,3280],{},"Be indexed and follow Discover's content policies, with no clickbait or sensationalism.",[58,3282,3283,3284,3287],{},"Have an image at least 1200 px wide and more than 300,000 pixels in total, in a 16x9 aspect ratio, with the ",[28,3285,3286],{},"max-image-preview:large"," robots meta enabled.",[58,3289,3290],{},"Be original, helpful and made for people.",[16,3292,3293,3294,3296,3297,3300],{},"No structured data is required for Discover. But Google uses the schema.org ",[28,3295,978],{}," and the ",[28,3298,3299],{},"og:image"," meta tag to choose the card image, so keep both pointing to a good image and do not use the site logo instead.",[16,3302,3303],{},"In Nuxt, the robots meta can be set on the page itself:",[149,3305,3307],{"className":2464,"code":3306,"language":2466,"meta":154,"style":154},"\u003Cscript setup>\nuseSeoMeta({\n  robots: \"index, follow, max-image-preview:large\"\n});\n\u003C\u002Fscript>\n",[28,3308,3309,3319,3326,3340,3344],{"__ignoreMap":154},[158,3310,3311,3313,3315,3317],{"class":160,"line":161},[158,3312,165],{"class":164},[158,3314,654],{"class":168},[158,3316,2477],{"class":171},[158,3318,647],{"class":164},[158,3320,3321,3324],{"class":160,"line":251},[158,3322,3323],{"class":661},"useSeoMeta",[158,3325,2347],{"class":164},[158,3327,3328,3331,3333,3335,3338],{"class":160,"line":259},[158,3329,3330],{"class":164},"  robots",[158,3332,352],{"class":168},[158,3334,355],{"class":178},[158,3336,3337],{"class":182},"index, follow, max-image-preview:large",[158,3339,272],{"class":178},[158,3341,3342],{"class":160,"line":275},[158,3343,1854],{"class":164},[158,3345,3346,3348,3350],{"class":160,"line":290},[158,3347,677],{"class":164},[158,3349,654],{"class":168},[158,3351,647],{"class":164},[16,3353,3354],{},"Discover performance shows up in its own report in Search Console. If your site has no data there, the content is not being shown in the feed yet.",[73,3356,3358],{"id":3357},"notifying-bing-with-indexnow","Notifying Bing with IndexNow",[16,3360,3361,3362,3365,3366,23],{},"IndexNow is a protocol adopted by Bing and other search engines to signal when a URL is created, updated or removed. You generate a key, publish a ",[28,3363,3364],{},".txt"," file with it at the root of the domain and make a request to the IndexNow endpoint whenever you publish or update an article. This tells the search engine something new exists, but it does not guarantee immediate indexing. The official guide is at ",[68,3367,3370],{"href":3368,"rel":3369},"https:\u002F\u002Fwww.bing.com\u002Findexnow\u002Fgetstarted",[2247],"bing.com\u002Findexnow\u002Fgetstarted",[73,3372,3374],{"id":3373},"frequently-asked-questions","Frequently Asked Questions",[141,3376,3378],{"id":3377},"do-i-need-structured-data-for-my-blog-to-rank","Do I need structured data for my blog to rank?",[16,3380,3381,3382,3384],{},"No. It is not required to rank, but it helps Google understand your articles better. For a blog, the starting point is ",[28,3383,2402],{}," with an author and an image, plus the breadcrumb.",[141,3386,3388],{"id":3387},"is-it-worth-keeping-faqpage-if-it-no-longer-produces-a-rich-result","Is it worth keeping FAQPage if it no longer produces a rich result?",[16,3390,3391],{},"It is, if the page has a question and answer section that is visible to the user. In that case the markup serves to describe the content.",[141,3393,3395],{"id":3394},"does-structured-data-guarantee-my-post-shows-up-in-discover","Does structured data guarantee my post shows up in Discover?",[16,3397,3398],{},"No. Discover does not require structured data. What matters is that the content is indexed, has a large image and follows the content policies.",[141,3400,3402],{"id":3401},"my-article-shows-as-crawled-currently-not-indexed-what-should-i-do","My article shows as \"Crawled, currently not indexed\". What should I do?",[16,3404,3405],{},"That status usually points to the quality or originality of the page. Improve the content, strengthen internal links and request indexing again afterward.",[141,3407,3409],{"id":3408},"how-do-i-know-google-is-reading-my-json-ld","How do I know Google is reading my JSON-LD?",[16,3411,3412],{},"Check the raw HTML in \"View page source\", test the URL in the Rich Results Test and follow the structured data report in Search Console.",[73,3414,1941],{"id":1940},[16,3416,3417,3418,3420,3421,3423],{},"For each new article, mark up ",[28,3419,2402],{}," with author, image and dates, check the JSON-LD in the source, validate it in the Rich Results Test and follow the indexing report in Search Console. Update ",[28,3422,2780],{}," only when the content really changes and, if Bing matters to you, set up IndexNow.",[16,3425,3426,3427,31,3432,35,3437,23],{},"To go deeper, read the ",[68,3428,3431],{"href":3429,"rel":3430},"https:\u002F\u002Fnuxtseo.com\u002Fdocs\u002Fschema-org\u002Fgetting-started\u002Fintroduction",[2247],"complete documentation of the module",[68,3433,3436],{"href":3434,"rel":3435},"https:\u002F\u002Fdevelopers.google.com\u002Fsearch\u002Fdocs\u002Fappearance\u002Fstructured-data\u002Farticle",[2247],"Google's documentation on Article structured data",[68,3438,3441],{"href":3439,"rel":3440},"https:\u002F\u002Fdevelopers.google.com\u002Fsearch\u002Fdocs\u002Fappearance\u002Fgoogle-discover",[2247],"Google's Discover documentation",[1970,3443,3444],{},"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":154,"searchDepth":251,"depth":251,"links":3446},[3447,3448,3449,3450,3451,3452,3453,3458,3459,3460,3463,3464,3465,3472],{"id":2030,"depth":251,"text":2031},{"id":2044,"depth":251,"text":2045},{"id":2069,"depth":251,"text":2070},{"id":2197,"depth":251,"text":2198},{"id":2218,"depth":251,"text":2219},{"id":2239,"depth":251,"text":2240},{"id":2395,"depth":251,"text":2396,"children":3454},[3455,3456,3457],{"id":2786,"depth":259,"text":2787},{"id":2940,"depth":259,"text":2941},{"id":2985,"depth":259,"text":2986},{"id":3149,"depth":251,"text":3150},{"id":3163,"depth":251,"text":3164},{"id":3224,"depth":251,"text":3225,"children":3461},[3462],{"id":3256,"depth":259,"text":3257},{"id":3271,"depth":251,"text":3272},{"id":3357,"depth":251,"text":3358},{"id":3373,"depth":251,"text":3374,"children":3466},[3467,3468,3469,3470,3471],{"id":3377,"depth":259,"text":3378},{"id":3387,"depth":259,"text":3388},{"id":3394,"depth":259,"text":3395},{"id":3401,"depth":259,"text":3402},{"id":3408,"depth":259,"text":3409},{"id":1940,"depth":251,"text":1941},[3474,3475,1996],"nuxt","vuejs","How to add structured data in Nuxt.js with nuxt-schema-org: Article, breadcrumb, validation, indexing in Search Console and Google Discover, with code examples.","how-to-create-structured-data-with-nuxtjs",{},"como-criar-dados-estruturados-com-nuxtjs","2025-01-22",{"title":2017,"description":3476},{"loc":70,"images":3483,"lastmod":2011},[3484,3485],{"loc":2065},{"loc":3145},"en\u002Fblog\u002Fhow-to-create-structured-data-with-nuxtjs",2024,"u3LF7VbQ71jTkhZ6Mxdt0r_KmRugMzYtUkzwze8nyGA",1791682338081]