SEO fundamentals

Start off the year with a 21-day portfolio challenge

Beginner

8min

Launching your site is one thing, but making sure people can find you on the web is a different ballgame. The world of search engine optimization (SEO) can be a tough and intimidating field to break into. This course offers an overview of SEO basics, like verifying your site with Google, managing your indexing status, and best practices to keep your "link juice" flowing as your site evolves.

An overview of search engine optimization (SEO) fundamentals and best practices — learn how to optimize your content from the start.

Enroll for free

Webflow is free for students and educators

Learn more & apply

Summary

Course progress

Nice job, we did some time travel into the future and it is looking amazing!

0

%

Completed

0

of

4

Lessons done

Launching your site is one thing, but making sure people can find you on the web is a different ballgame. The world of search engine optimization (SEO) can be a tough and intimidating field to break into. This course offers an overview of SEO basics, like verifying your site with Google, managing your indexing status, and best practices to keep your "link juice" flowing as your site evolves.

The challenge

Challenge

Day

Enroll for free

Clone completed project

Clone blank pages project

Get the course assets

Ready to get certified?

Test your web design and development knowledge learned in the Webflow 101 course. Challenge yourself with questions about the principles of the web, like the box model, HTML and CSS.

Go to Webflow 101 exam

How do I compete?

Complete the Webflow 101 course and follow Grímur’s prompts at the end of the lessons. Build hero sections, navbars, cards, forms, footers, and fully responsive sites.

Tweet a picture or video of your site build with the tag #webflow101 and tell us what you're building and learning.

Learn more about the challenge

The challenge

Challenge

#

Check out the new Figma to Webflow plugin

Ready to get certified?

Once you’ve completed the Webflow Expert Certification Course, you’re all set to take the next step in becoming a Webflow Expert. Please note: passing the Expert exam does not guarantee entry into the Webflow Expert program.

Go to Webflow Experts exams

Course outline

Getting started

Coming soon

Paid vs. organic search

Paid vs. organic search

1:34

Coming soon

Google site verification

Google site verification

2:59

Coming soon

Google Analytics

Google Analytics

5:33

Coming soon

301 redirects

2:39

Coming soon

Written articles

Webflow site plans

Manage site plans

Account billing

Project billing

Webflow branding

Editor branding

Webflow integrations

Related courses

Freelance web design boot camp

The Freelancer’s Journey is a free, comprehensive course to help you build a successful, fulfilling freelance career in web design.

Beginner - Advanced

21-day design portfolio course

Build and visually design a full portfolio website within the span of 21 days.

Beginner – Advanced

Figma to Webflow

Learn the entire design process from idea to final output as we take you through Figma, Cinema 4D and Octane, and Webflow.

Intermediate - Advanced

Landing page generator for Ryan Reynolds

Learn how to build a dynamic landing page generator in under 30 minutes.

SEO fundamentals

4

Lessons

Getting started

Getting started

Coming soon

Paid vs. organic search

Paid vs. organic search

1:34

Coming soon

Google site verification

Google site verification

2:59

Coming soon

Google Analytics

Google Analytics

5:33

Coming soon

301 redirects

2:39

Coming soon

No items found.

Read the full article

Download assets

Clone this project

Read the full article

Paid vs. organic search

For the vast majority of search engines, search engine results pages feature two different forms of results:

Paid search results, or ads
Organic search results, which are ranked by relevance and, to an extent, reputability

In this video, we'll go into more detail on the difference, and how the two types can impact your marketing efforts.

‍

Read the full article

Download assets

Clone this project

Read the full article

Google site verification

Verify ownership of your website and gain access to Google Search Console tools, like indexing.

Read the full article

Download assets

Clone this project

Read the full article

Google Analytics

Add Google Analytics to your Webflow site.

In this video, we're going to walk you through how to integrate Google Analytics into your Webflow site. This is super helpful if you want to better understand your audience, their behavior, and improve your website based on the insights that Google Analytics provides.

So we'll break this down into five steps: first, we'll create a Google Analytics account, then we'll create a property for our site, we'll copy the measurement ID, we'll configure everything in Webflow, and finally, for our fifth step, we'll test. We'll make sure everything's connected properly.

So, let's start with part 1: Creating a Google Analytics account. Now, if you already have a Google Analytics account, if you see an Analytics dashboard, you can skip ahead to the next step.

But if you don't? Let's head over to "analytics.google.com" and if you aren't already, we'll sign into the Google account we want to use. And once we do? Let's click "Start measuring."

Now we're prompted to create a Google Analytics account and we can call this anything we want.

Let's scroll down and press "Next". Done.

Our Google Analytics account is created, so we can move on to step 2: Create the property.

Quick side note: if you already have a Google Analytics account, and you don't see this interface? You'll want go to "Admin", and "Create a new property". But for everyone else, you should see an interface that looks like this.

And the main thing we want to do here is give our property a name, something we can associate with our site. These options look good for us, so let's press "Next".

Now, at this point, all we want to do is fill out our business details and objectives and you'll want to make sure you're choosing the options that make sense for YOUR business or your client's business. So, after checking all these boxes, we'll click on "Create". And that's it, we've created the property for our site.

Part 3 is copying the Measurement ID. This ID is unique to our website and allows Google Analytics to track our visitor data. To get this, we want to choose the Web platform, because this is for our website. We'll type in the URL of our main dot com, the site we want to track visitor data on. Give our stream a name and press "Create stream".

Now. Data streams? Property? What does all this mean? Well, let's recap what we've done and how it all connects:

In our Google Account, we created a Google Analytics account. Inside our Google Analytics account, we created a property, which houses the data and insights of the things we want to track. In our case, we want to track data from our Webflow site. And in order to do that, we defined a data stream inside that property. And that data stream brings data from our site into our Google Analytics property using the Measurement ID.

Now, you could have multiple data streams in one property, like if you want to connect to an iOS app or an Android app or another website. But in our case, we're only connecting our Webflow site, so we only need one data stream.

But now that we've created our data stream, we'll see our stream details. Google might give you installation instructions, but we don't need this. Let's close out, because what we're looking for is our Measurement ID. Let's click to copy it.

That's part 3, let's move on to part 4: configuring our Webflow site.

So in Webflow, from our site, we'll want to go to our Site settings. And once we're there? We'll head over to the Integrations tab, where we can see Google Analytics. Now, we'll take that Measurement ID we just copied and paste it in, where it says "Measurement ID". Then, we'll save the changes. Are we done? No, because our live site, the site that's currently live on the web, still doesn't have the Measurement ID we just pasted.

So to do that, let's publish our site. And now, our live site has Google Analytics integrated.

To prove this, let's move on to our final step: let's test. Back in Google Analytics, let's close out of our stream details, and click "Next" because we want to go over to our "Home", the dashboard of this property, and let's take a look at our Realtime data for this property.

And, an important note to keep in mind when looking at your Realtime data: with any third party tracking, it's not always going to be 100% accurate. Sometimes there are tracking blockers, customer end user permissions, and so on. But we can always test if our Google Analytics is working on any device or you can ask a friend or a colleague to access our site and as long as this tracking isn't blocked on their device? They should show up pretty quickly in the Realtime data. For other data and insights? Those should take up to 48 hours to show up on your dashboard.

If this isn't happening and you don't see any data? It's good to check if the Measurement ID from Google Analytics was pasted over correctly in your Webflow site and your site has been published with it. If you still don't see any data, Google has an entire support channel called "Analytics Help" that has help topics and even a community where others can talk through more specific problems and get the help they need.

But that's it! We created a Google Analytics account, we created a property for our site, we copied the Measurement ID, we configured everything in Webflow, and finally, we tested to make sure everything connected properly.

But that's integrating Google Analytics into your Webflow site.

Read the full article

Download assets

Clone this project

Read the full article

301 redirects

Use 301 redirects to route traffic from an old URL to a new URL.

301s can change your life forever — if you’re setting up a new webpage or even a full website — especially if you have a different structure.

Maybe you’ve reorganized, or maybe you’re replacing the full site and it’s not practical to use the same URLs, or maybe you’ve moved domains completely — or locked up “typo” domains to make sure accidental misspellings and keystrokes still end up taking users to the right place.

301s are meant to more permanently route traffic to a new location. Not to be confused with 302s which can indicate a temporary relocation of a resource, or 511s™, which are a more modern, slim fit. Again, 301s are best used when you’re permanently routing incoming traffic to a newURL.

And there are three main considerations to make — three different areas to look at when we’re considering whether to use one or more 301 redirects for a website.

The first is Google, and really all modern search engines.

Let’s say we’re searching for your webpage, but you’ve recently replaced your old URL with a new one.

If you’ve changed this URL and you don’t have a redirect — a 301 set up — people who click that link are going to see a 404. Not a great user experience.

Instead, if we’ve set up a 301 redirect, when someone clicks that old link to the old URL, your server will automatically detect that attempt and route people to the new URL you specified. This is great because it gets everyone to the right spot. And it can indicate to Google that the page’s URL has changed.

Even without redirects, Google will eventually index your new site structure and these URLs will get updated. But 301 redirects are absolutely the best practice, especially if you’re looking to maintain a lot of the ranking power that the older URL had.

The second consideration to make is referral sources all over the internet. Maybe someone included the old path in a blog post or a forum. 301s — when we create them for these older links — will ensure that visitors clicking that link can get to the right path — the new URL — without any trouble.

And the third consideration is usage of that older path in URLs that people might have bookmarked—or URLs that they might type directly into their browser. Maybe business cards or other materials were printed or published using your old URL. A 301 is a really great way to go if you want to make sure that anyone who types in the older URL gets to the right place.

So. The concepts associated with these three considerations all involve the same thing: old URLs getting routed to new ones. 301 redirects are a great move whenever you’re making changes to an existing site’s paths or URL structure—or in any circumstances where you want to more permanently route traffic from one location to another.

Read the full article

Download assets

Clone this project

Read the full article

Requirements

A new site to launch
Google Search Console account
Google Analytics account

Download course assets

Clone this project

Use this version to clone the completed project

Clone this project

Blank pages without hitting page limits

Go to Webflow 101 exam

Related courses

Moving your business online

A free course on how to take your business online. Serve more clients and generate more revenue in this new environment.

Beginner - Intermediate

Ultimate web design course

From the fundamentals to advanced topics — learn how to build sites in Webflow and become the designer you always wanted to be.

Web animations with After Effects & Lottie

Create animations in Adobe After Effects — the industry standard for motion graphics. Embed and animate them in your Webflow site.

Intermediate - Advanced

Landing page generator for Ryan Reynolds

Learn how to build a dynamic landing page generator in under 30 minutes.

Didn’t find what you’re looking for?

Discuss your build

Connect on the Forum, share and get help from the community.

Visit Webflow Forum

Give us feedback!

Share or upvote product ideas from the community.

Visit Webflow Wishlist

Contact support

We're available Monday–Friday, 6 a.m.–6 p.m. PT.

Visit Webflow Support

There's more coming

We're rolling out more lessons very shortly. Sign up to get early access to additional Webflow lessons and courses.

Shoot, something didn't work. Try again later, bud.

home

© 2023 Webflow, Inc.
All rights reserved.

Product

Designer Enterprise CMS Ecommerce Interactions Editor Hosting SEO Accessibility Pricing Templates Feature Index

Company

Press Accessibility Statement Merch Store Terms of Service Privacy Policy Cookie Policy Sitemap Become an Affiliate

Learn & Get help

Courses Lessons

Webflow 101

Blog Resources Forum Community Hire an Expert Customers Webflow vs. WordPress No-Code Movement Status Support Wishlist Inspiration Glossary

Social

YouTube Twitter Facebook Instagram TikTok