Webflow SEO Essentials

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