SEO for Developers in 100 Seconds

the first rule of search engine optimization is create really good content the second rule of search engine optimization is create really good content if human beings don't want to engage with your content then google doesn't want to either we live in the age of machine learning and quantum computing you can't just stuff a bunch of keywords into a page and expect to do well when google first came about in the late 90s it was based on an algorithm called pagerank which weighted relevance and search ranking based on the number of inbound links that a site

had people quickly learned how to exploit the algorithm by spamming backlinks all over the internet to increase the site's page rank because a high ranking in google can literally be worth millions of dollars it brought us an entire industry of seo experts the good guys wear white hats the hackers wear black hats but the most effective ones wear grey hats but some say it's a dying industry y'all want to see a dead body because it's becoming harder and harder to manipulate google's technology there are over 200 factors that go into a site's ranking that are

geared mostly towards how useful a user found your site did they immediately bounce by clicking the back button or did they dwell on the page for a long time and click other links absorbing all kinds of useful content content is king but the third rule of seo is to render html that can be reliably understood by bots your main content goes inside the body tags when google crawls your site it will use semantic html elements to understand the content on the page you might put your main content in an article tag then put your most

important keywords and headings or h tags to signal what your page is about furthermore your html should be accessible use alt tags and images and aria tags where needed to make your site usable on assistive devices in the head of the document we have metadata that's not directly shown to the end user but bots can use this data to further understand the page and format the actual appearance of your search engine listing the fourth rule of seo is to get your fully rendered html loaded fast if you have megabytes of blocking images styles and javascript

both users and bots will pass on your site but going fast is easier said than done that's why today we're going beyond 100 seconds to look at the many different strategies we have to render html and how they impact search engine optimization if you're new here like and subscribe and today i have a big announcement my full next js firebase course is now available if your goal is to build a highly interactive web app that is also fully search engine friendly then you'll definitely want to check out this course now the four most important rules

for seo in my opinion are create awesome content create awesome content render properly formatted html and load your html quickly the first two rules are very subjective and depend entirely on your audience but the general goal is that when someone clicks on a link to your site from a search engine ranking page they should engage with your site as long as possible there are a few metrics that you'll want to be aware of here the first one is the click-through rate or ctr that defines how likely a user is to click on your link when

displayed in a search engine ranking page or serp the higher the ctr the better and that usually means you have a very relevant title and description now if a user clicks on your link and then immediately clicks the back button that's called a bounce and the higher your bounce rate is the less likely your site is to rank well in the long term because apparently the content on the page is not very relevant if the user does stay on the page google will keep track of the dwell time which is the amount of time they

spend there before clicking back to the search results the longer the dwell time the better but the best possible thing that can happen is that the user never clicks back their session will last forever and they'll never need to go to another website ever again that doesn't happen very often so what you keep track of is the average session duration and the average number of pages viewed per session these are metrics that you want to maximize there's no absolute rule for creating engaging content but the first thing the user sees should hook them in to

want to read more if you look at something like buzzfeed all you have to do is put an animated gif at the top then maybe a few more in the body and you should be good let's move on to rule three where we talk about the actual structure of the html i'll be using my site fireship io as an example on a lesson or article page you can right click and hit inspect element or hit control shift i this will bring up the elements tab in chrome devtools showing you the fully rendered html markup we

have a head and a body let's go ahead and open up the body find the main element then inside the main element you'll notice we have an article an article element has semantic meaning and although it will never be seen by the end user it tells the search engine here is the main content of the page in addition you'll notice a couple of extra attributes here one is item scope and the other is an item type as a schema.org article now it's totally optional and whether or not it will improve your search engine ranking is

debatable but what schema.org allows you to do is define a bunch of metadata about the actual content on your page making it easier for search engines to interpret it's especially powerful if your content is something like a recipe or a star review because google can then take the schema data and format it properly in a serp page now in this case we have a bunch of metadata that make up an article and one thing that is known to improve search ranking is when an article is written by a known author further down the html tree

here you'll notice we have an item prop of author which points to the authors page that link goes to another page on fireship io and on that page we also have an article element this time with an item type of a schema.org author along with a bunch of links that point to authoritative sites for that author outbound links on a page are really important because they further signal what the page is about in this case google will first crawl the article then crawl the authors page then crawl these other sites to understand who that author

is a good strategy is to use outbound links to other really good sites that are related to the content on a given page now in addition to schema.org there's other ways you can add metadata to your content and this can be very important for seo and also accessibility one of the most fundamental techniques is to add an alt attribute to images which is basically just some text that describes the image this metadata can be used by search engines and also by screen readers for those with disabilities for other elements that are a little more complicated

like a progress bar for example you can use aria attributes which stand for accessible rich internet applications and they help provide additional meaning to highly interactive widgets on the page at this point we've only been looking in the body of the document but the head of the document contains all kinds of useful metadata for seo most importantly this is where you have the title you should choose your title carefully because it's displayed in a cert page and will ultimately control your ctr rating in addition to the title you may also want to have meta tags

here which define things like the description featured image author canonical url and stuff like that these meta tags are also essential if you want your content to be shared on social media sites like twitter or facebook when you post a hyperlink in social media it fetches that page and looks for the meta tags to understand what image and title to display there if you want to see how your site's doing right now you can post a link into the twitter card validator and it will tell you whether or not it can use your current meta

tags so that gives you some things to think about when it comes to the actual structure of your html but the bigger question is how do you render that html or in other words what part of your tech stack is responsible for generating the actual html markup that is received by a bot or end user there are three fundamental ways to render html the first one we'll look at is client-side rendering if you're building an app with something like react or angular the default mode is client-side rendering or a single page application on the initial

page load the user gets a shell of html without any meaningful content the javascript code then bootstraps then asynchronously fetches any additional data needed for the ui apps like this are great for interactivity because it gives the end user an app-like feel similar to what you'd expect on ios or android the problem is that because the initial html is just a shell search engines may have a hard time understanding and indexing it if you take a link generated by javascript from a single page application and post it into twitter you'll only see the initial shell

you won't see any additional meta tags that were generated by javascript after the fact that's not great for social media but google as a search engine is able to index client rendered apps but the reliability is questionable and personally i wouldn't trust client rendering if seo was a business critical requirement so another option is to pre-render or statically generate html in advance let's imagine your web app has a hundred different routes or pages instead of sending a shell down to the user we could generate all the html for those pages in advance then upload the

static files to a storage bucket that could be cached on a global cdn so the first thing the user sees is fully rendered content then the javascript loads after that and makes the page fully interactive that's great for seo because bots get fully rendered html and they can easily interpret the content on the page it's also highly efficient because if you're fetching data from a database you only have to do that once at build time then you can cache the page on a cdn and serve it to millions of people without having to refetch your

data the trade-off with this approach though is that the data in the pre-rendered content can become stale which means bots will be getting outdated information until you rebuild and redeploy the entire site that's no big deal if you have a few hundred pages that don't change very often but if you have millions of pages with highly dynamic data then it doesn't really scale and that brings us to option number three server side rendering in this paradigm when the user makes a request to a page the html is generated on the server this is also great

for seo because bots get fully rendered html on the initial request in addition the data will always be fresh because you're making a new request to the server each time but the drawback here is that it's generally less efficient you might be fetching and rendering the same html over and over again it is possible to do server side caching but that's not as efficient as edge caching on a cdn and will cost a lot more to operate at scale and if things aren't cached efficiently that means a slower first time to meaningful content which can

negatively impact seo so basically between these three methods we have a trade-off between data freshness performance and client-side interactivity but what if there is a way we could have our cake and eat it too allow me to introduce you to incremental static regeneration this is the way this is a new form of rendering available in the next js framework remember earlier i said the drawback with static pages is that the data may become stale and require a redeploy of your site what isr does is allow you to statically generate your pages then rebuild and redeploy

them on the fly in the background as new requests come into your site that means you get all the performance benefits of static pages while ensuring that these pages always contain fresh data that eliminates all the trade-offs that we've talked about but it's not without a cost deploying a static site is as easy as uploading your files to a storage bucket but incremental static regeneration would require a more complex back-end server deployment for most of us that means paying for a host that supports it like versel but hosting anywhere else will likely be much more

painful until more companies start adopting these techniques now one very cool thing going on in the web development world right now is that more frameworks like next and angular are supporting hybrid rendering that means you can implement some routes as static pages configure other routes to use full server-side rendering while other routes can be fully client rendered so you're not pigeon-holed into just one rendering technique you can pick and choose what works best for a given page and in my opinion that's the future of full stack web development i'm going to go ahead and wrap

things up there if you want to learn how to implement a real hybrid rendered application with next js consider becoming a pro member at fireship io you'll get access to the next course along with a whole bunch of other pro content thanks for watching and i will see you in the next one