Skip to content
This repository has been archived by the owner on Mar 14, 2024. It is now read-only.

Fix tables and links #396

Merged
merged 7 commits into from
Nov 9, 2018
Merged

Fix tables and links #396

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
ca382d0
Fix tables and links
lizzisassman Nov 9, 2018
47d2ade
Fixup formatting.
robdodson Nov 9, 2018
b1f7804
Try comparisons.
robdodson Nov 9, 2018
815f471
Better comparisons.
robdodson Nov 9, 2018
33732ab
More spacing.
robdodson Nov 9, 2018
1869094
lowercase.
robdodson Nov 9, 2018
3051339
indenting.
robdodson Nov 9, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
165 changes: 72 additions & 93 deletions content/discoverable/write-descriptive-text/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,40 +24,47 @@ Lighthouse displays failed audits, like the ones below, if your content is diffi
search engines to understand:

<table>
<thead>
<tr>
<th><strong>Failed audit</strong></th>
<th><strong>How to fix it</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>Document does not have a meta description</td>
<td><a href="#heading=h.bibhbabq2c0g">Add tags to the head of the
page</a></td>
</tr>
<tr>
<td>Document does not have a title element</td>
<td></td>
</tr>
<tr>
<td>Links don't have descriptive text</td>
<td><a href="#heading=h.ttumb1mttv00">Add descriptive link text</a></td>
</tr>
</tbody>
<thead>
<tr>
<th><strong>Failed audit</strong></th>
<th><strong>How to fix it</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>Document does not have a meta description</td>
<td>
<a href="#add-tags-to-the-head-of-the-page">Add tags to the head of the page</a>
</td>
</tr>
<tr>
<td>Document does not have a title element</td>
<td>
<a href="#add-tags-to-the-head-of-the-page">Add tags to the head of the page</a>
</td>
</tr>
<tr>
<td>Links don't have descriptive text</td>
<td>
<a href="#add-descriptive-link-text">Add descriptive link text</a>
</td>
</tr>
</tbody>
</table>

## Add tags to the head of the page

Add a meta description and title for every page on your site. Here's a full
example of what the < head > of each page should include:
example of what the ```<head>``` of each page should include:

```
<!doctype html>
<html lang="en">
<head>
<title>Mary's Maple Bar Fast-Baking Recipe</title>
<meta name="Description" content="Mary's maple bar recipe is simple and sweet, with just a touch of serendipity. Topped with bacon, this sticky donut is to die for.">
<meta name="Description" content="Mary's maple bar recipe is simple
and sweet, with just a touch of serendipity. Topped with bacon,
this sticky donut is to die for.">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
Expand All @@ -67,65 +74,39 @@ example of what the < head > of each page should include:
<script src="/script.js" defer></script>
</head>
<body>
<h1>Hi there!</h1>
<p>
I'm your cool new webpage. Made with <a href="https://glitch.com">Glitch</a>!
</p>
<!-- include the Glitch button to show what the webpage is about and
to make it easier for folks to view source and remix -->
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
<script src="https://button.glitch.me/button.js"></script>
...
</body>
</html>
```

Here are some examples of good vs bad titles and descriptions:

<table>
<thead>
<tr>
<th><strong>Good</strong></th>
<th><strong>Bad</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td><p><pre>
<title>Mary's Maple Bar Fast-Baking Recipe</title>
</pre></p>

</td>
<td><p><pre>
<title>Donut recipe</title>
</pre></p>

</td>
</tr>
<tr>
<td><p><pre>
<meta name="Description" content="Mary's maple bar recipe is simple and sweet, with just a touch of serendipity. Topped with bacon, this sticky donut is to die for.">
</pre></p>

</td>
<td><p><pre>
<meta name="Description" content="Maple bar recipe.">
</pre></p>

</td>
</tr>
</tbody>
</table>
<p><span class="compare-worse">Not recommended</span> — too vague</p>
<pre class="prettyprint devsite-disable-click-to-copy">
&lt;title&gt;Donut recipe&lt;/title&gt;
&lt;meta name="description" content="A donut recipe."&gt;
</pre>

<p><span class="compare-better">Recommended</span> — precise!</p>
<pre class="prettyprint devsite-disable-click-to-copy">
&lt;title&gt;Mary's Maple Bar Fast-Baking Recipe&lt;/title&gt;
&lt;meta
name="description"
content="Mary's maple bar recipe is simple and sweet,
with just a touch of serendipity. Topped with
bacon, this sticky donut is to die for."&gt;
</pre>

Here are some best practices to keep in mind when you're writing descriptions
and titles:

+ Make them **descriptive and concise.** Avoid vague titles like "Home" and
+ Make them descriptive and concise. Avoid vague titles like "Home" and
link text like "click here".
+ Avoid [**keyword
stuffing**](https://support.google.com/webmasters/answer/66358). Cramming
+ Avoid [keyword
stuffing](https://support.google.com/webmasters/answer/66358). Cramming
your content with keywords isn't helpful to users, and search engines may
mark the page as spam.
+ **Avoid repeated or boilerplate titles and descriptions** for each page. If you
+ Avoid repeated or boilerplate titles and descriptions for each page. If you
have a big site, use the
[HTML Improvements Report](https://support.google.com/webmasters/answer/80407)
to crawl the site and discover any page that's missing a title.
Expand All @@ -143,28 +124,25 @@ specific descriptions. You'll need to read the context of the page and write
relevant text that makes sense with the rest of the content. Here's an example
of good vs bad link descriptions:

<table>
<thead>
<tr>
<th><strong>Good</strong></th>
<th><strong>Bad</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td><p><pre>
<p>Get cooking and learn how to <a href="https://donut-be-crazy.com/recipes/maple-bar-recipe">make a delicious maple bar with Mary</a>!</p>
</pre></p>

</td>
<td><p><pre>
<p>Get cooking and learn how to make a maple bar <a href="https://donut-be-crazy.com/recipes/maple-bar-recipe">here</a></p>.
</pre></p>

</td>
</tr>
</tbody>
</table>
<p><span class="compare-worse">Not recommended</span> — too vague</p>
<pre class="prettyprint devsite-disable-click-to-copy">
&lt;p&gt;
Get cooking and learn how to make a maple bar
&lt;a href=&quot;https://donut-be-crazy.com/recipes/maple-bar-recipe&quot;&gt;
here
&lt;/a&gt;.
&lt;/p&gt;
</pre>

<p><span class="compare-better">Recommended</span> — precise!</p>
<pre class="prettyprint devsite-disable-click-to-copy">
&lt;p&gt;
Get cooking and learn how to
&lt;a href=&quot;https://donut-be-crazy.com/recipes/maple-bar-recipe&quot;&gt;
make a delicious maple bar with Mary
&lt;/a&gt;!
&lt;/p&gt;
</pre>

Here are some best practices to keep in mind when you're writing descriptive
link text:
Expand All @@ -173,12 +151,12 @@ link text:
+ Don't use the page's URL as the link description, unless you have a good
reason to do so, such as referencing a site's new address.
+ Keep descriptions concise. Aim for a few words or a short phrase.
+ Format links so that they're easy to spot.
+ Format links so that users can easily spot them.
+ Pay attention to your internal links, too. Improving the quality of
internal links can help users and search engines navigate your site.

See
[Use links wisely](https://support.google.com/webmasters/answer/7451184#optimize)
[Use links wisely](https://support.google.com/webmasters/answer/7451184#uselinkswisely)
for more tips.

## Verify
Expand All @@ -189,3 +167,4 @@ results of the following audits:
+ Document does not have a meta description
+ Document does not have a title element
+ Links don't have descriptive text
If you fixed the issue(s), the audits display in the "passed audits" section of the report.