studio
4cfcf09a97
Sources: video-subtitle-pipeline artifacts/beginner-wordpress-user/ - subtitles/: en, zh, bilingual SRT/ASS (100 files) - platform/: youtube SRT + bilibili BCC per video (75 files) - manifests/: per-video manifest.json (25 files) - quality/: quality reports (50 files)
239 lines
6.5 KiB
Text
239 lines
6.5 KiB
Text
1
|
|
00:00:00,000 --> 00:00:06,000
|
|
In this lesson, we will explore how to use headings for accessibility and SEO.
|
|
|
|
2
|
|
00:00:06,000 --> 00:00:11,116
|
|
Did you know that using headings on your website's posts and pages can be the difference between connecting with your website's audience
|
|
|
|
3
|
|
00:00:11,116 --> 00:00:17,000
|
|
or resulting in bouncing away to find a different website?
|
|
|
|
4
|
|
00:00:17,000 --> 00:00:22,625
|
|
In this example, we have an article with no headings,
|
|
|
|
5
|
|
00:00:22,625 --> 00:00:26,000
|
|
which will make it quite difficult for a reader to navigate.
|
|
|
|
6
|
|
00:00:26,000 --> 00:00:33,583
|
|
In the next example, we have added the appropriate headings to help a reader make sense of the content
|
|
|
|
7
|
|
00:00:33,583 --> 00:00:39,000
|
|
and to find out what the article is about before actually having to read it.
|
|
|
|
8
|
|
00:00:39,000 --> 00:00:45,000
|
|
Headings organize content and make it easier for the reader to navigate and locate information.
|
|
|
|
9
|
|
00:00:45,000 --> 00:00:52,000
|
|
Most importantly, they are essential tools for accessibility and search engine optimization.
|
|
|
|
10
|
|
00:00:52,000 --> 00:00:56,571
|
|
By the end of this tutorial, we will be able to use headings correctly
|
|
|
|
11
|
|
00:00:56,571 --> 00:01:00,000
|
|
for readability, accessibility and SEO.
|
|
|
|
12
|
|
00:01:00,000 --> 00:01:05,000
|
|
Firstly, why is it important to structure content using headings?
|
|
|
|
13
|
|
00:01:05,000 --> 00:01:11,982
|
|
Well, it introduces new topics or sections, it guides a reader, it lets a reader skim content,
|
|
|
|
14
|
|
00:01:11,982 --> 00:01:21,000
|
|
it also gives the reader an idea of what to expect and then lastly it breaks topics into more digestible pieces of information.
|
|
|
|
15
|
|
00:01:21,000 --> 00:01:26,000
|
|
Headings are also used to indicate the hierarchy of information.
|
|
|
|
16
|
|
00:01:26,000 --> 00:01:36,000
|
|
Your pages and posts will be broken up into subheadings such as Heading 2 or H2, H3 and all the way to H6.
|
|
|
|
17
|
|
00:01:36,000 --> 00:01:42,000
|
|
You will notice when you add your first heading block, H2 is automatically selected.
|
|
|
|
18
|
|
00:01:42,000 --> 00:01:47,000
|
|
That's because your page or post title is your first primary heading.
|
|
|
|
19
|
|
00:01:47,000 --> 00:01:51,356
|
|
Once you have added a heading, you can change the type of heading you are using
|
|
|
|
20
|
|
00:01:51,356 --> 00:01:54,000
|
|
by selecting the relevant heading in the list view.
|
|
|
|
21
|
|
00:01:54,000 --> 00:01:58,200
|
|
Then selecting the option that says H2 in your block toolbar
|
|
|
|
22
|
|
00:01:58,200 --> 00:02:02,000
|
|
and from there you can select between H1 to H6.
|
|
|
|
23
|
|
00:02:02,000 --> 00:02:07,000
|
|
To ensure your headings are in the correct order and hierarchy.
|
|
|
|
24
|
|
00:02:07,000 --> 00:02:12,000
|
|
Did you know you can use the outline feature under your list view to quickly check your headings?
|
|
|
|
25
|
|
00:02:12,000 --> 00:02:18,882
|
|
Double check if your H2 heading relates to your H1 heading and your H3 to your H2 etc.
|
|
|
|
26
|
|
00:02:18,882 --> 00:02:22,766
|
|
WordPress will also alert you in this outline section
|
|
|
|
27
|
|
00:02:22,766 --> 00:02:28,000
|
|
if you accidentally skip a heading level, helping you to ensure that they are in chronological order.
|
|
|
|
28
|
|
00:02:28,000 --> 00:02:34,000
|
|
You can check your pages for any errors to correct them quickly rather than searching block by block.
|
|
|
|
29
|
|
00:02:34,000 --> 00:02:41,000
|
|
In this example, I want to ensure that all the types of sushi are listed as H4.
|
|
|
|
30
|
|
00:02:42,000 --> 00:02:45,000
|
|
Headings are also important for accessibility.
|
|
|
|
31
|
|
00:02:45,000 --> 00:02:50,000
|
|
Using them incorrectly means many people cannot access the information on your website.
|
|
|
|
32
|
|
00:02:50,000 --> 00:02:52,872
|
|
When you use headings for accessibility,
|
|
|
|
33
|
|
00:02:52,872 --> 00:02:58,000
|
|
this allows screen readers to better navigate the page and quickly find relevant information.
|
|
|
|
34
|
|
00:02:58,000 --> 00:03:04,000
|
|
Also, keyboard only users can quickly skip to the right section with a click of a button.
|
|
|
|
35
|
|
00:03:04,000 --> 00:03:10,000
|
|
Without headings, the screen reader in this example has to read this entire chunk of text out loud.
|
|
|
|
36
|
|
00:03:10,000 --> 00:03:13,000
|
|
There are no headings to allow users to jump ahead.
|
|
|
|
37
|
|
00:03:13,000 --> 00:03:18,684
|
|
If I add headings, the screen reader or keyboard can allow its users
|
|
|
|
38
|
|
00:03:18,684 --> 00:03:22,000
|
|
to navigate to the section that is relevant to them quickly.
|
|
|
|
39
|
|
00:03:22,000 --> 00:03:28,000
|
|
Headings also help users with low vision to maintain the structure of a page when zoomed in.
|
|
|
|
40
|
|
00:03:28,000 --> 00:03:31,771
|
|
As a user with low vision zooms into a page,
|
|
|
|
41
|
|
00:03:31,771 --> 00:03:39,000
|
|
the different text sizes allow them to keep track of where they are on a website.
|
|
|
|
42
|
|
00:03:40,000 --> 00:03:43,000
|
|
Remember to structure your headings into logical chunks.
|
|
|
|
43
|
|
00:03:43,000 --> 00:03:48,000
|
|
For example, this post is about parrots, which is the title, the H1.
|
|
|
|
44
|
|
00:03:48,000 --> 00:03:55,000
|
|
I decided to start my article by writing about parrot health and for that I used an H2.
|
|
|
|
45
|
|
00:03:55,000 --> 00:03:58,778
|
|
Another subtopic of parrot health is parrot nutrition
|
|
|
|
46
|
|
00:03:58,778 --> 00:04:03,000
|
|
and then we can keep drilling down to the next subheading.
|
|
|
|
47
|
|
00:04:03,000 --> 00:04:08,000
|
|
Each subtopic should relate to the topic above it, similar to a magazine article.
|
|
|
|
48
|
|
00:04:10,000 --> 00:04:16,000
|
|
Lastly, let's talk about headings and search engine optimization or SEO.
|
|
|
|
49
|
|
00:04:16,000 --> 00:04:22,000
|
|
You can thoughtfully embed keywords into headings to boost your website's rank in a search engine.
|
|
|
|
50
|
|
00:04:22,000 --> 00:04:27,000
|
|
Your headings should provide a clear and concise summary of the content that follows.
|
|
|
|
51
|
|
00:04:27,000 --> 00:04:31,000
|
|
They should accurately reflect the content of a section.
|
|
|
|
52
|
|
00:04:31,000 --> 00:04:37,000
|
|
When you are in the site editor, you can click on styles and then open up your style book.
|
|
|
|
53
|
|
00:04:37,000 --> 00:04:44,000
|
|
Here you are able to globally style your headings using your sidebar settings on the right.
|
|
|
|
54
|
|
00:04:44,000 --> 00:04:48,600
|
|
It is advised to use the same heading hierarchy and styling throughout your site
|
|
|
|
55
|
|
00:04:48,600 --> 00:04:51,000
|
|
to create a uniform look and feel.
|
|
|
|
56
|
|
00:04:51,000 --> 00:04:56,000
|
|
One last tip, never use the heading block to style text.
|
|
|
|
57
|
|
00:04:56,000 --> 00:05:01,905
|
|
If you are looking for a stylistic flare, use an additional block such as the quote block
|
|
|
|
58
|
|
00:05:01,905 --> 00:05:08,000
|
|
or transform the heading to a paragraph block and use the style setting on the right to modify your text accordingly.
|
|
|
|
59
|
|
00:05:12,000 --> 00:05:16,667
|
|
I trust that you will start using headings to improve the user experience on your site
|
|
|
|
60
|
|
00:05:16,667 --> 00:05:19,000
|
|
as well as search engine optimization.
|
