0
1
00:00:03,000 --> 00:00:06,080
First, we will publish the website on Webflow subdomain.
1

2
00:00:06,210 --> 00:00:09,970
But next, I'm going to show you how to publish the website on a real custom domain.
2

3
00:00:10,290 --> 00:00:13,650
Let's start by SEO and some other finishing touches.
3

4
00:00:13,650 --> 00:00:18,230
We need to fill out SEO details for all of our pages. Starting with home page.
4

5
00:00:18,300 --> 00:00:23,310
We've already done this before, so it should be pretty straightforward. Except for the dynamic blog post
5

6
00:00:23,310 --> 00:00:23,740
page.
6

7
00:00:23,760 --> 00:00:25,430
That's a little different.
7

8
00:00:49,770 --> 00:00:51,440
Don't forget the Open Graph settings.
8

9
00:00:51,450 --> 00:00:56,910
That's for all those social networks Facebook, Twitter and stuff. For the image, it needs an URL.
9

10
00:00:57,240 --> 00:01:01,170
We can choose an image from the assets panel and get a URL from it.
10

11
00:01:05,870 --> 00:01:09,410
I'm gonna go with this image. Open image in a new window.
11

12
00:01:12,800 --> 00:01:14,270
Then just grab the URL.
12

13
00:01:17,750 --> 00:01:24,240
And then paste it into the field.
13

14
00:01:24,260 --> 00:01:26,130
Same thing for the blog page.
14

15
00:01:26,240 --> 00:01:31,050
I don't have any specific rules on what you should put on SEO, as long as it's not empty.
15

16
00:01:31,070 --> 00:01:43,020
The rest depends on the business and what message the clients want to send.
16

17
00:02:04,070 --> 00:02:11,550
Now, a fun part. SEO for the dynamic page. You'll notice an extra link on a dynamic page.
17

18
00:02:11,550 --> 00:02:17,430
These purple links to add a field. So the name of the blog post can't be static, right? The name has to be
18

19
00:02:17,430 --> 00:02:20,070
same as the headline of the blog post page.
19

20
00:02:20,070 --> 00:02:21,860
We can add that headline like this.
20

21
00:02:22,660 --> 00:02:23,460
There you have it.
21

22
00:02:23,560 --> 00:02:29,580
The name of the blog page. And if you click these arrows, you can easily go through different posts. We
22

23
00:02:29,580 --> 00:02:32,550
can add anything else in front or after this dynamic field.
23

24
00:02:38,470 --> 00:02:42,520
And inside the Meta Description, we can add a post summary text.
24

25
00:02:42,520 --> 00:02:45,690
That's another reason why post summary is such a handy field to have
25

26
00:02:50,120 --> 00:02:54,330
And for the open graph image, we can directly select the image from the CMS.
26

27
00:02:54,350 --> 00:02:55,530
How great is that?
27

28
00:02:55,550 --> 00:02:57,980
So each post will feature their own main image
28

29
00:03:03,140 --> 00:03:04,430
That's all for the SEO.
29

30
00:03:04,430 --> 00:03:08,810
There are some links we need to connect in the navbar and footer. For example, the logo.
30

31
00:03:08,840 --> 00:03:11,240
It's a good practice to link it to the home page.
31

32
00:03:11,240 --> 00:03:16,340
It's what people expect.
32

33
00:03:16,380 --> 00:03:20,310
As for other links, we don't have pages for them, so we gotta leave them as is.
33

34
00:03:20,340 --> 00:03:22,740
Except for the blog, which we have already connected.
34

35
00:03:27,240 --> 00:03:28,490
Let's not forget the footer.
35

36
00:03:28,500 --> 00:03:30,660
We need to link that logo to the home page as well.
36

37
00:03:33,920 --> 00:03:38,840
If you don't see the link settings, maybe you just have a logo without the link block. Only link elements
37

38
00:03:38,840 --> 00:03:40,820
can be connected to other pages.
38

39
00:03:40,970 --> 00:03:45,110
So, if you are missing it, just add a new Link Block and just drop your image inside.
39

40
00:03:49,820 --> 00:03:53,020
Don't even have to add a class to the link, just edit the settings directly.
40

41
00:03:58,520 --> 00:03:58,940
Excellent.
41

42
00:03:58,940 --> 00:04:03,420
This is a good time, to check all the links in a preview mode and see how all that looks in different
42

43
00:04:03,530 --> 00:04:07,250
screens.
43

44
00:04:07,340 --> 00:04:08,110
I love the result.
44

45
00:04:08,120 --> 00:04:10,420
That's a handsome, fast and solid website.
45

46
00:04:14,080 --> 00:04:15,680
Alright. Before we hit publish,
46

47
00:04:15,710 --> 00:04:17,770
let's go to project settings.
47

48
00:04:17,780 --> 00:04:21,390
We need to upload a favicon. And just like the way we did last time.
48

49
00:04:21,560 --> 00:04:22,870
Remember how we did this?
49

50
00:04:22,910 --> 00:04:26,530
We had to create a Favicon and Webclip icons in Figma.
50

51
00:04:26,570 --> 00:04:29,000
Let's copy that from the previous project.
51

52
00:04:29,000 --> 00:04:32,400
Since we already have the correct sizes. And create icons from there.
52

53
00:05:27,740 --> 00:05:30,940
When you export this, make sure to remove the background from the frame.
53

54
00:05:31,010 --> 00:05:35,710
Otherwise, it's going to be exported with it and you won't get the rounded corners.
54

55
00:06:02,120 --> 00:06:03,130
And that's all done.
55

56
00:06:03,150 --> 00:06:05,520
Now we can hit publish on the Webflow domain.
56

57
00:06:05,520 --> 00:06:06,840
We'll do custom domain later.
57

58
00:06:12,150 --> 00:06:27,260
And that's our snazzy little website. Let's check everything out, make sure it's working properly.
58

59
00:06:27,340 --> 00:06:31,860
Up next, we're going to test forms and see how form submissions are managed on Webflow.
59

60
00:06:31,870 --> 00:06:32,320
Stick around.