On this Webflow lesson we take a look at SEO Essentials. How to optimize Webflow pages for search engines and simple on-page factors to take care of in Webflow.
All our project files for you to practice and play with along with some bonus materials.
It has been the best investment I made in my design journey so far. I would consider myself a novice but I honestly feel like I've gained a genuine professional insight into the process of creating a high-level website.
I'm an early adopter of the KreativePro Masterclass, and I love how well put together it is. Neftali takes you through each step of the process from paper sketches to marketing all with fun visuals & clear instructions!
all right guys welcome back
you have made it to the final module
of this webflow master class the first
thing i want to talk about
is the seo if you're not aware of what
seo is it just stands for search engine
optimization
and you can think about it almost like a
soup like a bowl of soup
and it consists in three different parts
you have quality backlinks you have
great content
and then you have the bowl the bowl is
the technical stuff
that we need to take care of before we
go live
and after we go live so that the entire
thing
works a couple of factors that i like to
consider when we are thinking about the
technical part of it
is how crawlable is the site is there
anything preventing from
these spiders or these robots to find
our content
okay the site architecture how is this
structure how is the hierarchy are we
taking care of the headings and the
titles
but do we have quality outbound links
that takes
the user to similar and related content
how fast is the page loading is the
website
mobile friendly is it responsive does it
have
a an ssl certificate that just makes the
site a little bit more secure for the
users
do we have user-friendly urls when we
created those movies and actors
dynamic pages are those urls nice and
clean
using the dash structure how well is the
content structure is it well targeted
for our audience
do we have the right keyword
optimization
are the images all indexing correctly do
we have correct naming
conventions for each image that we have
uploaded is the content readable
for the user and finally the click
through rate so
just making sure that everything is easy
to access
right so the ones i want to focus on
this particular lesson is just
at our site architecture making sure
that all the headings are structured
correctly
and i also want to focus on the speed
all right i'm going to show you this
really cool tool
created by mangles if you go head over
to mangles.com
you want to click on seo tools and
download the seo browser extension
then i'm going to go over to our
our decoy domain which webflow has
provided for us
and i'm going to click on the mangles
extension link and right away i get to
i get to see some of the services that
mangles provides
some of which you'd have to register to
start using
which are actually pretty handy but the
one i want to focus on is the on-page
seo
right away it gives us a couple of
insights
as to how we can improve on-page seo so
in this case we're
going to take a look at two things
number one it tells us that the current
page that we have the homepage does not
have a meta description tag
so let's go ahead and fix that quickly
head over to webflow
and we could probably use some of the
text that we have already
on our site but ideally you would want
to work with a copywriter
to make sure that the description of
your site is going to make sense
on the search engine results page
all right so we go to the cogwheel and
then we toggle
open the seo settings we're going to see
right now that we don't have any title
tag
established for the home page
and we don't have any description which
is not good
it's going to put in here the name
stream vr
network
so let's click on save and make sure we
publish those updates
and let's go over to our stream vr page
again
there we go so we have the description
of the meta tag
and as we scroll down it's going to give
us some suggestions
it's saying the total number of words we
have on the site is only 280.
pages that have at least 2 000 words
tend to actually rank higher on the
search engine results page
you might want to consider when you're
creating your landing page or website
that you have lots of content with
enough good quality keywords and
outbound links
to improve that page then we have the
robots
which is a little script that is added
on the server
that tells the search engines if this
page is indexable or not
right now it is because we have the
little green label
the next thing i want you to check out
is the heading structure so this is the
hierarchy of how we're
laying out the different titles across
the page typically
on websites we only want to use one
single h1
on a single page so right now we have
the h1 which
is fine but we wanted to have is a
structure that follows
that goes like this so you have h1s then
h2s
then h3s then h4s all kind of in a
sequence
so for example you want to avoid using
h2s
followed by an h4
two issues here one is that we have
two h1s we can find gear
up right about here we've got to change
that to an h2
and then also right after that we have
an h3
shown in red because it's not following
the structure that we need which it
should be is h2
then it goes to h3 all right and
everything else looks pretty
good we want to make sure we get rid of
that h1 at the end
of the sign up and we should be good to
go so let's modify that
and just bring that back the sizing we
can bring it back with the title
of the hero title cool
all right once we've published that we
click on the mongols
extension tool again and you'll notice
that our titles are in
have a good structure now so that's good
and then finally there's
a preview of what this would look like
if we would share this page
on a facebook or another social media
platform
we want to make sure we have a nice
thumbnail we have a nice description
and so in order for this to work
for both social media for some of these
social media
uh snippets we need to go into our
web flow settings and
click on the page settings and once
you've done your seo titles you can just
open up the open graph settings
this will take care of all the content
in social media
you can toggle on the same as seo
and seo title text to bring that in
and for the open graph image you can
select one
image based on the standard size of 1200
by 630 pixels
the way i like to add that is you can
manually select one from your assets
library you click on the little cogwheel
for example over here and then you can
access
that image by simply clicking on the
link
of that asset so you can copy over
this url and just bring that
over into our page settings
so if we go back to the open graph
settings we
drop in the url and just like that we
can see the url
being applied so if we save this
and then publish again we should be able
to go back to the
to the extension and we'll see something
like this
which shows a preview of the image and
description that we have established so
these are like just basic technical
things that you should do
on every project that you have using
webflow
alright guys another good practice for
us
on seo is just to make sure that all the
images that you have
imported into your webflow have a
an alternative description and what i
mean by that is if you go over here
to where we have our landing page we
have a couple of images that we're
pulling in
and this is very helpful for both seo
and accessibility so users that are
actually
blind might use an external or
third-party tool
to browse the site
okay guys great so that's about it let's
jump over to the next lesson
to figure out how we can optimize the
page speed on
our site
Coming Soon
Access our premium community including bonus tutorials, project files & weekly resources.
LIFETIME 💎 ACCESS