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