You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository is currently being migrated. It's locked while the migration is in progress.
Copy file name to clipboardExpand all lines: src/_content-style-guide/page-titles-and-section-titles.md
+23-20Lines changed: 23 additions & 20 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,34 +1,31 @@
1
1
---
2
2
layout: content-style-guide
3
3
title: Page titles and section titles
4
-
intro-text: Page and section titles do a lot of heavy lifting. A good rule of thumb is to hide all the text on a page, except the page title, section titles, subsection titles, and the primary CTA.
5
-
---
6
-
7
-
If someone can still figure out what they need to do on that page or what that page is about, it's a good sign that the page and section titles are working well.
4
+
intro-text: Page and section titles do a lot of heavy lifting. A good way to test the effectiveness of your page and section titles is to hide all the text on a page, except the page title, section titles, subsection titles, and the primary call to action. If someone can still figure out what they need to do on that page or what that page is about, the page and section titles are likely working well.
5
+
---
8
6
9
7
## Page titles
10
8
11
9
Page titles have a few important functions:
12
10
13
-
- To clearly and quickly tell people the main purpose of the page—what they can do or what information they can get on that page.
14
-
- To [optimize the page for search]({{ site.baseurl }}/content-style-guide/seo), so the information is findable through Google and other search engines.
11
+
- To clearly and quickly tell people the main purpose of the page—what they can do or what information they can get on that page
12
+
- To optimize the page for search, so the information is findable through Google and other search engines
13
+
[Read more about writing for SEO]({{ site.baseurl }}/content-style-guide/seo)
15
14
16
-
Try to keep page titles to 52 characters maximum, with spaces. Use the primary SEO keyword in the page title. On VA.gov, page titles use the H1 tag.
15
+
Try to keep page titles to 52 characters (with spaces) maximum. Use the primary SEO keyword in the page title. On VA.gov, page titles use the H1 tag.
17
16
18
17
### Exceptions
19
18
20
-
- Articles in resources and support have a page title character limit of 70.
21
-
- News releases, blog titles, community stories, and local event titles don't have a page title character limit.
19
+
- Articles in resources and support have a page title character limit of 70
20
+
- News releases, blog titles, community stories, and local event titles don't have a page title character limit
22
21
23
22
## Section titles
24
23
25
-
Section and subsection titles (also sometimes called headers and subheads) help organize the page into scannable, user-friendly chunks. They should provide clear guideposts and bring people deeper into the content.
26
-
27
-
- Structure section titles with H2s and subsections with H3s, and so on. This provides a natural hierarchy for your content, and helps SEO.
28
-
- In sections that list several ways someone can contact VA or apply for a benefit, use "Option [X]:" in the header. For example, under an H2 that says "How to apply" we might have these H3s: "Option 1: Online" and "Option 2: By mail"
29
-
- Try to keep section and subsection titles to 70 characters maximum, with spaces.
24
+
Section and subsection titles (also sometimes called headers and subheads) help organize the page into scannable chunks of information. They should provide clear guideposts and bring people deeper into the content.
30
25
31
-
We allow a little more character count for sections and subsections than page titles. But in general, sections become hard to scan when they're too long. Eliminate unnecessary details or nuance in section and subsection titles, and address them with more depth in the paragraph copy.
26
+
- Structure section titles with H2s, subsections with H3s, and so on. This provides a natural hierarchy for your content and helps SEO.
27
+
- In sections that list several ways someone can contact us or apply for a benefit, use "Option [X]:" in the header. For example, under an H2 that says "How to apply" we might have these H3s: "Option 1: Online"and "Option 2: By mail."
28
+
- Try to keep section and subsection titles to 70 characters (with spaces) maximum. Include only details or nuances that are critical to differentiating between sections and subsections. Address other details with more depth in the paragraph copy.
32
29
33
30
[Read more about using header levels to structure sections on W3.org](https://www.w3.org/WAI/tutorials/page-structure/headings/)
34
31
@@ -42,25 +39,31 @@ We allow a little more character count for sections and subsections than page ti
42
39
- **H2** Documents you need before you start your college application
43
40
- **H2** Ways to apply to colleges
44
41
45
-
> -H3 Option 1: Online
42
+
> - **H3** Option 1: Online
46
43
47
-
> -H3 Option 2: By mail
44
+
> - **H3** Option 2: By mail
48
45
49
46
- **H2** What happens after you apply
50
47
51
-
> -H3 How long it takes to hear back from colleges
48
+
> - **H3** How long it takes to get a response from colleges
52
49
53
50
- **H2** More information about applying for college
54
51
55
52
</div>
56
53
</div>
57
54
</div>
58
55
56
+
## Title tags
57
+
58
+
Title tags use the H1 as part of the tag. The Title tag section has specific information on what to use for the title tag and how to format it, depending on the context.
59
+
60
+
[Learn more in the Title tag section](https://design.va.gov/content-style-guide/title-tags)
61
+
59
62
## Privacy guidance
60
63
61
-
**Page titles (H1s) can include Personally Identifiable Information (PII) or Protected Health Information (PHI), but this information can’t be populated or tracked anywhere else.**
64
+
**Page titles (H1s) can include personally identifiable information (PII) or protected health information (PHI), but we can't populate or track this information anywhere else.**
62
65
63
-
**If an H1 includes PII or PHI:**
66
+
**What to do if an H1 includes PII or PHI:**
64
67
65
68
- Ensure no part of the URL, including parameters and anchor tags, include information that can be used either by itself or in combination with other information to uncover that individual’s identity or health information.
66
69
- Genericize the corresponding breadcrumb segment. This ensures the information isn’t tracked back into analytics or other logs through the link text for that breadcrumb segment.
0 commit comments