SEO for Developers: Power Your SEO Friendly Markup With HTML5, CSS3, And JavaScript

Ok, hello everyone and welcome to our first day of the live developer SEO series with OK, don't start yet, oh it starts at 10am, I'm right about that, well hello everyone, welcome to our first live SEO day for

developers

. live series with search engines, my name is left debt johnson and I am an editor at large and particularly my area of ​​focus is technology SEO and developer SEO, so over the next three days we will have some interesting interactive sessions including discussions live. coding and questions with the experts we are going to have this week, they all have a lot of knowledge in coding and how that coding, especially how that coding affects

your

SEO, we definitely want to hear from you and there will be many It's time to ask questions, so be sure to Scroll down and put

your

question in the live questions.

We'll answer as many questions as we can throughout this session and there may be some questions we don't answer, but we're also planning to try and schedule a Google Meet after the fact, so try to sign up if you can for some live questions afterwards with the speakers who should also be able to join and now to begin, uh, we. We're going to talk primarily about communications and this is where the rubber meets the road between seo tech seo and maybe the

developers

working on the project that you've been brought into, so today we have some speakers that have representation from both the The agency side in that sense, but also the speakers that represent the client side, you know who knows who are the stakeholders in SEO as part of a team and how she can discuss SEO topics with the team and get things implemented so let's welcome our speakers today we have these two speakers from the family the first anthony muller president of scm zen sem and we have katie muran director of content strategy and SEO of the university of southern new hampshire, don't forget to ask, add your questions. to the live q a box at the bottom of the screen and we will reach as many as we can so this is a live discussion between all of us and to start it would be fun to hear a little bit of a story that someone has . a story for us to start discussions with, that's what's lined up for Anthony for those who know, yes, a lot of stories, so we've been doing this for over 20 years and the stories we have are kind of a fairy tale of Grimm as in some. instances, but my hope here is that by sharing some of these, what we can all do is learn from some issues that happened during the platform change, specifically with react, with several different clients, so I'll go over clients like like jw player cutter of msn wire inside the hook, you know there are a ton of different ones that won't name specific names for various reasons, but we'll talk about the first story about the developer who had me install screen doors on a submarine. that whoever you think would be best in this situation, that has me intrigued, I'm not connecting that to a story that I know, go ahead, okay, so they brought me in to cover an in-house seo that was on leave um so it was great post um they did things very well she was very talented uh so I was supposed to come in shifts some dials did some things there were no emergencies it would be an easy kick um That's when I should always kick myself every time I hear Easy Gate kick yourself, but what happened was, all of a sudden, within 30 days of accepting gig traffic on Tank 20 30 percent.

I did a forensic audit, looked into it, and found out that there were a bunch of technical issues that were causing the problem. The lead developer at the time was a bit obvious and well, how do we know what that is? How do we know it's not something else? Which is the answer? You really don't know. I know you just have instinct and a lot of experience to be able to try to guide him that way. However, we made the changes and just before the busiest time of the year we saw a swing of 40 to 40 points higher, millions in additional.

Revenue, the general manager had said I'm amazed, you know, this is great, at that time the lead developer had decided to change the platform and react, you know, this is content that changes every three months or every six months, so I had to do it. Send the email and, as we've discussed time and time again, you should really need to react before you decide to go down that route, especially when eighty percent of your income comes from searches. You should be careful, really. I really have the need to do this but my main react and for a bit of context is a JavaScript framework which in the title of the framework itself react means reactivity which means if the state in the database changes those changes should appear on the screen. without a user having to update the reactive code, you have seen that this is a Facebook project.

If you're looking at Facebook and look at notifications, you can see new notifications being added that aren't because you updated. that page, so nothing changed in your project for six months, so why react? I think it was the good news that everyone wanted to participate in, maybe put on the resume. Hey, we made a platform to react well, whatever the case, they decided to go. that way against the warnings, so my bar was fine. You're on WordPress and before you publish React, I want to make sure you know everything, all elements are visible as they would be if you were viewing the source in HTML correctly.

You looked at it, you saw the links and the modules correctly, but also at least we have to comply. It would be great to beat it, but at least we have to meet the times, the performance times that we were getting in WordPress, which you know if. drank a bottle of tequila or spun around in your office chair about 20 times, it's kind of hard not to be, you know, we all know WordPress can be a little slow sometimes, so anyway, that was the goal on a couple of weeks. They were ready to flip the switch, they flipped the switch, uh, on some of the content, not all of it, and we noticed that traffic was down about 20, so working with this lead developer, uh, you know, I said, look, This doesn't look good.

It seems like this is the cause and the argument was that the crash happened the day before I flipped the switch and put in this reverse proxy that they didn't tell me anything about, so it becomes kind of like how do you know 100 percent? This is the problem and you can't really know with SEO that it's one hundred percent all you can do is follow your gut and say: I've seen this before many times, this is probably what's happening now, so the promises were good. We'll work on performance, we'll catch up, we'll go through the other side of this tunnel and as an outside consultant and Katie, you'll probably have a different perspective being on the inside, but when a client tells you, you know I'll do it. install screen doors on the submarine you say, well, it may not be the best idea, but if you're going to do it, damn, I'll help you do it, you know, and that was the deal, yeah, screen those screen doors on the submarine . submarine analogy that I didn't understand before with that project, but I'm familiar with that project, I know exactly what you experienced, yes, yes, Katie's experiences, you know her as a stakeholder, she also has to talk to the developers and get involved in the workflow there, you know, and there's still some common ground here because as an SEO stakeholder, you're interested in making sure that they implement things that will help visibility and not cause detriment, so how about something ? a little bit about us, a story from that perspective, sure, I think at first for me it was just that I was very isolated, so I started at Southern New Hampshire University four years ago and there were just different direct reports to developers and to SEO and I didn't feel like there was a lot of alignment, so at first I was like shooting web tickets and they were making a giant stack for the developers and everyone was doing the same thing throughout the process. college is just throwing web entries into the same place, so I think they, the developers, just had a lot of work and didn't have enough resources, so for me it was just how do I figure out how to prioritize these SEO projects and create a lot One of the first pieces of advice I received was that we needed to build relationships with developers.

You have to take them out for coffee or buy them beer. Make them cupcakes. And I was like I don't know. I feel like my work is important, so if it's important they prioritize it and if it's not then they won't like it. I don't know what they're working on. That's more important. It might be more important than what I'm asking for, so I think it's one of the best. Things from the beginning were just figuring out what they were up against, they basically had like 10 top priorities and then I was adding more things along the way, so I had to start at the top to say, "Hey, we're in." just putting things in the same bucket, like how we're prioritizing it, um and the organization started doing it anyway, but I think I like to learn, uh, how I present a business case so I can include my projects and listen to it. that they needed to like, I think a lot of times it's just creating a sense of urgency and creating data-driven stories and making sure you're reaching the right advocates to help projects move forward, but I think initially I kept thinking I kept listening to advice. at conferences like you just have to go directly to the developer and you just have to make a friend and I just try the pizza.

I've tried pizza um and I just think that if seo is important or if whatever technology the developer is trying to push is important then prioritization should be based on business impact totally yeah you know it sounds like you've tried everything If you came to pizza, Anthony, did pizza help your case? No, I tried vodka, I tried anything you could, you know, putting bottles and stuff, but at some point you know, look, and I don't want to say that the whole team, the team as a whole, they know that they have everyone pulling them, which I.

I'm sure you're aware that they have a new product pull, they have their next project, you know, so they have all these things and our goal as SEO is to try to say, "Okay, let's put this on the roadmap." and tell them the priority of this." So that's how much it's impacting traffic or how much it could impact traffic correctly and that helps them say, "Okay, that's behind schedule" or let's push this to the next sprint, but at the end of the day, in this situation, the lead developer really It was very obvious, let's put it that way, and after a while, I was given the leadership role of figuring out what the SEO problems were.

I kind of buried my suggestions even after I brought in outside experts to talk about what was going on with react um and eventually I had to back out, you know, I sent out the presentation, I said, look, I'm staking my reputation on this, if you do this , your traffic will come back, this is the problem and it seems like you both have something in common where you are trying to express yourself. You know the value of changes in implementation and it's just that you can have wildly different experiences depending on whether you're embedded in the company or organization or whether you're completely independent, so as you zoom out, you had to zoom in.

It's different, be more careful, I'm right, that sounds good, yes, yes, and I give a gift of this presentation to the general manager, who they told me not to talk to, so I have my hands, don't talk to the general manager ,uh. Anyway, six months later I got a call and the lead developer was no longer at the company they had, finally after hiring a bunch of other people, um, he managed to play whack-a-mole with React and fixed it. the issues and the performance issues and stuff. went off, you know, so they saw a 60 swing actually up, so that was nice, always good to hear, hey, you were right, you know, that's cool, but at the end of the day, I think this person didn't realize I realized I was on their side, right, I'm part of their team, I want them to look good, you know, in the end, it's all about results and getting the company great results and getting your paycheck because at the end of the day end of the day, they have to be profitable to be able to pay you well, that was what I think they missed, so you have to be persuasive that you are on their side and with Katie, when you are on her side, what are the things what could you do?

I ended up being successful and getting SEO implemented into the workflow there. I think I was trying to think about what were some pivotal moments that made things start to change and I think Jessica Bowman's keynote at SMX Advance last year really had a big impact. to me she was talking about implementing SEO and she was just saying you know whatAnyone who touches the website could be making multi-million dollar SEO decisions without realizing it, and you will always be outnumbered by the people who touch it. There will never be enough SEOs to have an SEO in the room for all of these things, so if you feel like you're running around chasing fires all the time then you need to operationalize SEO and she talks to me like I'm sitting in the front row, this is me , so I read his book, the SEO Playbook, and I went to another one of his one-day sessions and I brought some of my team with me and then I was able to get some support around that idea. of operationalizing SEO and just like the people who touch the website, they should be trained in at least the fundamentals of SEO, like at least knowing how to ask the question: will this affect SEO or how will this affect SEO?

Because if people just ask that question, then we have a chance to answer and then they can make a business decision whether SEO risks are worth considering or not, but before that there wasn't even a question, I was just running around trying to say for Please enter my project and stop breaking everything, um. and it's not like anyone was doing it on purpose the reasons for the changes were logical there just wasn't enough um there wasn't enough training across the company for all the people who had their hands on the website um so we worked a lot A lot on this year to offer training opportunities, but that had to come from leadership support, so we needed the leadership team to appreciate what SEO could do and the assets that we had, that they were valuable and that we needed to protect them, etc.

It was worth putting the resources into all the training we did and part of that was SEO technology training with the development team and that was good, I think it was also a team effort for us to share training and then work on something shared . documentation together, so it's interesting that many times I felt like I couldn't be on the same page with a developer like we would, we just had different interpretations of a problem if we wrote it that way. like we write documentation, we think it's this, your understanding is this where you're coming from this is where I'm coming from the more I realized that a lot of the disagreements that I thought I had we were just using different language because I come from a background in marketing, um, and I'm learning technical SEO, whereas they come from a program and a background, so I think we're using different words a lot and we thought we weren't on the same page. when we were, we probably were, it's a very important topic and the team building that you talked about, being on the same page when you write documentation together, you're literally on the same page, I mean, that's wonderful, that's how it goes to work and it did.

You find it more possible, because when you found out that some of the language we were talking about was the same thing, when you put the language together, you found that a lot of the common problems with SEO are some problems that developers are thinking about, they just have a framework different different accessibility problems performance problems these are things that are now also SEO problems and do you think there are more commonalities between those things? I think a big thing I learned is that they weren't working on SEO because they didn't want to, it was more about there was so many things, but I think it was about prioritizing them, like it wasn't like they were on purpose, like I hate the SEO, I'm not going to touch on it, there's just so much going on that it needs to be prioritized based on business impact, so if it wasn't and SEO is important, it wasn't.

I didn't do a good job of explaining urgency and storytelling and using data to explain why it was important the way it was. I think I thought a lot about how I felt like I was banging the drum and saying this is important and everyone was like yeah, good presentation, good job, you explained it, but then maybe I wasn't hanging around enough to say, well, which one? is the The next step now is: what are we going to do differently now? o and as the only party interested in SEO in that sense, Jessica's keynote really hit home because she was the big internal SEO personality in our community and she does a fantastic job. job of talking about a lot of these issues and, you know, it must have been right where you were, where you were seeing problems and issues, we have some comments here.

Nick says reverse proxies are the bane of my existence. Yeah, and that was a problem where you had a day difference in looking at the statistics and assigning, you know, responsibility for the drop in traffic and just, come on, you know, Nathan says that prioritizing traffic flows Development work versus SEO priorities is an ongoing challenge that must be managed carefully and keep in mind that discrepancies in workplace vocabulary create unnecessary obstacles, so these are things we should look to resolve, these are things that we should look for, you know, problem solving also if we are new to a project or we are new to an organization, does that sound like a valuable find, yes, yes, and I think in addition to Jessica Bowman's book, I really like learning about cotter's eight step change model for that um it's a book he wrote in the 1990s he's a Harvard business professor but just follow the steps to lead change and I think like SEO or even if you're a developer driving new technical projects, you'll be part of a change initiative and you'll learn how I think being a successful change leader is really valuable and, as I went through the steps and learned, how to create a sense of urgency and get a champion. that has influence and, um, and create quick wins, like while following the steps that I could.

See where I was falling short, like in the beginning, I wasn't creating enough urgency, I was saying this is important, this is good, we should optimize this, but I wasn't saying this guy is going to go down if we don't put some work into this. now, so I think just learning how to be an agent of change, even as a developer or SEO, I think it's really important if you try, if you're regularly a part of testing these processes and you touched on something that they're very important as a developer, so that as developers sometimes we have that backlog that you described earlier and that backlog can be a lot of tasks that we need to complete and do, and some of those things are First of all, you know they are fundamental to the way we the app works, so we consider them extremely important and therefore if any developer doesn't want to do SEO, if he seems dismissive, you know his real motivation.

It can range from something like, you know, a real disdain for SEO because I just don't like the idea at all, to something more like, you know, I would do it if I could, but I can't, you know, I'm just stuck. Anthony, there are a couple of other companies you mentioned, jw player and msn. I'm sure the developers know about jw player, but it's not necessarily that familiar, but either that or msn, everyone's heard of it, so you have a story in one of those two. Well, yeah, I have a couple, uh, a jw player was good, they were on the cutting edge, I mean, they were before the cutting edge, I mean, this was, they weren't going to read, they say they're, they're a JavaScript medium. . player so it was a yes that's what jw player is yes and basically I've been working with them getting great results and one day I get a call and it's the head of marketing and he says, hey, traffic is down like 80 and I said wow, okay, okay, let me see what's going on, so I'm looking at it.

I wonder what the hell happened. Did they do anything at the end? Oh yeah, we went to this fridge. react but you know, but you know when you were going to pass that on to me and this is to your point, you know that dialogue, you know anything that could even remotely affect SEO, even if you don't know enough about it, your SEO is there to help you. to take a look and they are not developers, we are diagnosticians of anything, but we will be able to guide them and say yes, we have to be very careful with this, you know, because of x, y, z and educate. them on it, so yeah, 80 crashes, but they implemented service-side rendering and this was before Evergreen Chrome and all that, but it worked great, everything came back.

Things look better than ever. Yeah, so, Evergreen, Evergreen Chrome, Evergreen, Google. blog uh it fixes a lot of things but it doesn't fix everything so a lot of these problems and a lot of these stories come from before evergreen but even after publishing evergreen there are still some problems so yeah well with the one I mentioned before when They went to react and saw a drop of 20 every time during the chrome impact we saw a seven percent increase. We didn't get back to where we were before, but we did see a seven percent increase, which is yet another indicator that you know something was up.

Continuing with don't react, so we have some comments here that validate a lot of what you guys are saying, we only have a minute or two left so I'll read them and then get some reactions and then we'll move on. So I've definitely found that driving accessibility changes alongside SEO prioritization has been difficult from a business case perspective and Katie, I hope you're thinking about the answers to that question and then Nathan says I've always found that trying to understand it. the developers kpi target key performance indicator target and then show how SEO technology changes can be incorporated into that workflow would not only decrease their workload but also improve business objectives generally works generally works to win over the developers I've worked with. with that it's interesting to understand the developers kpi goal katie I think that's what you strived to do, you wanted to understand what drove the developers and then what really changed was when leadership pushed us to have a kpi of shared performance so actually at one point snhu went from being on the digital marketing team to being on the web team so I have the same direct report yeah I personally share KPIs so I mean there were some moments important, but I would say that was also a fundamental point, that is huge. and what a successful win for SEO and developers to be on the team together Matt asks the other way around: have you found that SEO with a development background has helped bridge the gap in understanding that that's really what we're trying to do here with SEO for developers?

I have experience in development. I have a background in SEO and I'm trying to put them together and produce as much content as I can in this specific area. Isaac asks what everyone thinks about driving page speed insights for small local businesses. Service-based companies think that the roofer, the heating guy, the plumber who isn't looking for global traffic or dealing with a large majority of their customers without Wi-Fi or in bad connection situations, it's interesting that the speed is so high, but it seems that at the local level they are toning it down to focus more. in the kpi of block load times and input availability and not in tests with limited connections, but more Chrome development load times, that sounds like a pretty specific question, but we can globalize it by talking about amplifier and page speed .

Have you seen any? Pushing through the amp at all uh you know, I think Anthony you have, you know, I know you have projects where the amp is in, it's a push or you're pushing out, yeah, yeah, for the most part, I push. you with everyone um not specifically in very small companies, but in a small nonprofit in particular where we're setting up an amp. It's important at this point, you know, especially for smaller sites that may not have the resources to really optimize the performance of their site, you know they may not have a development team that can work on these performance goals and get faster loading times, so um amp is a great solution for that and I think even on Upwork, you can find people for a relatively decent amount of money, you know, pretty cheap, to get the amp working, so on a small scenario, I would say it's definitely a try, okay, last comment and then we'll sign off, by the way. now let's move on to phase two of the session uh dan danatan says the way we pushed accessibility plus SEO fixes was that we went to the legal team and got a full dollar amount that we had been sued for regarding noncompliance with the Ada standards in Katy, I know that your team, your development team, has to focus on uh, yeah, I think we're just working on making SEO and accessibility part of our DNA for the website, um , but I haven't found the problem where uh.

Putting accessibility and SEO together created a problem, it seems there were two different comments, one in whichthey worked well together and another one where it created a problem and I found that most of them go hand in hand like they complement each other, I think I think that too. that's how it should be, you should strive for it anyway, if you have problems, keep working on it because there is a way to get to a common language and this business case and managing the risk of being sued is one of those areas . You can focus as SEO by going to the developers for that, Anthony and Katie.

Thank you very much for your ideas today. Much appreciated. You've been wonderful and it sounds like you have great questions, so I hope you can stay. You know, go to the Google Meet post, post the session and respond some more, so thanks again, thank you both, awesome, okay, bye, okay, and for our next part of the session, let's go to start development work. I'm going to um I'd like to introduce you to Russ Jeffrey, Director of Strategic Integrations, in doubt, he's here to talk about the challenge of modern front end libraries like react and view, which we just discussed, they have uh in SEO and why SEO might want to implement the server. side-side rendering, so you'll get the advantages of server-side rendering in this case.

It will also be known as ssr server side rendering. You will then run through common techniques for implementing ssr with react and view and what developers will need. to keep in mind to keep pages fast and search engine

friendly

and I also notice there are some optimization tips in there so again if you have questions feel free to ask anytime just scroll down. And write your questions at the bottom. Welcome, Russ. Thank you. How are you? I'm very well, how are you? Excellent. We've had a good discussion. I hope you've had a chance to tune in and are ready for your presentation.

Yes, I feel like you guys prepared me perfectly. Know? My presentation here is going to focus a lot on the developer communication side of things and will definitely focus on how developers can understand a little more of the SEO nuances that go into a lot of things that SEO will bring to the table as part of their recommendations and optimizations. that you can think of so um ssr is absolutely one of these topics that is becoming more and more important so I'm very happy to be here so jump into a little bit of history. About me, I am the director of strategic integrations in question.

What's relevant to this conversation today is that I deal with any SEO development that happens within our web design platform, so this is ensuring that we implement all the best practices possible. we give the flexibility and the tools related to that, so I've done it as one of my many roles, I've done it for about six and seven years, that's why I'm here, that's why I'm part of the conversation. let's dive into the actual content and look at what ssr is, so server side rendering is essentially when you deliver the full content of a page to a visitor or to the browser when someone enters the site, now this, this might sound a little unintuitive, but actually a lot of these modern front-end frameworks with Anthony had had a lot of problems with this, they don't actually deliver the content directly to the browser, so these frameworks are things like react as a view like angular. svelt is another example that is becoming very popular nowadays, it is getting a lot of attention in the community, it is amazing, exactly, um ember is another one, but there are more than these five that I have listed, there are things like preact is another one. one, there are a handful of these tools and technologies out there where all the content you're seeing on a website is actually loaded with

javascript

in the browser and this creates some SEO issues for how Google and other search engines actually identify the content just by looking back a little bit, you know, historically, if you're looking, you know the '90s and '00s, the early years, you know that a server essentially responds with full HTML all the way to the browser, this is your traditional, I'm writing the html or I'm using a tool like wordpress or I'm using a tool like uh dreamweaver to build and generate that actual kind of static html now with these front end frameworks which are much more dynamic and the way it works is that the server just responds with code that responds with

javascript

, javascript then processes all this content and then displays it in the browser.

Now this works and creates a little problem. so that the search engines actually understand what the content of the page is because when they first arrive, when a crawler comes directly to the web page, they don't get that content right away, they need to then run that javascript and run it before they can get to it. there and this actually comes to you exactly, you had a little bit of this conversation in the previous talk where Google goes to what they call is always green and what that means is that they are always on the latest version of Chrome and that they actually , we're processing and loading all the javascript when they hit the web page, so if we dig a little deeper into how Google actually renders and renders the content, this will really flesh out a lot of this information for you guys in terms of understanding what's really going on. here, so if we start here on the left side, you can see that the first thing Google will do is find a URL that looks essentially cool to them.

You send them a sitemap, they're crawling and they find a URL on a web page, kind of like Google identifies that this page exists and Google should try to crawl that page, then they run that crawl process and download that initial html. from the browser, what they'll do is try to process that, if they can understand the content, if they can understand information about it, things like the title tag and the content that exists in the body or if there is, you know. a description that helps Google understand that content much faster or, if there is a link on the page, they can go and send that link back and then crawl that additional page within the website that maybe they didn't know about, but if you're not serving the actual content as part of that html, then Google needs to go and send this to a queue, a processing queue as they call it, and this is where they actually go and run all that javascript downloading a bunch of that extra information and then They have to go and process it and render it and this is a resource-intensive process.

In fact, in a previous presentation I gave, I talked about how things can fail between this process where Google won't send things. render queue or they'll see things as too similar and won't actually go to render the actual JavaScript page, so you have to be careful about asking Google to render all of this; the other problem this presents is simply slower. You know Google has to go and spend time rendering all these pages. Now I believe Google says the average page rendered is about 10 seconds. You know it's not a long time, but in some cases it can take. you know, minutes or hours in some of the most extreme cases for that content to be rendered, but they have to go and render all the content and then they push it back into that render before it gets indexed, so if you're rendering this html before, you're serving that content as part of that initial server response, you're going to give Google and other crawlers, in fact, more information faster so they can understand the content of that page." so keep that in mind this is the real depth behind why ssr or why server side rendering is important because of all this extra processing that is actually required for them to load javascript that is there so im just reviewing this, you know.

I've talked so far about indexability as the main problem that server-side rendering solves, but it also helps with some of these other elements, so one is speed, it's just faster by not having to make the browser render a lot. of this content, many people have visited a web page and had a blank page for several seconds most of the time, that is because javascript is running and javascript takes a long time to run, so if you serve that content faster through server-side rendering is going to speed up the page experience, um tools, this is one that actually, um, is actually a big frustration for developers, um, I'm willing to bet if any developer down the line has received a report from an SEO that says here are the 10 HTML structural changes we should make to the page and the developer could go look at them and say, "Hey, this is a false positive or something that doesn't work." works properly and often that's because a lot of the SEO tools that you're using might not support JavaScript, they might not run that JavaScript as well.

A perfect example of this is a screaming frog. The free version of Screaming Frog does not process JavaScript, so it just looks at the initial page request and loads that scream. frog does it in the paid version, you can enable a javascript renderer but a lot of people don't enable it which is not the default setting of Screaming Frog so any of these tools that SEO uses could be scanning the site and waiting for that full HTML and so. Full content answer from the beginning, so I'm sure the developers have had to deal with many of these headaches.

I'm not quite sure what this means or what that report means or how to fix the problem that there is a comment above about the headlight type. to report and not really be sure how to respond to that, so I think tools are something that is very underrated today in the SEO community and the last one is social sharing, so this is a quick point, but it's about you knowing things like me. I'm sharing my web page on Facebook or Instagram, and Facebook tries to pull an image and they try to pull the title and a description.

I can tell you for sure because Facebook doesn't process JavaScript, so if you're uploading the open graph tags or Twitter cards, after the fact, with javascript they won't find them and that will also create some social sharing issues, so ssr It helps to solve many of these problems online today, especially they help interoperability with other systems, as your website will be crawled by many other systems, ssr really helps interoperability on the web in general and especially indexability , especially for SEO, so I hope I was able to configure many First of all, the problem of why many of these front-end frameworks are causing these problems and understanding why it is important, let's dive in now and start talking about how to solve them in two different examples, so I will analyze two.

Real code examples with react and see this. The examples I have given are with a node.js backend. Node.js is also a javascript backend, so you are doing javascript on the front-end and javascript on the server. or on the back end you can also solve this with other frameworks you know if you have python on the back end or you have php on the back end there are other tools to do it, it is a little bit more difficult to achieve, you need to take a few steps more, but you can, you can do it and I have some links here, if you want to link through these, there are some github profiles, if you want to download the presentation afterwards and get access to them, you can come and check out some of these others. services I mention here below and below these are our full frameworks for react and see they have a lot of these best practices built in so next and nux have server side rendering as a native part of what they do and you can enable it . very easily so if you're starting a new project those are things to consider but obviously they won't work with an existing project so let's get into the actual examples so the first example I'll go over here is react so here There are four steps that I need to follow, so what you need to do to set up a server-side rendering for react.

The first thing I show here is that it's just a very simple react app, so this is if I were writing the real version.

markup

for client side or for browser, this is just great. I have a navigation, then I have a body and the body says you know load the content of the body based on the URL, so in this case it can be uh. the home page for the path is just a forward slash or it can be blog post pages, in this example, so it could tell you about a lot of different blog posts on the site itself and the react app just says, "Load this content or upload that.

The content depends on what the page path is, it's not too important for this example, but it's just to get an idea of ​​what the interface looks like on the back. What we want to do isgo and say great. I want to render this html on the backend. I want to load that html directly from the server, so we're using what's called isomorphic code here, so you'll notice I'm importing react, which is the same react library as you. You would be using it on the front end as you would be using it on the back end so you are running the same process to generate the html that would happen in the browser and you are also doing it on the server so I am also going to use express express is a node.js framework for running servers that makes it easy to spin up a server and respond to requests and then I'm also using some other libraries called react dom server and then a static router as well and the router looks at the specific url .

Now the next step we have here on our server is to configure Express to respond to the request, so this application.git says that for any request from a browser, let's say great, we have to go and generate the html for that page , so this means that any URL that they're visiting can be, you know, forward slash, forward slash, you know, blog post one, uh or something like that, uh, we're generating it. then we go and generate some context, this context will actually be specific to your backend and your technology. This is the data in your database.

If we go with the blog example, the data would be great. I have a post title. I have an author, I have the date it was published, I have the content that is there, I may have a main image that I am using, which would be the context or data related to that blog post, so I need to go fetch it . In my example here, I skip this because it's going to be different for each implementation and then finally we go and basically use that react dom server to render html so what we're doing here is we're using um this render to string function , which says great, take these react components and actually go and render them completely based on the URL and give me that html, so I'm actually rendering the html of the page on the server. side and that's what's happening right there, the next step what you want to do is go and grab your index file, this index file is like a template, it's all the rest of the content that you have inside a page is the header the one that says cool, I have the title tag in the header and I have some script tags in the header and I have some meta tags in the header and also anything that might come after, like anyone. the template is like the shell of the page or the index files like the shell surrounding the content itself.

Next, we're going to respond with the server, that's what that res.send returns and what it is. what we are doing is replacing the root content or the body of the content with that generated html so that the server responds with that full html response and from the server it will be exactly the same html that would instead be rendered on the client side and the Final step here is to simply configure the server to actually listen for traffic on a specific port, which is just a very simple example of what the server would look like when responding to a server. side request and the kind of logic behind it, the next step we want to do and this is go back to the client side or the browser side, then we want to go and really hydrate.

This is a pretty technical concept, but normally when you're running a react app, you react.tom and you do a render function here and the render says: great loads this html, but since that html already exists, we don't want to re-render it if you did it. If you get a flicker on the screen for a millisecond when React re-renders the content there and reloads it, so to prevent that flicker, we have something called hydration, this is built into React and hydration just says, "Okay , this html already exists, but I want to connect the rest of the react functionality to the actual element that exists there so that this attaches click events so that it can navigate through the change pages, all the standard react functionality, then it loads and it takes over the browser side and then that's all you need to do to set up your react app and get everything up and running.

The last step I have here is to take this a step further and try to optimize it a little more for SEO , so in this case, I'm going to go back to that uh res.send that I had before and I'm actually adding things like the title, so on that page I say great, we're going to have a dynamic title that is returned from the server to Let's say cool, we are inserting the title there or we are implementing a canonical tag on this page, if we are worried about duplicate content, we can implement the canonical to say cool, this is the source of truth of this page, you can do the same.

Same for open graph tags. Same for a meta description. If you have a multi-language site, you can make hreflane tags. A lot of these things can also be injected for the title tag there, so it's set up inside of uh react using uh, they also have built-in server-side functions, so let's move on to the next, the next example here is see see, It's very similar to react, but they have a different way of building, but you'll see. many of the same concepts are built into the view directly there, so see this is an example of a template page that would exist, so in the example above the equivalent is the index page I mentioned where we are simply adding dynamic fields . here, so you can see, I have a title, I have meta tags that I'm going to include with double handlebars or triple handlebars and then the body of the page will be rendered and replaced with this current placeholder, so if we jump to the actual code, um , it will be very similar, we are leveraging the same isomorphic concept that we were reacting with, so we are loading the same view library and we are also using express in this example.

Also here we are also taking that index file and that index file is the same as what you had on the previous page. It's showing up great, we're taking it and we're reading it from the file itself and the end. What we're doing is loading the renderer, so this is another library, the view server renderer that provides the view directly, it's part of its extensions type ecosystem, so I'm importing it and using it as part of the code. What I'm doing is passing that index file as the source. I'm creating that initial render. The next step is to load that context, the same as before, where I'm loading information about that specific page or what's accessed on the client side, so in this case I'm just setting up a title and some meta tags that are there and which will be injected into the page directly.

The next step here is to configure our server to respond to that request is very similar to the previous examples, we tell Express to respond to get requests for any URL on the website and then we say excellent view, initialize and grab this template that is is rendering here, so we're A big view is being initialized and then the view will process that request and convert it to html and finally we'll use that renderer to render everything into a string, uh, and what we're doing is We're taking the application of view, uh, we're passing in the view application, we're passing in the context and then that returns the raw HTML string which I then just inject and respond directly to the server with the full HTML of the page. so you see very similar concepts that we are using the view, we are generating the html of the page and then we respond to that request and you see it over and over again as part of the same pattern of how this works and finally we are doing the same hydration process , so on the client side we want to make sure we hydrate the application.

On the surface, it's just called a mount function instead of hydrate, but it's exactly the same concept otherwise. We're initializing the template and then we're making sure that vu understands that they need to connect directly to that template, so those are two patterns on how to implement uh with both react and view um um and you can see that you know it takes a little bit of forethought. and a bit of planning to achieve this, but it really is good practice nowadays to implement a lot of this server-side rendering directly as part of the process of building sites too, so that's it from a presentation and content perspective and, uh, deadlift, I think we have several questions too, if we do, thanks for letting me know.

I love coding, someone had a comment about that. it's a new framework, now you went through react and showed react, which is like the big boy of javascript libraries, and then you also discussed your view, which actually a googler took off and created his evan wu, I think that's the one that uh uh he's the person who invented the view uh and uh he's pretty much on his own uh putting the framework together he's in a pretty exciting community around the view as well um and the differences that surprised me uh you know, a good point of content or The context it's like you're in react submitting, submitting the application shell basically and hydrating it and you choose which components you want to be part of the shell and that's really the SEO thinking around this, right?

I want to include in your strategy what parts I want to ship with the shell and what parts I can hydrate later, yes, and depending on your site and page, that's the type of things you want to think about and is there anything you want? I want to talk maybe in terms of deferral, so I mean obviously hydrating is a deferral, it's a deferral strategy, but also when the page is actually rendered and if you're just starting to look at Web Vitals, you might want to defer more. than just do this. defer hydration, but defer even more because you have styles, maybe you want to put some of those styles inline so those scores fit in web vitals and performance and defer it later with javascript or something, so you can keep thinking about more details. postponement after shipping the shell and then hydrating it, yes definitely, I think this is a pretty big problem.

I think today, for people who have used it, you know what some of these frameworks are where you know when I'm rendering that blog post in my example above or I'm rendering the page that I just want to load. You know, my code is related to that blog post page. I may have other types of pages on my site. I may have a recipe, content, or health information page on my site, but I don't want to load all the same code that is used to render those pages, so what you're talking about defer is saying cool, let's just load what we need.

I need for blog posts and, you know, a lot of these frameworks are A lot of the way developers work today is to bundle all of these things into one big JavaScript file, so when you go and load a page, you're uploading all the code needed for the blog post, you need all the code that's there. for recipe pages you need all the code that is needed for other types of pages on the site and they are not what is called splitting that code into different areas and this creates really large javascript files but it also creates a lot of that experience that I mentioned, that white screen effect, so this is a real speed optimization that a lot of developers need to look at how can I split that and how can I defer loading.

How can I say great? I only want to load the recipe pages and related features once people visit that page and not as that initial request. It is a difficult problem to solve. Many of these tools have really taken this seriously in the past. a year or two and I've really started to prepare this so this is one of the reasons I mentioned you know next or next they have some of this stuff built in by default as part of the library and the framework where they implement many things. of those best practices, if you're using just react directly, it's not that direct, so yeah, sure, and you know the idea of ​​bundling everything into a single script file is great, you know, the initial thought, but then with this deferred.

The idea of ​​snoozing it, the reason it's important is so that the page loads like you say, if you're just looking at a blank screen that's because that huge javascript file has a backlog of pending tasks that are eating up the main thread. you're busy, you're busy just parsing all your javascript before it has a chance to paint, so you know you know that's why you're having these problems and that's why you want to look at this stuff and split your package so you can postpone the loading these other, you know, scripts that are less important than you know, something that could prevent them from being added to your web vitals scores, like lagfirst entry, how long does it take for the page to be ready to respond to a click? a scroll or a keyboard input and that could be seconds.

We've all had the experience of trying to click a button and it just doesn't work until like three seconds pass and then all of a sudden it works because the thread was busy, it couldn't process that event handler until three seconds later. That's exactly it. This is what Google is really trying to solve with its new Web Vitals: give you those key metrics up front and mention them. and tell you that you have these user experience issues on your site that they're identifying and a lot of the root causes end up being some of these things that we were mentioning before about package sizes and we included a lot of these. additional libraries uh it really does, you know, these frameworks are great, on the one hand, because they allow developers to move quickly and scale their applications very easily, but on the other hand, many of them have not taken advantage of this experience of User or performance things take into account and developers need to look and make sure that they are actually meeting many of the user expectations from the actual experience, which is what is missing and Google has gone a good way.

Good job highlighting these, I think actually with how they've updated their vitals and also how they've been really evolving, to have this consistent kind of signals that they're giving, yeah, and the dev tools are fantastic Chrome dev tools. Oh man, so how much experience have you had with me personally? I do not have much. You know, I've done the basics, you know, Hello World type stuff, but I haven't gone too deep. More. that that uh is something that I want to do, I haven't done it, although yes, the main thing felt is that they are in version three, this is the third lean is the one that is taking off because they had spelled one and two and I had built my Hello worlds, in uh written two in 2.0, I think, but three is the one that's taking off and I'm enjoying watching it.

I actually reached out to Rich Harris a little bit to see if he might want to participate in some of our discussions. Keep an eye out for that, but the thing is, it's like he dumps the whole thing and hey, why don't we run a compiler that it generates the prepared reactive javascript inline with the code and we send the complete html string, I mean, the server side rendering in salt is very natural, it's a natural thing because that's the process it's doing, that's the notion of por what's taking off, you know, right now it's probably in third place. third mentioned, right?

I definitely think, generally speaking, you see a lot of organizations adopt react because a is backed by Facebook and b has a large community and is well established, but you see a lot of enthusiasm from the developers, and at less in the surveys that I've read, you see a lot of this for a view of developers saying I want to use, I want to try that and you see a lot of the same enthusiasm in the recent ones related to spelling, so you know it hasn't been adopted. yet, but it's something that developers are excited to use and probably will, you know, at some point in the future, oh, definitely, I mean, you're hearing the lean community, the ones leading it, talking about it, Hey, if you have a production. spelled app, let us know we want to know about it and so they're hoping to get some traction that way and also, you know, basically right now, if you're looking for a job, health wouldn't be the framework, this would be something that you would do more for yourself to develop your own personal development and growth uh because there are a lot more reaction jobs and even visualization jobs than there would be and even angular jobs there are very few or almost nonexistent spell jobs right now, but it's taking off and as it gets this developer momentum, you know it could be a superstar, I mean, vue started small and blew up, uh, and it's a fantastic framework, I mean, you can see, uh, and this is not really a good push . of framework quality actually, but you can see how much simpler it is when you look at the number of things you have to write to react versus the number of things you have to write to see and in lean it's even leaner, so you know they have a big shorthand with a dollar sign equal to which

power

s some of your template things to make some things your own, for example the way things become reactive is by changing state and it's as soon as a variable has a state change, anything it's connected to changes automatically, so these things happen really natively, in awe, it's salt, it's an amazing framework, something to look out for now, Brandon says, I hope Russ, yeah, Brandon says, I hope Russ talks about these frameworks, how they affect cls or uh. cumulative layout change yeah yeah so little bits of that if you want yeah yeah yeah it's a challenge it's definitely a challenge too with some of these frameworks where you know you try and make sure that with the way react works is that you have multiple components that make up the entire page, so you have a sidebar component and a main content component, you can have a header component and then within that header you can have a navigation and react component tries to make sure that you're rendering all of that at the same time but it's not always perfect and you might have something cool inside that component, you're loading an image that the image needs to then go and download and then that . will have its own change, so the community layout change is essentially our cls, it's when you're loading a page and you see the content moving and jumping, and that's a bad experience, so you have to really dive in and making sure that during that loading experience that it doesn't change as much as possible and these frameworks don't really help much with that, sometimes they make it a little bit more difficult to leverage and implement that one, one, an example of this, uh, just quickly.

It's with images where a best practice now is to include a height and a width you know on the images themselves because they take up space, even if that image doesn't load you still say cool, this image is 300 pixels tall and you know, 500 pixels wide, whatever it is, and it will take up that space even when it's still loading on the page because you have that empty space, the rest of the content around it won't jump down as well. so that's something you have to look at and it's not something that you know reacting or seeing has traditionally helped with.

Yes, in fact, it would arguably be an old best practice that has been around for eons, but the advent of new JavaScript frameworks does. removing those things in favor of just getting it up and running, getting an application framework up and running, and reaching critical mass, so those things were decided as less important, you know, going back to the future, which is where we are now, you know. . The width and height attributes are key for you to know how to create that content design; otherwise, you know, hey, and you know your content is going to change and we've all had that experience, it's a terrible experience when there's controversy if you're reading something and it suddenly goes off, I mean, I'm having that problem with the section of comments right now, so it's like you know that this is an issue that affects the readability and actual performance of your page and therefore the way they calculate. is that where is the start point of an element and where is the end point if an element is moved and how far does it move and how much of the viewport is occupied by that element?

So if we're talking about At the top of a page you have a main image and you know it hasn't been downloaded, but if you haven't given it the height and width attributes, the text will appear there in the model text flow. document objects. It will be up there until the image loads and then it will push all the text down so you can see the text and then it will split and be displaced by the hero that suddenly comes into view. It's going to be a horrible cls score right there, so exactly let alone if you had a callback on the screen and someone was trying to click that button and they clicked something else because your screen moved, that's even worse and Yes, you have the possibility in the reactive view to assign these width and height attributes.

I'm right? It is absolutely, so it is not difficult for an SEO to find cumulative design changes. SEO finds these things. Send it maybe to a react developer and say, "Hey, please assign height and width." This shouldn't be a big question. everything should be very simple, it is and it's not right, it's very simple to go and say add a height and a width, but a developer would say I want to automate this, I don't want to have to do this if I wrote that if I write five blog posts more in the future and I have different images, I want to make sure that I set this up automatically for future things as well so that we don't have to go back to them, um, and that's a great point, right? to go through that thought process of oh I need to think about the future and what are the possible images that I'm going to have there, so yeah, I'm actually facing that problem now with user generated content, so it's like how do i know?

What size are the images you upload? Well, I have to run a separate bash process, like you know, to run it, you know, identify using Image Magic or something to retrieve the dimensions, or you know something or you know you can use JavaScript, but that's too much. late, you know you know, yeah, so you have to find some way to take the dimensions that you know through some process to assign the values, um, so yeah, automating that will be in some cases, it will be easy if it's in a template and it's a page as part of a template, okay, an image or media that is part of a template, that's always, yes, that's exactly right, this may be too easy, but there are some new ways to do it. to solve this, um, some new CSS ways to say that I know that as part of my layout of this blog post, I'm not going to allow the images to be larger or I have a specific base proportion that I'm using on the page of how big the aspect ratio of the image is going to be, so you can set that aspect ratio in CSS today, but that requires a little bit of forethought to say I know all of these images are going to be more or less the same and we're going to adjust it to that aspect ratio. and that's on the page itself so you can solve it that way, but it's still a problem, yeah yeah, I just read about that CSS ratio declaration, it's something I wasn't familiar with because I think it's relatively new, is it?

TRUE? That could be and I think Addy Osmani, who does the uh, he's part of the Web Vitals team, that's true, I saw his presentation on his Web Dot, uh Dev Live, they had it about a month and a half ago, yeah, Yes Yes. Yeah, I think he talks about that and I read his blog post for that session and everything related to that, I see the CSS, so I'm glad you mentioned it because I saw that and I thought, oh, that's it. cool, but I still haven't had a chance to dig deep enough and implement it in part of any of my projects yet, but I plan to, yeah, okay, so there's a discussion in the comments about uh, no matter how cool it is . content is if a search engine can't understand it, see it or index it, don't get me wrong.

I don't think everyone should be an expert in technical SEO, but IMHO understanding some basic technical SEO is a requirement, as is understanding it. the importance of content even when you're a technical SEO, so apparently there are lively discussions in our audience that are like do we really need to know all this technical stuff or do we know all this technical stuff, you know? Hmm, but wait, and the content is still important. I like to see how you implemented SEO in your view. uh, demo showing how, and you'll still want to replace the title and meta with the corresponding fields that you know.

I have stored for this page for this resource uh and in the canonical you showed the canonical that you had the uh rec dot hostname rec dot you know uh uh path and everything to feed the canonicals because and then you can go to the end and I mentioned that you can enter to the outline, you could go into the outline there, you know absolutely that hotspot, yeah, 100, yeah, you know that's an interesting line about how far SEOs have to go in the technical field, you know, I think I think the reality is. You know that if you are at least able to communicate these things, this adds more value and makes you better in your role and more effective, so I think you know how to dabble a little in this as SEO.

It's important to know that you obviously don't need to go to the depth that you and I are talking about here about how you group your packages and upload them later. A lot of it, like true SEO, is going to be a little too complex. depth probably, but making sure you're thinkingSince you can tell, put things in the position of what Google sees and what Google expects and how they find content, putting it in that perspective so that developers can take that and understand it, okay, Google is seeing things from differently than a visitor to my website trying to put that context in place, I think that's a valuable skill set to have as an SEO, yes, yes, absolutely, and you know you want to provide that feedback and from the point of view from the developer, you want to understand how Google is processing your stuff because at first they're not processing anything but your shell, you know they make a decision at that moment, shall we introduce this? you know, we spend the resources because it's resource intensive, we spend the resources to render this or not, you know they can do it and they will do it, uh, and then the content that you get may be delayed in its indexing anyway, so it's something so you have to make the decision.

Also, with your SEO, which is what I loved having Katie as part of the developer team, she now reports to the same people, I mean, that example is fantastic. You know, I think I really think that companies should consider that and make sure that they understand that SEO is basically an advertising appendage or at least a part of the developer team that you know and bring them directly so that the developers learn the agile process. They don't necessarily have to know development, but they should be. uh, capable enough to find some of these scores and some of these things that are part of the ranking algorithm.

Now I want to say that Web Vitals will be part of the ranking algorithm in 2021. At some point you will know that this is really important. no, you don't need to know the code, we need to understand what these metrics mean, where to find them, so you'll want to look at the Chrome Developer Tools to find them so you can help train developers to see them. the same thing and understand how they could see that and go and it could trigger a solution in their minds like oh let's change this uh eric a spelled fan says the smell is on lol now with typescript which is actually a new What they long expected to get Type Now TypeScript, which is a super type-safe JavaScript language, uh, let's see Lou Asks are Progressive Web Apps, as good as they promote themselves as pwas while claiming to render everything on the server . and Googlebot sees the full HTML of the pages, they still use jsonld to add metadata to the pages, for example meta titles, descriptions, alternative images, and structured data that is crawled with Screaming Frog.

You must have js processing enabled to see this information correctly. It is not like this? maybe it's an indication that Googlebot doesn't see this information as easily, yes or no, no, yes, I said no, I think look, I tried to cover this a little bit in the presentation, but I think you know that Google renders JavaScript and loads everything. Of this they try to load as much as possible but it becomes just a bit questionable what exactly Google can do and render in the actual type of page rendering process, so if things are really lagging and loading late , they take a long time and may not load.

Google may never see them if it loads pretty fast, you know, and your JavaScript isn't very heavy, then Google will have a much easier time finding and rendering that content. This can get very deep, very quickly, and many times. when you start trying to figure out what the rules are for how Google will find things and no, it's actually going to be case by case what Google is able to represent and what it's not, I know, Adela, yes You have Martin and I think the third day, he's really great at trying to analyze this much better than I do, what Google actually understands and what they read when they crawl, but if I had to.

The answer to the first part of the question is: are they progressive web applications? All that's hyped up is that in my opinion I think they're great, right? Google is trying to bridge the gap between a native app and the web. and they're doing it through pwa and adding a lot of these features, like push notifications, like installing it locally, like being able to set the brand type and color scheme with the manifest files, a lot of this stuff is Google. trying to close that gap with pwas, I mean I think it's an important evolution for the web in general to keep it as relevant as possible and as functional as possible now I think the reality is that a lot of these things are not as adopted, You know, the web can still be text, images and video, and that's it, and not a lot of these more immersive features, but I think it's a good effort that we're making and I think it's worth it, so yeah, you have a small folder in which your website is installed and the folder will actually run JavaScript service workers to perform small tasks even if you are disconnected from the internet. it's very cool so you can get a notification from us even if you are offline i.e. time based notification app you know and even if you are completely offline from the internet so spa uh sorry pwas our apps Progressive web apps are great for what they were designed for, what requirements they were designed for and that's really these situations of low connection, spotty connection, intermittent connection, uh, so you can run a little application and you even know how to run it. running things offline, so for that purpose it's great, it's not there for an SEO type of thing per se, but you can make it so you can't optimize your pwa website, um, there's a quick circle back to images what is Corey asking because we were doing and this is an answer to an important question uh uh we were talking about skins uh in the new CSS skin declarations what about responsive images?

How do you do that? Because you have a width of 100 and a height set to auto. to make a responsive image actually shrink and expand based on its viewport, how about what about that? Yeah, well, I think first of all, you know, most images, you know that using that aspect ratio that we mentioned, the image will respond to the width of the screen uh so it will reload now that being said commutative cumulative layout change how it affects that kind of thing uh it should be the same because the aspect ratio of the image will be the same uh no matter what screen size you're on, if you're loading that entire image, unless you're doing some Manipulation with CSS to load only a certain part of the image or set it as a background image so that you load it as in the middle. of that but not the size and unless you're doing something like that it should be the same for cls um in that sense now I got that thing too yeah go ahead just the only thing I'll do What should be mentioned is that there's always the issue of the actual pixel size of the image, you know, if you're uploading a large image, you want to use some of the responsive image tools to say cool, I'm going to have several different image sizes. one is a desktop size, one is a tablet size, maybe a mobile size, um, that would exist and you want to make sure that you're generating multiple versions of that image because it's just a waste to download a wide 3000 pixels. image on a mobile device, you're downloading a lot of extra megabytes, you know, that won't be necessary, so there are a lot of great ways to implement responsive images in terms of what is the size of the phone and what image to load correspondingly, it's like the attribute of data source in the image tag with the different versions of uh depending on the resolution of this viewport, that's exactly right, using media queries to get the correct dimensions, yeah right, and I read that, I think yesterday. that the cumulative layout change score is calculated based on the size of the image as displayed, not necessarily the actual size of the image itself, so if you have a pixelated image because you have enlarged it and it moves and changes , add more to your cls score, uh, if you have a large image and you got it only actually small because you're setting the dimensions to small, I'm not going to fault you for the large image size, uh. your cls score will be just the small part of the port that is consuming the part of the viewport that is currently in view and that's a cool thing, you know, Google tries to be helpful when they do that.

If they do it. Stephanie asks. I'm trying to diagnose if a spa, which is a single page application, the content will be visible to search engines when it is launched. The content is visible in the dom but is not rendered in html when I place it. a mobile compatibility test, what does this mean? That sounds like a problem, Stephanie. um, Google's mobile

friendly

test is the closest thing to what Google sees as a search engine, so if you're not seeing that, content in the html, you can ignore the screenshot, look at the actual html which returns the mobile-friendliness test, if you don't see that content, then Google won't find that content after the fact, so you need to make sure that that content in its html format exists there, as part of the mobile-friendliness test. mobile support so you definitely need to talk to your team and make sure that they find all the content that's out there and that sounds like a bit of a problem yeah yeah that's definitely a problem um look and then Ryan question with ssr, does the javascript platform when rendering allow caching at some level? uh or pre-rendered content is reduced to reduce server load.

I'm just curious what the balance is. It catches my attention if any content is static or the same on initial load. Yes, I'm happy too. I'm happy to address this. This is a great point. It's another opportunity for optimization. To say when you know during the process that I was basically taking. and loading, you know the react app, it was taking the content, it was rendering that raw html and most often html is not going to change very frequently, so if visitor number two, number three, number four comes , we don't have to regenerate all of that as part of the server-side request, you can do what's called caching or temporarily save it to something that's faster for the server to access and so, yes, absolutely you can go and cache that and I think that makes a lot of sense and it will really depend on your use case of how often that content is updated and how often you need to re-render that html to have the content more recent and updated, so connect it to your backend you already know cms. or tools to make sure the cache is cleared when the content is updated or something like that is also an important step, but caching is absolutely something I would recommend as part of this, obviously I didn't go into that because I gave a High Level , but in my opinion it is a great optimization.

Yes, we have a question about speed. Why the sp? The page speed is different for different versions of the same URL, for example the page speed of example.com is different for example http. com, which is different from https example.com and then https www.example.com, so this guy is watching durga is watching different speeds on each of these, any thought that comes to mind, a couple of these They are literally different, well, the URLs are different, you know, it's hard to say 100 for sure without knowing how to look at the real example. My first impression would be one: are you redirecting differently?

So if someone visits you and you're entering http, you're probably going to redirect them to the https version and so the page speed might be picking up on that redirect and saying, oh, you want to minimize these redirects because that takes time as part of the process to create a new connection and all that kind of fun stuff, the same example of going from example.com to www they might be detecting that so I would look at them. It also seems like you're mentioning that https um is also a little bit slower, so it's possible that the https connection is slower on the site. which is also a possibility, some servers take a little longer to establish that ssl or tls connection so I would look into that too, but I'm guessing otherwise it's the same content so I hope to point you in the direction of investigate further, yeah yeah, the tls connection could or should be super fast because as long as you use a you know, I mean, if it's that certification authorities switch, right, yeah, okay, uh, let's see there's a lot of discussion going on. . around our responsive images, so, but anyway, let's see what is your favorite framework, what is your favorite framework among a search engine to do optimization and search engine optimization amongthe big libraries or not, you don't have one and you're just looking at the differences, then highlight the differences that you would see and what advantages and disadvantages there are between all the different frameworks, the most important ones, that's a tough question, that's a deep question, you know a lot of this.

Personally it comes down to preference and experience, so I personally have the most experience with vue. I've built a few different apps in view and so I'm more comfortable with that, I think the tools they provide are similar. I mentioned that you have like it's built into the router library, it's part of you, you have server-side rendering as part of the display ecosystem and it ties in very well, so I find it very easy to use, uh, I think A lot of people would say the same thing about reacting and they would say the same thing about still being right, um, so I didn't like how we talked a little bit earlier.

I haven't gone too deep into svelt, uh, based on your experience you left, it sounds like it's pretty easy and simple to use and manage as well as part of it, so yeah, it's the build step that sets it apart from anything else. because it's very much server-side built and shipped, you know, more or less. Inline JavaScript for all reactivity. All of these though have components and component libraries. React probably has the largest component library. So any experience with component libraries because there is a question: these new technologies react. Sometimes they use external UI components. Removes content from the user interface. dom when they are hidden and not SEO friendly, so it's great to keep that in mind and it's better to use custom components with class names to play with the display CSS property, so I guess what they are saying is that despite that these exist.

Great, there is a whole library of these components. Maybe you can create your own or customize it so you can play with it because not all of them will be search engine friendly, just like WordPress you can add all kinds of plugins. and just completely inflate your wordpress and blow it up, I mean you could do the same thing with react, you can say oh this looks so cool, just do it the same with you, it has a library of components, that's right, it's just react. it's like a deeper layer, right, it's deeper in the development process because you're including all these extra things and you're right, it can easily inflate the overall size of the website and the speed of the website can really mess everything up.

Well, now it's time to thank you very much and you will hear all the applause and applause from everyone, thank you for all your ideas and I hope you have the opportunity to stay and we can all get together in the session afterward. Google Hangout, so thank you all for coming. Thank you. See you tomorrow. Don't forget to tune in at the same time and place for the discussion with John Merch about using tools, including the puppeteer. get into creating SEO tools and SEO uh, the tech SEO process, okay, thank you very much, signing out now