Taking Next.js apps to the next level with Ally and SEO - Anuradha Kumari - (Next.js Conf 2021)

Hi everyone my name is Anuradha Kumari and I'm  so excited to be presenting to you all today.   Today I will be talking to you all about  taking Next.js applications to next level   with accessibility and SEO optimization before we  start little bit of introduction about myself I'm   working as a front-end consultant with passionate  people I'm a Google developers expert for web   technologies and Cloudinary media developers  expert and also an accessibility advocate   You can reach out to me on Twitter @miracle_404  Let's get started the agenda for today is I will   be talking about some tips for creating accessible  and SEO friendly Next.js applications first   briefly see what these terms are accessibility  means making resources and services usable by   everyone there are multiple types of disabilities  in the world and disabled people use different   types of assistive technologies to access the  web like screen readers switch keyboards etc   so we need to ensure that we follow proper coding  guidelines so that we make our applications   accessible to all our users SEO or search engine  optimization means making improvements in our   application which might have noticeable impact in  the way our website appears in the search results   to understand why we need SEO let's see how  the search engines like Google, Bing, etc work   So the search engine or search system  have four main responsibilities   they parse the content in all the websites  available and this is called the crawling  phrase then the data collected from crawling phase is  stored for further access it is called indexing   sometimes they also go to the rendering phase  where they perform some operations if the website   has client-side JavaScript then comes the ranking  where the data is stored in the indexes is query   as per user search inputs or keywords every search  engine has a crawler like Google has googlebots so if you want to check if your website is indexed  or not you can go ahead and search in Google   site:your_website name so let's quickly check  it out here I have tried to search for my   website which is anuradhakumari.com and when  I search for it I can see all the URLs for my   website which is good it means that my  URLs are getting indexed by the Google   you can use this to check if your website is  indexed or not if not it's time to make some   SEO optimizations let's code we can create a new  Next.js application using "yarn create next-app" application and then we can run the dev server  using "yarn dev" so I have created a basic website   here where I have made some changes to the default  layout let us see how it looks so I have a header   which is I have trying to create a game wherein  to fight the inaccessibility and then I have three   different levels of game lowest medium and highest  now at this point what I want to do is I want to   run an audit and see how accessibility and SEO are  doing in this stage so you can right click on the   website and inspect then the dev tools will open  up in devtools Lighthouse what we can do that we   can select for categories accessibility and SEO go  ahead and generate the report the results are in   we can see that accessibility has a  score of 97 and SEO has a score of 100   so if we see what is the error with accessibility  then it has a missing lang attribute on HTML   before we go ahead and fix this I would like  to tell you that this code is not indicative   of the total accessibility of your website it  is just the some automated checks are run and   they contribute to almost 30 to 40 percent of  accessibility issues so we must also manually   test our websites so for this talk we will stay  with these Lighthouse reports so let us go and see   So we ran the Lighthouse audit and we saw that  there was a missing lang attribute on the HTML   now what is this error so this is a very  common error and of WebAIM which is a   non-profit organization they every year run  report accessibility checks on top 1 million   website home pages and in that report if you  see there are like this is the report and   almost 28.9 percent of home pages as of February  2021 had this missing document language error   there is also a very nice Github discussion  around it on Vercel Github where they talk about   different ways in which we can solve this for our  nexus application we are going to look at two of   different approaches today so how can we fix it we  can either add a custom document to our website or   we can add the locales in next.config.js so let's  start by using first approach which is creating   a custom document so for that we can go ahead  and add a _document.js file in our pages folder   so I have created a _document.js file in the pages  folder and this is the default code which I have   taken from the next year's website and if we see  the main thing here is that we add a structure   so we have HTML head body tags here now we want to  add the lang attribute to our HTML so go ahead and   add lang so I would like to add language of  English since my website is in English language   so if we go ahead and check this now so in  elements tab we can refresh the page and see that   now the HTML contains the language of English so  now this will pass in the Lighthouse error report So we saw how to add lang to HTML using the  custom document we can also alternatively   add i18n configuration in Next.js config file  wherein we can add multiple locales and then   we can also add a default default locale  and our HTML will pick this default locale   now we added one single page and made it  accessible now let's add more pages and see so I have added three different folders because  I have three different levels for this game   so lowest medium and highest so and I have added  some code so I have a section and a heading for   it and then a form where it different shows  different questions so let's see how it looks   So if we go to the lowest level we see the  list of questions which we can select from   so now we are interested again in running the  Lighthouse report so I will run it again so the   results are here and if we see the Lighthouse  score again is 97 so we have a different error   here now the document does not have a title  element why because we haven't added any title yet   but it is a very very important piece of  information it is also important for accessibility   as well as for SEOs because the screen readers use  it to make the users know that what your page is   about like what's the overview of your page and  also the search engine crawlers they rely on it   to determine if your page is relevant to the user  search or not so it's a very important information   and if we check for SEO errors we can find the  same title error apart from that we also do not   have yet added a meta description it is also  important because when your website appears in   search results it shows the summary of what your  website is for so and it gives users a clear idea   if they should really come and visit your website  or not so these are very important informations   so let us see how to fix that before that there  is one more thing which I noticed when I created   new pages the default heading and footer is not  coming but what I want I want my pages to have   header and footer all all of them because they all  represent a game together so we can also manually   add it on on different pages but we can also use  something called a layout so let us see so first   we will start by adding a layout what we can do we  can create a components folder with a layout file   so here I have created a components folder  and a layout file and here what we have done   is the common header and footer I have picked  it and added it here so we have a header and we   have a footer and also what I want I always want  main on all my pages right so and then there is   this children so whatever we will write now on  all the pages the that content will come inside   the children we want it like this so we will  wrap all our pages within this layout component   so let's go ahead and do it so we will start  with our index.js file so in index.js file   we will go ahead and remove this header and  remove the mail we will add a layout to it then we'll remove the footer as well we do the same with our pages so we will  just see for lowest and we go ahead and   add the layout to it okay let's go ahead and check the website again so  we see now we have this header and footer on this   and if you go to home page it's still there so  now it's reusable and we can use it in all the   pages that we want so now let's fix the title  and meta issues for that Next.js provides a head   tag so what we can do that whatever title and  meta description that we have to use they go   in the head tag and they will appear in the  head of the HTML document so I can add a title so I will write the name of  my game that hey this is it   and then I'm on the lowest level page  so this gives the users an idea that   where I am currently on their page on the  page and now I can also add a meta here   so I have added a meta of description so which  will give a overall description of what my website   this website is about like it's the lowest level  of game and the questions are related to level so   this will give uh overview to the users that what  this web page will contain now if you go ahead   again and if we see now uh it it displays the nice  title and uh if we run the Lighthouse report again the scores are there and if you  can see they are both hundred now   because we have fixed all  the issues which were listed   so we have added a layout so that the code does  not get repeated and also we have created a tight   added a title and meta description for new pages  as well so they also do well in search results now   that we have seen some of these code examples let  us also see some of more important terms in SEO   so there is a robot.txt file this file tells the  search engine crawlers that which URLs the search   engine crawlers can access on our websites we can  also use this to block some of the unimportant   resource files like images etc so a sample of  this is this is a sample code wherein if I want   to block some pages so like I want do not want  Google bot maybe to crawl my admin URL so I can   say that hey this is a user is in Google bot and I  would disallow this URL to be crawled by googlebot   otherwise in other cases we can just have that all  different types of user agents and alloying all   our URLs and we can also add a link of site map  of our website site map to this robot.txt files   now what is a site map so sitemap is a file  where we can provide information about our pages   videos and other files on the website it helps  the search engines to find crawl index all of   our website content and it also tells the search  engines which of our pages are more important   so we are going to see how we can create  a sitemap.xml file for our website   going to note here is sitemaps might not always be  needed for SEO but it's recommended and we can add   it for our websites so how can we generate a site  map we can also generate it manually so we can   create a sitemap.xml file in our public folder  and generate it via some online generators or   write code ourselves for all our URLs but then we  will have to update it every time we add new pages   to it like when there are new URLs we can also use  multiple automated solutions for it I am going to   show you how we can use a package to do this so  there is this package called next hyphen site map   so we can add it in depth dependency in our code  and then we will have to create a sitemap.js file   and add it in our post build script to  say that after the build is finished   please go ahead and generate a site map for my  websites let's see so I've already added this   package to my dev dependencies and we can  create a sitemap.js file with few information   it is very much configurable but I have  added the few necessary configurations here   first of them is site URL so you should go and add  the website where your code is deployed to this   so for example I have deployed this code to file  iPhone inaccessibility dot virtual dot app so my   website currently sits here so I have added it to  the site URL and then we can say that hey please   go ahead and generate a robot.txt file for me and  also we can optionally give it a size of sitemap   now when in package.json I have a post build  configuration so in scripts there is a post build   script which says that go ahead and run the next  hyphen site map with this configuration which is   present in our sitemap.js file and I already ran  it so if we go to public we see that robots and   site map files are created and if we take a look  at what a site map xml file looks like so it is a   list of URLs of my website so for example this is  the home and then I had three different levels so   the three different URLs for it so we have seen  a way in which we can automatically generate our   site map now that we have created our website and  made it accessible and SEO friendly so is our work   done will we just wait for the search engines to  rank our web page higher and wait for the users   to search for keywords so that our websites appear  in search results so we do that but we also share   our links on social media so that users are aware  of it when you share your links on social media   how will the link look like in the social  media preview like on Twitter Linkedin   we have multiple ways in which we can check it  like Twitter has its own Twitter card validator   Linkedin has a post inspector Facebook also has  one and there is also a website which I really   like because it gives you preview of all these  websites together which is meta tax preview so so   far whatever we have coded let us see how it will  appear when we will share it in the social media so the code is deployed here so the code till now  is deployed at this link so I will go to metatex   dot io and try to check how it looks so if we  see it it it gives the title and a description   and the link of this website but there is nothing  to preview in the image so it's not a very rich   experience for users they will just see a text and  a link so it might not impress the users much and   they might not click on it so how can we fix  it so there is something called an open graph   open graph is an internet protocol which  enables any web page to become a rich object   in a social graph so when we are sharing any  link we can also customize it to contain rich   information like title image URL description  types etc so title image URL and types these are   recommended mandatory things which we must  add when we are adding OpenGraph information   to any web page there are others also which  are optional but you can go ahead and add it   for a more rich experience how we can  add it we add it in meta tag itself so we   add the property name in property and then we  add the value of it in the content attribute   of meta tags so let's go ahead and add these  few oz values for our website so here I am in   my homepage index.js and if you see there are  these oz values added so the title corresponds   to it should be very similar to the title of your  website and description same goes for description   then you can add a customized image here so this  image will appear when your website is shared on   social media so this is a very nice thing which  we can do and we can also add the URL where   it is hosted so with this code let us see  how it looks now in the social media preview   so this is deployed this code is deployed on our  main website which is fight inaccessibility dot   app and if we search for it I have added a custom  image to it it does not look very beautiful but   I mean this is just to show you but uh so it  will look like this uh you actually will see   a good image and then the title which you add in  the open graph and the description so it it's a   good way to engage the users and let them know a  preview of what they might expect on your content   and it provides a very rich user experience we  just saw how we can use open graphs to enhance   the social media sharing of our website  links let us conclude now with some takeaways   always add a document language and set title for  every page so that the screen readers as well as   the search engine crawlers know what to expect on  the page and user knows what exactly is on that   page we also saw how to create robot.txt file and  sitemap.xml then we saw how we can add open graph   via meta tags in the head I have added few links  for the further read these are very nice links and   uh we also have a learn SEO tutorial on our next  year's website so go ahead give it a spin and see all the resources for today's talk will be  present at the website anuradhakumari.com/talks You can also scan the QR code and get  quick access to this website it was very   nice presenting to you all here I hope it was  helpful thank you and have a great day, bye!

Channel: Vercel

Views: 801

Keywords:

Id: UWvP4bLKThE

Length: 20min 50sec (1250 seconds)

Published: Wed Oct 27 2021