[{"data":1,"prerenderedAt":439},["Reactive",2],{"/blog/add-the-lang-attribute-to-the-html-tag-in-nextjs":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"categories":11,"body":13,"_type":434,"_id":435,"_source":436,"_file":437,"_extension":438},"/blog/add-the-lang-attribute-to-the-html-tag-in-nextjs","blog",false,"","Add the lang attribute to the HTML tag in NextJS","One of the most common accessibility and HTML validation warnings are the missing lang tag on the HTML tag. Let's explore fixing that using NextJS.","2022-09-18T00:00:00.000Z",[12],"NextJS",{"type":14,"children":15,"toc":430},"root",[16,24,102,118,132,139,152,303,316,322,345,350,424],{"type":17,"tag":18,"props":19,"children":20},"element","p",{},[21],{"type":22,"value":23},"text","One of the most common accessibility and HTML validation warnings are the missing lang tag on the HTML tag. This tag is used to tell the user which language the page is written in and can help the browser better detect automatic translation. Here is an example of what that tag looks like:",{"type":17,"tag":25,"props":26,"children":30},"pre",{"className":27,"code":28,"language":29,"meta":7,"style":7},"language-html shiki shiki-themes material-theme-lighter material-theme-palenight","\u003C!-- English Content -->\n\u003Chtml lang=\"en\">\u003C/html>\n","html",[31],{"type":17,"tag":32,"props":33,"children":34},"code",{"__ignoreMap":7},[35,47],{"type":17,"tag":36,"props":37,"children":40},"span",{"class":38,"line":39},"line",1,[41],{"type":17,"tag":36,"props":42,"children":44},{"style":43},"--shiki-default:#90A4AE;--shiki-dark:#676E95;--shiki-default-font-style:italic;--shiki-dark-font-style:italic",[45],{"type":22,"value":46},"\u003C!-- English Content -->\n",{"type":17,"tag":36,"props":48,"children":50},{"class":38,"line":49},2,[51,57,62,68,73,78,84,88,93,97],{"type":17,"tag":36,"props":52,"children":54},{"style":53},"--shiki-default:#39ADB5;--shiki-dark:#89DDFF",[55],{"type":22,"value":56},"\u003C",{"type":17,"tag":36,"props":58,"children":60},{"style":59},"--shiki-default:#E53935;--shiki-dark:#F07178",[61],{"type":22,"value":29},{"type":17,"tag":36,"props":63,"children":65},{"style":64},"--shiki-default:#9C3EDA;--shiki-dark:#C792EA",[66],{"type":22,"value":67}," lang",{"type":17,"tag":36,"props":69,"children":70},{"style":53},[71],{"type":22,"value":72},"=",{"type":17,"tag":36,"props":74,"children":75},{"style":53},[76],{"type":22,"value":77},"\"",{"type":17,"tag":36,"props":79,"children":81},{"style":80},"--shiki-default:#91B859;--shiki-dark:#C3E88D",[82],{"type":22,"value":83},"en",{"type":17,"tag":36,"props":85,"children":86},{"style":53},[87],{"type":22,"value":77},{"type":17,"tag":36,"props":89,"children":90},{"style":53},[91],{"type":22,"value":92},">\u003C/",{"type":17,"tag":36,"props":94,"children":95},{"style":59},[96],{"type":22,"value":29},{"type":17,"tag":36,"props":98,"children":99},{"style":53},[100],{"type":22,"value":101},">\n",{"type":17,"tag":18,"props":103,"children":104},{},[105,107,116],{"type":22,"value":106},"You can find the ",{"type":17,"tag":108,"props":109,"children":113},"a",{"href":110,"rel":111},"https://www.w3schools.com/tags/ref_language_codes.asp",[112],"nofollow",[114],{"type":22,"value":115},"full list of ISO 639-1 Language Codes",{"type":22,"value":117}," on W3Schools.",{"type":17,"tag":18,"props":119,"children":120},{},[121,123,130],{"type":22,"value":122},"Note: The lang attribute does not have any affect on SEO as indicated by Google in this ",{"type":17,"tag":108,"props":124,"children":127},{"href":125,"rel":126},"https://www.youtube.com/watch?v=isW-Ke-AJJU&t=3354s",[112],[128],{"type":22,"value":129},"Webmaster Hangout video",{"type":22,"value":131},".",{"type":17,"tag":133,"props":134,"children":136},"h2",{"id":135},"the-nextjs-code",[137],{"type":22,"value":138},"The NextJS Code",{"type":17,"tag":18,"props":140,"children":141},{},[142,144,150],{"type":22,"value":143},"Unlike other platforms/frameworks, NextJS has a special configuration for automatically changing out the translation code via the i18n object in the ",{"type":17,"tag":32,"props":145,"children":147},{"className":146},[],[148],{"type":22,"value":149},"next.config.js",{"type":22,"value":151}," file. See an example of the code snippet below:",{"type":17,"tag":25,"props":153,"children":157},{"className":154,"code":155,"filename":149,"language":156,"meta":7,"style":7},"language-js shiki shiki-themes material-theme-lighter material-theme-palenight","module.exports = {\n  i18n: {\n    locales: [\"en\", \"es\"],\n    defaultLocale: \"en\",\n  },\n};\n","js",[158],{"type":17,"tag":32,"props":159,"children":160},{"__ignoreMap":7},[161,179,196,256,285,294],{"type":17,"tag":36,"props":162,"children":163},{"class":38,"line":39},[164,169,174],{"type":17,"tag":36,"props":165,"children":166},{"style":53},[167],{"type":22,"value":168},"module.exports",{"type":17,"tag":36,"props":170,"children":171},{"style":53},[172],{"type":22,"value":173}," =",{"type":17,"tag":36,"props":175,"children":176},{"style":53},[177],{"type":22,"value":178}," {\n",{"type":17,"tag":36,"props":180,"children":181},{"class":38,"line":49},[182,187,192],{"type":17,"tag":36,"props":183,"children":184},{"style":59},[185],{"type":22,"value":186},"  i18n",{"type":17,"tag":36,"props":188,"children":189},{"style":53},[190],{"type":22,"value":191},":",{"type":17,"tag":36,"props":193,"children":194},{"style":53},[195],{"type":22,"value":178},{"type":17,"tag":36,"props":197,"children":199},{"class":38,"line":198},3,[200,205,209,215,219,223,227,232,237,242,246,251],{"type":17,"tag":36,"props":201,"children":202},{"style":59},[203],{"type":22,"value":204},"    locales",{"type":17,"tag":36,"props":206,"children":207},{"style":53},[208],{"type":22,"value":191},{"type":17,"tag":36,"props":210,"children":212},{"style":211},"--shiki-default:#90A4AE;--shiki-dark:#BABED8",[213],{"type":22,"value":214}," [",{"type":17,"tag":36,"props":216,"children":217},{"style":53},[218],{"type":22,"value":77},{"type":17,"tag":36,"props":220,"children":221},{"style":80},[222],{"type":22,"value":83},{"type":17,"tag":36,"props":224,"children":225},{"style":53},[226],{"type":22,"value":77},{"type":17,"tag":36,"props":228,"children":229},{"style":53},[230],{"type":22,"value":231},",",{"type":17,"tag":36,"props":233,"children":234},{"style":53},[235],{"type":22,"value":236}," \"",{"type":17,"tag":36,"props":238,"children":239},{"style":80},[240],{"type":22,"value":241},"es",{"type":17,"tag":36,"props":243,"children":244},{"style":53},[245],{"type":22,"value":77},{"type":17,"tag":36,"props":247,"children":248},{"style":211},[249],{"type":22,"value":250},"]",{"type":17,"tag":36,"props":252,"children":253},{"style":53},[254],{"type":22,"value":255},",\n",{"type":17,"tag":36,"props":257,"children":259},{"class":38,"line":258},4,[260,265,269,273,277,281],{"type":17,"tag":36,"props":261,"children":262},{"style":59},[263],{"type":22,"value":264},"    defaultLocale",{"type":17,"tag":36,"props":266,"children":267},{"style":53},[268],{"type":22,"value":191},{"type":17,"tag":36,"props":270,"children":271},{"style":53},[272],{"type":22,"value":236},{"type":17,"tag":36,"props":274,"children":275},{"style":80},[276],{"type":22,"value":83},{"type":17,"tag":36,"props":278,"children":279},{"style":53},[280],{"type":22,"value":77},{"type":17,"tag":36,"props":282,"children":283},{"style":53},[284],{"type":22,"value":255},{"type":17,"tag":36,"props":286,"children":288},{"class":38,"line":287},5,[289],{"type":17,"tag":36,"props":290,"children":291},{"style":53},[292],{"type":22,"value":293},"  },\n",{"type":17,"tag":36,"props":295,"children":297},{"class":38,"line":296},6,[298],{"type":17,"tag":36,"props":299,"children":300},{"style":53},[301],{"type":22,"value":302},"};\n",{"type":17,"tag":18,"props":304,"children":305},{},[306,308,314],{"type":22,"value":307},"If your website supports multiple locales, then you can add them to the locales array. If your site only supports one locale, then just one value in the array is acceptable. The ",{"type":17,"tag":32,"props":309,"children":311},{"className":310},[],[312],{"type":22,"value":313},"defaultLocale",{"type":22,"value":315}," is a required property and should use your default locale. For an English based website, this would be en.",{"type":17,"tag":133,"props":317,"children":319},{"id":318},"the-next-level",[320],{"type":22,"value":321},"The Next Level",{"type":17,"tag":18,"props":323,"children":324},{},[325,327,334,336,343],{"type":22,"value":326},"Does your site support multiple locales? You can take your project to the next level by exploring the NextJS document on ",{"type":17,"tag":108,"props":328,"children":331},{"href":329,"rel":330},"https://nextjs.org/docs/advanced-features/i18n-routing",[112],[332],{"type":22,"value":333},"Internationalization Routing",{"type":22,"value":335},". NextJS supports both domain/sub-domain routing and path-based routing - the benefits of either will depend on your business objectives and SEO strategy. You can find a ",{"type":17,"tag":108,"props":337,"children":340},{"href":338,"rel":339},"https://www.seoblog.com/subfolders-subdomains-multilingual/#:~:text=Subfolders%2C%20Subdomains%2C%20What%E2%80%99s%20the%20Difference%3F",[112],[341],{"type":22,"value":342},"great article on the SEOBlog",{"type":22,"value":344}," that walks through the process in more detail.",{"type":17,"tag":18,"props":346,"children":347},{},[348],{"type":22,"value":349},"One of the great benefits of NextJS is automatically handling locale detection and redirecting people to the correct locale. In the event you want to disable this, be sure to use the code snippet below:",{"type":17,"tag":25,"props":351,"children":353},{"className":154,"code":352,"filename":149,"language":156,"meta":7,"style":7},"module.exports = {\n  i18n: {\n    localeDetection: false,\n  },\n}\n",[354],{"type":17,"tag":32,"props":355,"children":356},{"__ignoreMap":7},[357,372,387,409,416],{"type":17,"tag":36,"props":358,"children":359},{"class":38,"line":39},[360,364,368],{"type":17,"tag":36,"props":361,"children":362},{"style":53},[363],{"type":22,"value":168},{"type":17,"tag":36,"props":365,"children":366},{"style":53},[367],{"type":22,"value":173},{"type":17,"tag":36,"props":369,"children":370},{"style":53},[371],{"type":22,"value":178},{"type":17,"tag":36,"props":373,"children":374},{"class":38,"line":49},[375,379,383],{"type":17,"tag":36,"props":376,"children":377},{"style":59},[378],{"type":22,"value":186},{"type":17,"tag":36,"props":380,"children":381},{"style":53},[382],{"type":22,"value":191},{"type":17,"tag":36,"props":384,"children":385},{"style":53},[386],{"type":22,"value":178},{"type":17,"tag":36,"props":388,"children":389},{"class":38,"line":198},[390,395,399,405],{"type":17,"tag":36,"props":391,"children":392},{"style":59},[393],{"type":22,"value":394},"    localeDetection",{"type":17,"tag":36,"props":396,"children":397},{"style":53},[398],{"type":22,"value":191},{"type":17,"tag":36,"props":400,"children":402},{"style":401},"--shiki-default:#FF5370;--shiki-dark:#FF9CAC",[403],{"type":22,"value":404}," false",{"type":17,"tag":36,"props":406,"children":407},{"style":53},[408],{"type":22,"value":255},{"type":17,"tag":36,"props":410,"children":411},{"class":38,"line":258},[412],{"type":17,"tag":36,"props":413,"children":414},{"style":53},[415],{"type":22,"value":293},{"type":17,"tag":36,"props":417,"children":418},{"class":38,"line":287},[419],{"type":17,"tag":36,"props":420,"children":421},{"style":53},[422],{"type":22,"value":423},"}\n",{"type":17,"tag":425,"props":426,"children":427},"style",{},[428],{"type":22,"value":429},"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 .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":7,"searchDepth":49,"depth":49,"links":431},[432,433],{"id":135,"depth":49,"text":138},{"id":318,"depth":49,"text":321},"markdown","content:blog:add-the-lang-attribute-to-the-html-tag-in-nextjs.md","content","blog/add-the-lang-attribute-to-the-html-tag-in-nextjs.md","md",1784603432970]