My personal website relies heavily on window and mouse events for background and text animation. How would I go about the process of optimizing SEO in my NEXTJS app when that is the case?
#Is good SEO achievable in a fully client-rendered website?
fervent compass
tepid ventureBOT
mystic violet
My personal website relies heavily on window and mouse events for background and...
you can still optimize it, by passing the components, that needs to be a client component (background, ...) as client components. A background for example is not important for google. More important is text. For text, I would do something like this:
<span className="sr-only">Some Text</span>
Like that the text is rendered for google, but not for the user. Keep in mind: the span is an addition to your animated text
fervent compass
so the same text I have in my framer motion animated div I can just repeat with classname sr-only and it will work? I've heard crawlers penilize for using "display-none" and hiding content, won't that be the same case with sr-only approach? @mystic violet
mystic violet
so the same text I have in my framer motion animated div I can just repeat with ...
Try it and take a look at your network tab and also take a look at the html that will be generated. Everything should be fine, when you only add the html without changing anything at the css front
pastel sigil
You can use lazy motion
By framer
If google framer motion lazy motion it should show a sample tutorial on making it lazy load the animation
fervent compass
it says it reduced bundle size, but how does it change the fact that it's still client rendered
AFAIK the issue is that the crawlers cant access the client rendered content and index it or something of that nature
pastel sigil
Hmm the only thing i can think of at the moment is to use sitemap
And screen reading only too tags
mystic violet
Hmm the only thing i can think of at the moment is to use sitemap
sitemap is only for sites, not for the content of the sites
neon ocean
My personal website relies heavily on window and mouse events for background and...
my personal website used to hide everything at the start but only fade them in (opacity: 0 -> 1) on load. Google has no problems with it, it could read it pretty well
not sure about display:none though
so you could instead of display:none, simply hide it by opacity or transition or similar methods
fervent compass
this is exactly what I am using ,a couple of opacity 0 to 1 effects using framer motion, but what I've read about SEO is that almost any client side content does not get picked up by crawlers
mystic violet
that what joulev said. You can for example position it absolute like this:
{
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
neon ocean
this is exactly what I am using ,a couple of opacity 0 to 1 effects using frame...
it did get picked up by crawlers for me, so no need to be too worried about it
though now i have completely redesigned the thing so no longer have a live demo for you
fervent compass
Okay.. so I shouldn't worry then I guess
Just weird that most info on the internet suggest otherwise, maybe it's either old info or incomplete
neon ocean
display:none or area-hidden=true could actually have an impact
though opacity:0 i don't think has any impact on SEO
fervent compass
I'm not doing any of those in my website
I'm just doing fade in animations for my h1 and some components
and an animated background that acts as a spotlight and it requires the mouse move and mouse offset events
@neon ocean did you go through google search console to verify your domain's ownership?
or did it just work
neon ocean
it just worked, yes
fervent compass
well let's consider this matter solved, I guess time will tell if my website will get indexed properly (since I got the domain just 2-3 days ago) and I don't really have any content on my website YET 😅 thanks joulev