Taking Next.js apps to the next level with Ally and SEO - Anuradha Kumari - (Next.js Conf 2021)
Taking Next.js apps to the next level with Ally and SEO - Anuradha Kumari - (Next.js Conf 2021)
Anuradha is passionate about exploring new technologies and sharing knowledge through tech articles and talks. As an accessibility advocate, she aims to spread awareness and empower the community towards achieving the common goal of inclusion through technology. When she is not coding, she loves traveling, exploring museums, reading books, and sketching.
Anuradha Kumari
Frontend consultant at Passionate People
Content
5.44 -> Hi everyone my name is Anuradha Kumari and I'm
so excited to be presenting to you all today.
12 -> Today I will be talking to you all about
taking Next.js applications to next level
16.8 -> with accessibility and SEO optimization before we
start little bit of introduction about myself I'm
23.84 -> working as a front-end consultant with passionate
people I'm a Google developers expert for web
28.88 -> technologies and Cloudinary media developers
expert and also an accessibility advocate
35.12 -> You can reach out to me on Twitter @miracle_404
Let's get started the agenda for today is I will
43.76 -> be talking about some tips for creating accessible
and SEO friendly Next.js applications first
50.48 -> briefly see what these terms are accessibility
means making resources and services usable by
57.2 -> everyone there are multiple types of disabilities
in the world and disabled people use different
62.48 -> types of assistive technologies to access the
web like screen readers switch keyboards etc
69.12 -> so we need to ensure that we follow proper coding
guidelines so that we make our applications
74.32 -> accessible to all our users SEO or search engine
optimization means making improvements in our
82.48 -> application which might have noticeable impact in
the way our website appears in the search results
89.36 -> to understand why we need SEO let's see how
the search engines like Google, Bing, etc work
97.6 -> So the search engine or search system
have four main responsibilities
102.16 -> they parse the content in all the websites
available and this is called the crawling phrase
107.36 -> then the data collected from crawling phase is
stored for further access it is called indexing
113.36 -> sometimes they also go to the rendering phase
where they perform some operations if the website
120.16 -> has client-side JavaScript then comes the ranking
where the data is stored in the indexes is query
127.52 -> as per user search inputs or keywords every search
engine has a crawler like Google has googlebots
137.84 -> so if you want to check if your website is indexed
or not you can go ahead and search in Google
144.56 -> site:your_website name so let's quickly check
it out here I have tried to search for my
152.24 -> website which is anuradhakumari.com and when
I search for it I can see all the URLs for my
158.24 -> website which is good it means that my
URLs are getting indexed by the Google
164.16 -> you can use this to check if your website is
indexed or not if not it's time to make some
169.84 -> SEO optimizations let's code we can create a new
Next.js application using "yarn create next-app"
176.64 -> application and then we can run the dev server
using "yarn dev" so I have created a basic website
182.72 -> here where I have made some changes to the default
layout let us see how it looks so I have a header
191.76 -> which is I have trying to create a game wherein
to fight the inaccessibility and then I have three
198.88 -> different levels of game lowest medium and highest
now at this point what I want to do is I want to
205.2 -> run an audit and see how accessibility and SEO are
doing in this stage so you can right click on the
214 -> website and inspect then the dev tools will open
up in devtools Lighthouse what we can do that we
219.36 -> can select for categories accessibility and SEO go
ahead and generate the report the results are in
226.64 -> we can see that accessibility has a
score of 97 and SEO has a score of 100
231.52 -> so if we see what is the error with accessibility
then it has a missing lang attribute on HTML
238.64 -> before we go ahead and fix this I would like
to tell you that this code is not indicative
243.2 -> of the total accessibility of your website it
is just the some automated checks are run and
248.72 -> they contribute to almost 30 to 40 percent of
accessibility issues so we must also manually
253.84 -> test our websites so for this talk we will stay
with these Lighthouse reports so let us go and see
263.6 -> So we ran the Lighthouse audit and we saw that
there was a missing lang attribute on the HTML
270.96 -> now what is this error so this is a very
common error and of WebAIM which is a
275.36 -> non-profit organization they every year run
report accessibility checks on top 1 million
282.08 -> website home pages and in that report if you
see there are like this is the report and
288.48 -> almost 28.9 percent of home pages as of February
2021 had this missing document language error
296.72 -> there is also a very nice Github discussion
around it on Vercel Github where they talk about
304.56 -> different ways in which we can solve this for our
nexus application we are going to look at two of
310.48 -> different approaches today so how can we fix it we
can either add a custom document to our website or
317.76 -> we can add the locales in next.config.js so let's
start by using first approach which is creating
325.12 -> a custom document so for that we can go ahead
and add a _document.js file in our pages folder
333.6 -> so I have created a _document.js file in the pages
folder and this is the default code which I have
340.24 -> taken from the next year's website and if we see
the main thing here is that we add a structure
347.68 -> so we have HTML head body tags here now we want to
add the lang attribute to our HTML so go ahead and
355.12 -> add lang so I would like to add language of
English since my website is in English language
360.48 -> so if we go ahead and check this now so in
elements tab we can refresh the page and see that
367.6 -> now the HTML contains the language of English so
now this will pass in the Lighthouse error report
375.28 -> So we saw how to add lang to HTML using the
custom document we can also alternatively
381.76 -> add i18n configuration in Next.js config file
wherein we can add multiple locales and then
388.88 -> we can also add a default default locale
and our HTML will pick this default locale
395.2 -> now we added one single page and made it
accessible now let's add more pages and see
403.36 -> so I have added three different folders because
I have three different levels for this game
408 -> so lowest medium and highest so and I have added
some code so I have a section and a heading for
415.92 -> it and then a form where it different shows
different questions so let's see how it looks
423.04 -> So if we go to the lowest level we see the
list of questions which we can select from
429.44 -> so now we are interested again in running the
Lighthouse report so I will run it again so the
435.04 -> results are here and if we see the Lighthouse
score again is 97 so we have a different error
441.52 -> here now the document does not have a title
element why because we haven't added any title yet
446.96 -> but it is a very very important piece of
information it is also important for accessibility
453.6 -> as well as for SEOs because the screen readers use
it to make the users know that what your page is
460.08 -> about like what's the overview of your page and
also the search engine crawlers they rely on it
465.52 -> to determine if your page is relevant to the user
search or not so it's a very important information
472.4 -> and if we check for SEO errors we can find the
same title error apart from that we also do not
478.48 -> have yet added a meta description it is also
important because when your website appears in
483.92 -> search results it shows the summary of what your
website is for so and it gives users a clear idea
490.96 -> if they should really come and visit your website
or not so these are very important informations
496.16 -> so let us see how to fix that before that there
is one more thing which I noticed when I created
501.12 -> new pages the default heading and footer is not
coming but what I want I want my pages to have
508 -> header and footer all all of them because they all
represent a game together so we can also manually
515.68 -> add it on on different pages but we can also use
something called a layout so let us see so first
522.16 -> we will start by adding a layout what we can do we
can create a components folder with a layout file
528.16 -> so here I have created a components folder
and a layout file and here what we have done
534.64 -> is the common header and footer I have picked
it and added it here so we have a header and we
540.48 -> have a footer and also what I want I always want
main on all my pages right so and then there is
546.64 -> this children so whatever we will write now on
all the pages the that content will come inside
554.08 -> the children we want it like this so we will
wrap all our pages within this layout component
559.12 -> so let's go ahead and do it so we will start
with our index.js file so in index.js file
564.24 -> we will go ahead and remove this header and
remove the mail we will add a layout to it
579.44 -> then we'll remove the footer as well
601.04 -> we do the same with our pages so we will
just see for lowest and we go ahead and
608.4 -> add the layout to it
620.48 -> okay let's go ahead and check the website again so
we see now we have this header and footer on this
627.44 -> and if you go to home page it's still there so
now it's reusable and we can use it in all the
635.04 -> pages that we want so now let's fix the title
and meta issues for that Next.js provides a head
644.72 -> tag so what we can do that whatever title and
meta description that we have to use they go
650.88 -> in the head tag and they will appear in the
head of the HTML document so I can add a title
660.56 -> so I will write the name of
my game that hey this is it
664.72 -> and then I'm on the lowest level page
so this gives the users an idea that
668.96 -> where I am currently on their page on the
page and now I can also add a meta here
676 -> so I have added a meta of description so which
will give a overall description of what my website
681.52 -> this website is about like it's the lowest level
of game and the questions are related to level so
688.24 -> this will give uh overview to the users that what
this web page will contain now if you go ahead
694.24 -> again and if we see now uh it it displays the nice
title and uh if we run the Lighthouse report again
705.04 -> the scores are there and if you
can see they are both hundred now
709.04 -> because we have fixed all
the issues which were listed
712.24 -> so we have added a layout so that the code does
not get repeated and also we have created a tight
719.36 -> added a title and meta description for new pages
as well so they also do well in search results now
726.08 -> that we have seen some of these code examples let
us also see some of more important terms in SEO
734.48 -> so there is a robot.txt file this file tells the
search engine crawlers that which URLs the search
741.68 -> engine crawlers can access on our websites we can
also use this to block some of the unimportant
747.92 -> resource files like images etc so a sample of
this is this is a sample code wherein if I want
756.88 -> to block some pages so like I want do not want
Google bot maybe to crawl my admin URL so I can
763.36 -> say that hey this is a user is in Google bot and I
would disallow this URL to be crawled by googlebot
770.88 -> otherwise in other cases we can just have that all
different types of user agents and alloying all
777.52 -> our URLs and we can also add a link of site map
of our website site map to this robot.txt files
784.4 -> now what is a site map so sitemap is a file
where we can provide information about our pages
791.76 -> videos and other files on the website it helps
the search engines to find crawl index all of
797.6 -> our website content and it also tells the search
engines which of our pages are more important
804.16 -> so we are going to see how we can create
a sitemap.xml file for our website
809.76 -> going to note here is sitemaps might not always be
needed for SEO but it's recommended and we can add
815.44 -> it for our websites so how can we generate a site
map we can also generate it manually so we can
821.28 -> create a sitemap.xml file in our public folder
and generate it via some online generators or
828.64 -> write code ourselves for all our URLs but then we
will have to update it every time we add new pages
835.2 -> to it like when there are new URLs we can also use
multiple automated solutions for it I am going to
841.52 -> show you how we can use a package to do this so
there is this package called next hyphen site map
848.48 -> so we can add it in depth dependency in our code
and then we will have to create a sitemap.js file
855.36 -> and add it in our post build script to
say that after the build is finished
859.52 -> please go ahead and generate a site map for my
websites let's see so I've already added this
866.72 -> package to my dev dependencies and we can
create a sitemap.js file with few information
873.2 -> it is very much configurable but I have
added the few necessary configurations here
878.48 -> first of them is site URL so you should go and add
the website where your code is deployed to this
885.6 -> so for example I have deployed this code to file
iPhone inaccessibility dot virtual dot app so my
892.4 -> website currently sits here so I have added it to
the site URL and then we can say that hey please
898.24 -> go ahead and generate a robot.txt file for me and
also we can optionally give it a size of sitemap
906 -> now when in package.json I have a post build
configuration so in scripts there is a post build
913.36 -> script which says that go ahead and run the next
hyphen site map with this configuration which is
919.12 -> present in our sitemap.js file and I already ran
it so if we go to public we see that robots and
926 -> site map files are created and if we take a look
at what a site map xml file looks like so it is a
932.24 -> list of URLs of my website so for example this is
the home and then I had three different levels so
939.28 -> the three different URLs for it so we have seen
a way in which we can automatically generate our
946.56 -> site map now that we have created our website and
made it accessible and SEO friendly so is our work
955.12 -> done will we just wait for the search engines to
rank our web page higher and wait for the users
961.2 -> to search for keywords so that our websites appear
in search results so we do that but we also share
968.88 -> our links on social media so that users are aware
of it when you share your links on social media
975.6 -> how will the link look like in the social
media preview like on Twitter Linkedin
980.72 -> we have multiple ways in which we can check it
like Twitter has its own Twitter card validator
985.84 -> Linkedin has a post inspector Facebook also has
one and there is also a website which I really
992.32 -> like because it gives you preview of all these
websites together which is meta tax preview so so
998.08 -> far whatever we have coded let us see how it will
appear when we will share it in the social media
1007.6 -> so the code is deployed here so the code till now
is deployed at this link so I will go to metatex
1014.48 -> dot io and try to check how it looks so if we
see it it it gives the title and a description
1023.92 -> and the link of this website but there is nothing
to preview in the image so it's not a very rich
1028.72 -> experience for users they will just see a text and
a link so it might not impress the users much and
1035.6 -> they might not click on it so how can we fix
it so there is something called an open graph
1044.08 -> open graph is an internet protocol which
enables any web page to become a rich object
1049.52 -> in a social graph so when we are sharing any
link we can also customize it to contain rich
1055.44 -> information like title image URL description
types etc so title image URL and types these are
1064.16 -> recommended mandatory things which we must
add when we are adding OpenGraph information
1068.96 -> to any web page there are others also which
are optional but you can go ahead and add it
1073.92 -> for a more rich experience how we can
add it we add it in meta tag itself so we
1081.12 -> add the property name in property and then we
add the value of it in the content attribute
1087.28 -> of meta tags so let's go ahead and add these
few oz values for our website so here I am in
1095.04 -> my homepage index.js and if you see there are
these oz values added so the title corresponds
1102.8 -> to it should be very similar to the title of your
website and description same goes for description
1110.32 -> then you can add a customized image here so this
image will appear when your website is shared on
1116.96 -> social media so this is a very nice thing which
we can do and we can also add the URL where
1122 -> it is hosted so with this code let us see
how it looks now in the social media preview
1127.68 -> so this is deployed this code is deployed on our
main website which is fight inaccessibility dot
1135.6 -> app and if we search for it I have added a custom
image to it it does not look very beautiful but
1145.04 -> I mean this is just to show you but uh so it
will look like this uh you actually will see
1150.64 -> a good image and then the title which you add in
the open graph and the description so it it's a
1157.44 -> good way to engage the users and let them know a
preview of what they might expect on your content
1164.56 -> and it provides a very rich user experience we
just saw how we can use open graphs to enhance
1171.52 -> the social media sharing of our website
links let us conclude now with some takeaways
1179.6 -> always add a document language and set title for
every page so that the screen readers as well as
1186.88 -> the search engine crawlers know what to expect on
the page and user knows what exactly is on that
1192.64 -> page we also saw how to create robot.txt file and
sitemap.xml then we saw how we can add open graph
1203.04 -> via meta tags in the head I have added few links
for the further read these are very nice links and
1211.36 -> uh we also have a learn SEO tutorial on our next
year's website so go ahead give it a spin and see
1221.76 -> all the resources for today's talk will be
present at the website anuradhakumari.com/talks
1228 -> You can also scan the QR code and get
quick access to this website it was very
1234.08 -> nice presenting to you all here I hope it was
helpful thank you and have a great day, bye!
Source: https://www.youtube.com/watch?v=UWvP4bLKThE