Content for a webpage is its normal use. Obviously. Though content isn’t necessarily text, but text is needed for SEO. Write quality content for humans (don’t write it for search engines), and for even better SEO consider the following:
- Target the content for a specific audience and naturally include text that relates to how they might search for it.
- Write relevant keywords or phrases naturally into the text – the target keywords for the content in question, for that target group.
- Write the most relevant keyword(s) into the page title.
- Aim for 300-500 words for landing pages and category descriptions. For articles and blog posts, the more the merrier (2000 words and keep going if able). This helps the code versus content ratio per page.
Share the content page. Acquire high quality inbound links if possible.
Implementation
-
The website must be crawlable for search engines (SE). At the time of writing this, even though some SE crawlers to some extent can index client-only-loaded content – this is less optimal.
- The page content that you want to base the site’s searchability on should be server rendered.
- Use a non-JS based navigation and/or a sitemap.xml file at the domain root. Learn about sitemaps at Google Search Central.
- For larger sites, be aware of crawl budget.
- Use links with
rel="nofollow"to avoid certain internal URLs to be crawled, like a login page. Be generally aware ofrel’s values and their use cases, specifically for<a>. - A robots.txt at the domain root tells SE crawlers what to crawl. Add it even if it’s to crawl every page on the site (see example below).
- robots.txt can help crawl budget by telling SEs not to crawl certain paths in bulk.
- Note. Make changes to robots.txt strategically as it otherwise – ironically – can hurt SEO.
- When you need to redirect you normally want to use a
301redirect.308is also relevant, but be aware of SE support. Despite the technical description, for SEO, temporary302/307redirects are for very temporary redirects.
-
Use valid, semantic and accessible HTML.
- Use only one
<h1>for each page. - Use accessible link labels that from itself tells what it links to and avoid repeating labels.
- Validate HTML online with W3C’s HTML validator.
- Use only one
-
Fill the
<head>with correct and all relevant meta data for the site and each page to be indexed by SEs.- Use all meta tags relevant for SEO (see HTML skeleton below).
- Titles and descriptions should be unique for every page to be indexed.
- Titles should include the most relevant keywords.
- Keep title and
<h1>text as close to similar as reasonable to avoid confusing users going from a result or shared link to the page. - Avoid repeating phrases in titles and descriptions.
- Many SEs have a preferred minimum and maxmimum length for titles and descriptions.
- Add a favicon. Learn How to Favicon in 2023: Six files that fit most needs.
-
Use readable URL paths and slugs.
- Slugs should include the most relevant keywords in a readable way, but be kept short.
- Words are separated with hyphens.
- Use only lowercase letters and no special characters.
- Create a consistent structure for URL paths that keeps content organized and makes sharing easy.
-
Optimize weight, performance and security.
- Be aware of code versus content ratio per page.
- Be aware of both the size and performance of the client side code.
- Bundle, minify and compress code for production.
- Test online with Pagespeed insights or use Lighthouse integrated in a Chromium based browser.
- Test Security Headers.
- Permissionpolicy.com can be used to generate Permission Policy header.
- Content-security-policy.com details CSP header.
-
Add structured data.
- Learn Structured data at Google Search Central.
- Test online with Rich Results Test.
Examples
robots.txt
User-agent: *
Allow: /
HTML skeleton
Note that og and twitter meta tags are only included to support the basic link preview that other social apps also uses. Link previews, and other og and twitter properties, can be customized according to their specifications, but this setup requires only one image of dimension width 1200px and height 630px.
<!doctype html>
<html>
<head>
<!-- META TAGS -->
<meta charset="utf-8" />
<!-- for device responsive styling -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- title -->
<title>Page title</title>
<meta property="og:title" content="Page title" />
<meta name="twitter:title" content="Page title" />
<!-- description -->
<meta name="description" content="Page description." />
<meta property="og:description" content="Page description." />
<meta name="twitter:description" content="Page description." />
<!-- canonical -->
<link rel="canonical" href="https://website.dev/page/canonical-url" />
<meta name="url" content="https://website.dev/page/canonical-url" />
<!-- image -->
<link rel="image_src" href="https://image-href.jpg" />
<meta property="og:image" content="https://image-href.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<!-- twitter card large image has same dimensions as facebook's recommended: 1200x630 -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://image-href.jpg" />
<!-- image alt -->
<meta property="og:image:alt" content="Social image alternate text" />
<meta name="twitter:image:alt" content="Social image alternate text" />
<!-- keywords -->
<meta name="keywords" content="page, content, keywords" />
<!-- author -->
<meta name="author" content="Name Of Author, Or Authors" />
<!-- [favicon](//evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/favicon-180.png">
<link rel="manifest" href="/manifest.webmanifest">
</head>
<body>…</body>
</html>
manifest.webmanifest
{
"icons": [
{
"src": "/favicon-192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/favicon-512.png",
"type": "image/png",
"sizes": "512x512"
}
]
}