Our webpage design and build is fully finished. 1
Now we have last bits to finish up and then publish. 2
First, we need to set the SEO settings. SEO stands for Search Engine Optimization. And it's set of practices 3
on how to make a page more appealing to search engines like Google, Bing and DuduckGo go especially 4
the DuduckGo. SEO is a whole separate field and we're not going to dive into the details in this 5
course. 6
However, there are some things that we absolutely have to take care of. 7
For starters, these are Title and Meta Description of the pages. These are what usually show up when your 8
page appears on Google. 9
This is title and this is Meta Description. 10
If you don't set this up, Google will fetch a random text from your page. 11
Well not entirely random. 12
It has its own rules. But we want to be in control of this and choose what exactly we would like to display. 13
This we can change under page settings, which we can find inside Pages panel. 14
Go to the page you want to edit. 15
In this case, the home page. All other pages we have for our site, will appear there. And each of these pages 16
have their own individual settings, which can be accessed from this Gear icon. 17
Let me collapse these settings, so we can go through them. 18
Under General or group, 19
we just have a page name. 20
This page name is what shows up in Webflow. 21
It's an internal name, so you can name anything you'd like here. 22
Under SEO settings we have 2 values, 23
Title Tag and Meta Description. 24
If we'll leave this title blank, then Webflow will use the page name by default. 25
As you type in these fields, you'll see a search result preview. Which is a good way to nail down the 26
awesome title and description. 27
There are many different ways to name your pages. On home pages, 28
it's common practice, to put the name of your company or a product first, then followed by some sort of 29
tag line. 30
For example, ChatApp - 31
Simple Team Chat Application. And inside the description field, we're going to describe the page. 32
So since this the home page, we will describe the product itself. 33
Google and other search engines will truncate description beyond certain character count. 34
Usually, after 155 characters. Open Graph settings are similar to SEO, but this is information 35
that shows up when sharing content on social networks like Facebook, Twitter, LinkedIn and Pinterest. 36
For example, when you share a link to a car you just bought, Facebook can pull Title, Description and even 37
a Photo from the Open Graph settings of that page. 38
If these settings are empty, then Facebook will pull random information, or sometimes no information at 39
all. 40
We can put custom title and description, but we can also check these options, to make them same as SEO. 41
As for the open graph image, for that, we need to insert a link to the image. Which means we have to upload 42
the image somewhere and then get the link. We can upload 43
image right on Webflow, in our assets. And then get the URL from there. 44
Or just use already uploaded image and get the link for it. 45
We can get the link under this gear icon. Then click this link icon, so the image opens in a new window. 46
This is a URL of this image, which is uploaded on Webflow servers. 47
Copy this your URL and paste it in the image field. 48
Now you can see a preview of how it might look like, when the link to this page is shared on social networks. 49
2 other settings are not related to SEO. 50
The Site's Search Settings, which might seem like they are SEO and Google search related, but they're 51
not. 52
It's actually about search functionality within our website. 53
You see, we're able to add search component on our website, where users can search the contents of our 54
website. 55
This is useful if we have a content-based website like blog, e-commerce something where search makes 56
sense. On small websites like a company website or a portfolio site, it's 57
not really needed. 58
The last option is custom code. It's not gonna show anything right now, because you'll need to add a hosting 59
plan to unlock this feature. 60
It looks something like this. Custom code gives us an ability to add our own external code to the page. 61
Usually, it's for like third party applications that we want to connect to our webpage or some sort 62
of JavaScript plugins, or anything that is usually external. Things like trackers, analytics and all those 63
kind of stuff. 64
So to recap. Each page on our site has SEO and other settings. We use Title and Meta Description to 65
control how our page shows up in search results on sites like Google. 66
In addition to this, we can set Open Graph settings which is sort of a SEO, but social media networks 67
like Facebook, Twitter and so on.