Search Engingine Optimization (SEO) and Metadata

As a final step in optimizing your site, it’s important to consider Search Engine Optimization (SEO) and how to use metadata to improve your site’s visibility in search engine results. Many users will not be able to find your site if it doesn’t appear in search engine results or may find the site but not understand what it’s about if you don’t use metadata effectively.

Learning Objectives

Apply HTML, CSS, Markdown, and basic Javascript to develop well-structured, responsive World Wide Web Consortium (W3C) standards-compliant web sites.
Evaluate and implement web accessibility measures consistent with the Web Content Accessibility Guidelines (WCAG) version 2 specification.
Design front-end user experiences using accepted web design patterns, methods, and information structures.

Search Engingine Optimization (SEO) and Metadata

Basic SEO Principles

Our introduction to SEO will focus on two main aspects of site search optimization:

Metadata: Metadata is information about your site not necessarily visible to users but can be read by search engines and other sites.
Sitemaps: A sitemap is a file that provides information about the pages, videos, and other files on your site, and the relationships between them.

In Astro, implementing each revolves around components and plugins along with practices reinforced throughout the course.

Metadata (OpenGraph and Twitter Cards)

There exist various metadata protocols and standards that cater to different use cases and/or platforms that may crawl and index you site(s). Two of the most common and widely supported metadata standards are OpenGraph and Twitter Cards.

OpenGraph

OpenGraph was developed by Facebook in 2010 as a way to allow web pages to become rich objects in a social graph. It is widely supported by many platforms, including Facebook, LinkedIn, and Twitter. OpenGraph metadata appears enclosed in the <head> of your HTML document.

---
const title = "WebCo"
const description = "WebCo is a modern web development company specializing in creating stunning websites and applications that captivate audiences and drive business growth."
const image = "https://example.com/og-image.jpg"
const url = "https://webco.com"
const twitterSite = "@webco"
---

<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={image} />
<meta property="og:url" content={url} />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={image} />

The above example leverages both OpenGraph and Twitter card protocols to provide the same metadata in both accepted formats. Various platforms may adopt these. For example, see what happens when you share a site in Discord.

A [convenient guide] for these and other metadata standards is available on MetaTags.io.

Metadata also extends to branding on a micro-scale. For example, you can use the favicon to provide a small icon that represents your site in browser tabs and bookmarks.

<link rel="icon" href="/favicon.ico" />

By default, Astro ships an Astro-branded favicon as favicon.ico in the public directory. This filename is the de fact standard for the favicon, so you can simply replace this file with your own custom icon to update the favicon for your site.

For example, the course website icon is a custom icon that represents the course and is used as the favicon for the site.

Sitemaps

For search engines to effectively crawl and index your site, it’s important to provide a sitemap that outlines the structure of your site and the relationships between different pages and resources. A sitemap is an XML file that provides information about the pages, videos, and other files on your site, and the relationships between them. Often, this appears in more elaborate views of your site via search results. For example, see the following sitemap from our course site:

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
<url>
<loc>https://designingtheweb.dev/</loc>
</url>
<url>
<loc>https://designingtheweb.dev/content/a11y/</loc>
</url>
<url>
<loc>https://designingtheweb.dev/content/aria/</loc>
</url>
<url>
<loc>https://designingtheweb.dev/content/css/</loc>
</url>
<url>
<loc>https://designingtheweb.dev/content/html/</loc>
</url>
<url>
<loc>https://designingtheweb.dev/content/ia/</loc>
</url>
<url>
<loc>https://designingtheweb.dev/content/intro-astro/</loc>
</url>
<url>
<loc>https://designingtheweb.dev/content/intro-design/</loc>
</url>
<url>
<loc>https://designingtheweb.dev/content/intro-to-react/</loc>
</url>
<url>
<loc>https://designingtheweb.dev/content/javascript-and-events/</loc>
</url>
<url>
<loc>https://designingtheweb.dev/content/optimization/</loc>
</url>
<url>
<loc>https://designingtheweb.dev/content/responsive-design/</loc>
</url>
<url>
<loc>https://designingtheweb.dev/content/schedule/</loc>
</url>
<url>
<loc>https://designingtheweb.dev/content/seo/</loc>
</url>
<url>
<loc>https://designingtheweb.dev/content/wireframing/</loc>
</url>
<url>
<loc>https://designingtheweb.dev/course-materials/contract/</loc>
</url>
<url>
<loc>https://designingtheweb.dev/course-materials/syllabus/</loc>
</url>
</urlset>

Implementing in Astro

Implementing these features in Astro requires a couple of changes to site configuration:

npm install @astro-sitemap

Then, add the plugin to your astro.config.mjs file:

// https://astro.build/config
export default defineConfig({
    site: 'https://dluman.github.io', // Add for sitemap generation
    devToolbar: {
        enabled: false
    },
    integrations: [
        react(),
        mdx(),
        sitemap()                     // Add the sitemap plugin
    ]
});

Full Example

---
const title = "WebCo"
const description = "WebCo is a modern web development company specializing in creating stunning websites and applications that captivate audiences and drive business growth."
const image = "https://example.com/og-image.jpg"
const url = "https://webco.com"
const twitterSite = "@webco"
---
<link rel="icon" href="/favicon.svg" />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={image} />
<meta property="og:url" content={url} />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={image} />
{twitterSite && <meta name="twitter:site" content={twitterSite} />}
<link rel="sitemap" href="/sitemap-index.xml" />