
Perspective is an interesting thing. Starting on a fresh project will have you standing at the bottom of a mountain of competition. It's easy to feel overwhelmed by the magnitude of the work ahead.

Having a mountain to climb can be inspiring at first - many people hit the ground running with a new project, full of energy and enthusiasm. But as time goes on, the reality of the climb sets in. Instant success is rare, and the reality of the long, slow grind can be disheartening.

I (sadly) do not have a silver bullet for this problem. **But** I can tell you what works for me - a shift in perspective. Instead of looking at the mountain, I find it helpful to look at the path ahead, and milestones along the way that I can work toward.

## Find your way to the top 20%

Did you know that **most podcasts don't make it past 7 episodes**?
(source: [Tom Brook on YouTube](https://www.youtube.com/watch?v=JrAyZYIneUg))

Or that to get into the top 20% of all podcasts, you only need to average 1000 downloads per episode?
(source: [Podcast.co](https://blog.podcast.co/reach/podcast-download-numbers))

Maybe you're building a YouTube channel - there's loads of great milestones to look forward to: your first video with 50 views, your first 100 subscribers, and so on. You can use tools like [Social Blade](https://socialblade.com/) to see how you stack up against other creators in your niche.

For my pals building SEO driven sites, you can use tools like [Ahrefs](https://ahrefs.com/) to see how your site stacks up against the competition. You might be surprised to find that you're only a few backlinks away from the top 20% of sites in your niche.

## 10% of the top MILLION sites are dead

I was inspired this week Craig Campbell's _incredible_ article from 2020, [10% of the Top Million Sites are Dead](https://ccampbell.io/posts/10-percent-of-top-million-sites-are-dead/). How crazy is that? 10% of the top million sites are dead. How crazy is that? 100,000 websites are top ranked and also abandoned. That speaks to the scale of the opportunity you have to grow.

This is the power of consistency. By setting small, achievable goals, you can build momentum and keep yourself motivated. It's a lot easier to keep going when you can see the progress you're making.

## Milestones I'm working toward

- At [Craftwork](https://craftwork.com), we're working on empowering our teammates with automations and tools that make it easier for our painters to deliver a great product. Success here is measured in time saved for our team, and the quality of the work we deliver.

- For [APIs You Won't Hate](https://apisyouwonthate.com), I'm working on growing our audience and building a community of developers who care about building great APIs. Our next goal is to hit 3000 newsletter subscribers, which should happen in the next couple months.

- For my YouTube channel [@mikebifulco](https://www.youtube.com/@mikebifulco), I'm definitely time-challenged. The truth is that I rarely have time to make videos - so my goal here is to _just keep enjoying it_ when I get the chance. Maybe that's not measurable, but it's a helpful litmus.

## What's your next milestone?

So, what's your next milestone? What's the next goal you can set for yourself that will keep you moving forward?

For this little newsletter, my goal is to connect with more people. Do me a favor and hit reply - I'd love to hear what you're working on, and what challenges you're facing. I'm here to help if I can.

---

## Recent work

Here's some of my work that's gone live the past couple weeks which I hope you find interesting:

### 🎥 Your skills will NEVER catch up with your tastes

I recently published a [video based on Powerful advice gleaned from a quote by Ira Glass](https://www.youtube.com/watch?v=Ym6HQopqe-4) - no matter what you do, your taste will always outpace your skills. I explain my strategy for using that as a benefit.

### 🌱 Seed Your Supabase Database with this simple pattern

This one's for my developer friends. I wrote up a post explaining [my strategy for seeding a Supabase database](https://mikebifulco.com/posts/seed-your-supabase-database) - it comes in handy for spinning up new developers on your projects, setting up test environments for CI, and giving yourself a repeatable starting point for building new features.

### 🎙️ Building an API for Global News

In [this episode of APIs You Won't Hate (the podcast)](https://apisyouwonthate.com/podcast/building-an-api-for-global-news/), I talk to Artem Bugara, CEO and cofounder of Newscatcher API. Artem shares his experience building a api-first product that provides global-scale insights from news sources around the world.

---

## Some links you might like

- As mentioned above, this post was largely inspired by Craig Campbell's article [10% of the Top Million Sites are Dead](https://ccampbell.io/posts/10-percent-of-top-million-sites-are-dead/). I recreated his experiment a few days ago, and found that the number is now closer to 20% now! Wild.

- I recently came across this cheeky and informative post from David Gerells on [how to save $13.27 on your vercel bill](https://dgerrells.com/blog/how-to-save-13-27-on-your-saas-bill). If you're fearful of hosting fees, this one's for you.

---


You're 8 episodes away from being in the top 20%

🎥 Your skills will NEVER catch up with your tastes

🌱 Seed Your Supabase Database with this simple pattern


## SEO is the growth engine for your work

If you're building a brand, a business, or a personal website, taking the time to invest in SEO (Search Engine Optimization) will help your work get discovered when people search for related topics on DuckDuckGo, Bing, and Google. In my experience, developers often overlook SEO for one reason or another. But it's a critical part of building a successful website.

<Aside type="note">

Side note: SEO is a _massive_ topic - I'm far from an expert, but I've found it invaluable to learn a few basics. If I've got anything wrong here, or you know more than me, [I'd love to hear from you](https://threads.net/@irreverentmike)!

</Aside>

My position on SEO is this: it's a growth engine for your work, and when donse right, it can have a flywheel effect that will put your work in front of more people over time. It's not as immediately satisfying as racking up likes on a social media post, but it persists long-term, and can help you build a sustainable audience for your work.

It's slow-release dopamine, if you will.

I've been publishing articles under my own name for a few years now, and a steady investment in search now sends thousands of readers a month to my work. We've also been investing in SEO at [Craftwork](https://craftwork.com), and it's been fun to learn about how focusing on search for a local business differs from a personal website - but the principles are the same.

### Think about what your work will look like when it's shared

When someone comes across your work and they share it on their social media feed, you want it to look good, right? It should have a catchy, meaningful title, a useful description, and an image that draws people in. This is also what will show up when your work is shared on social media, or when it shows up in search results.

Functionally, this means you need to make sure your site has good metadata. Metadata is the information about your site that search engines use to understand what your site is about. It's also what social media platforms use to display your content when it's shared.

Here are a few tips to get you started:

- The `<title>` and `<h1>` tags on the page are most likely to be used as the title of the page in search results. Make sure they're descriptive and accurate.
- The `<meta name="description" />` tag is used as the description of the page in search results. Try to keep it less than 150 characters, and make it a meaningful summary of the page's content.
- The `<meta property="og:image" />` tag is used as the image that shows up when your page is shared on social media. Make sure it's a high-quality image that represents the content of the page, and that it's at least 1200x630 pixels in size with an aspect ratio of 1.91:1 so it looks good on <s>all</s> most platforms.

### Use Structured Data with JSON-LD for enhanced search results

Picture a list of Google search results in your head. You're probably seeing a list of blue links with a short description below them. But have you ever seen a search result with a video thumbnail, or a recipe with a picture and a list of ingredients? That's no accident - it's the result of Google's crawlers finding something called _structured data_ on the result's page.

<Image
  publicId="newsletters/tiny-tips-for-better-seo/enhanced-search-results"
  alt="Enhanced search results"
/>

When your site shows up like this, it's called a _rich result_. It can help your site stand out in search results, and give your work a better chance of being seen.

There are many types of Structured Data which are supported by Google, including:

- Articles
- Videos
- Events
- Product
- Software App

...and more. Check out Google's list of [Structured data markup that Google Search supports](https://developers.google.com/search/docs/guides/search-gallery) to see if there's a type that fits your content. If there is, you can use something called JSON-LD to pages on your site to help Google understand what your content is about.

I recently did this for my website - pages that feature video now include `VideoObject` structured data. It's as simple as including a bit of JSON on the page in a `<script />` tag. Check out my recent Pull Request to see how I made it happen: [mbifulco/blog#775: Add Structured Data for Video](https://github.com/mbifulco/blog/pull/775).

<Image
  publicId="newsletters/tiny-tips-for-better-seo/video-results"
  alt="Structured Data"
  caption="Structured Data inspection results for a video on my site. Success! Google can see it."
/>

### Keyword research is a great way to understand your audience

Alright, friends -- here's where I need to call _myself_ out - I'm not great at this. But I know it's important, and I'm working on it.

Here's the idea: when making something new, it's reallllly helpful to make sure you're creating content about things people are actually searching for. Keyword research to understand what people are searching for, and then create content that matches those searches.

<Image
  publicId="newsletters/tiny-tips-for-better-seo/keyword-research"
  alt="Keyword research"
  caption="Keyword results for my site on both Google Search Console and Ahrefs Webmaster Tools"
/>

There are a lot of tools out there to help you with keyword research, but I've found that the best (free) tools for this are [Google Search Console](https://search.google.com/search-console) and [Ahrefs Webmaster Tools](https://ahrefs.com/webmaster-tools). Both of these tools will show you what people are searching for when they find your site, and what your site is ranking for. This can help you understand what people are looking for, and what you can do to make your site more relevant to those searches.

---

## Free tools to help you understand your site's SEO

### Make sure those titles and descriptions are just right

I really like the [SEO extension from Detailed](https://detailed.com/extension/) as a tool for inspecting the metadata on a page. It's a Chrome extension that shows you the metadata for the page you're on, and gives you a score for how well it's set up for search. It's a great way to quickly check if your titles and descriptions are set up correctly.

### For Structured Data

If you're adding Structured data to your site, you can use use [Google Search Central Schema Markup Testing Tool](https://developers.google.com/search/docs/appearance/structured-data) and [Schema.org's validator](https://validator.schema.org/#url=https%3A%2F%2Fmikebifulco-com-git-feat-metadata-mbifulco.vercel.app%2Fposts%2Flive-coding-satori-og-images-nextjs) to make sure your pages are set up correctly.

### Learn from the best

If you're looking for more, you may want to check out [Positional's fantastic SEO newsletter](https://www.positional.com/newsletter) - it's well-researched, highly informed, and a great way to learn more about SEO.

---

## More from me on SEO

- I wrote a tutorial on setting up [Self-healing URLs on your Next.js site](https://mikebifulco.com/posts/self-healing-urls-nextjs-seo) that you might find useful.
- Ever wonder [how to correctly add subtitles to your h1 tags](https://mikebifulco.com/posts/semantic-html-heading-subtitle)? I've got you covered.
- These are [the SEO tools I use to grow my sites to 20k+ vistors/month](https://mikebifulco.com/posts/seo-tools-for-new-web-projects).


3 Tiny tips for better SEO

Think about what your work will look like when it's shared

Use Structured Data with JSON-LD for enhanced search results

Keyword research is a great way to understand your audience

Free tools to help you understand your site's SEO

Make sure those titles and descriptions are just right

## Canonically Speaking: Own Your Work

You've gone through the trouble of planning, outlining, and writing an article - the product of hours (or sometimes days) of work. After publishing your work on your own site, you take the time to cross-post it on Hashnode, Medium, Dev.to, and Reddit, to get more eyes on it.

Great news: your work is a success! You're racking up likes and upvotes, and people are leaving thoughtful comments.

Some time later, you open up an incognito window, and do a Google search for your article, and it pops up!

...but wait, why is the top result Medium, and not `yourgreatwebsite.com`?

It sounds like it's time you learned about the `canonical` tag, its value for SEO, and why it matters if you're trying to build a brand for yourself, or for a product you're working on.

## What is a Canonical Tag?

The **canonical tag** is a specially formatted `<link />` tag in HTML which lets you specify the "canonical" or original version of the content on a given page. The Google crawler and other search engines use these in combination with a few other signals to determine which domain "owns" the content being shown.

In other words: **canonical tags tell search engines which URL should be considered the official home of whatever is on that page**.

### Syntax for the Canonical tag

Canonical tags go in the `<head>` section of an html page, and they look like this:

```html
<head>
  
  <link rel="canonical" href="https://www.yoursite.com/some-article" />
</head>
```

**Important:** Your page should have _only one_ canonical tag. Adding more than one can have negative or unintended effects on your search rankings!

### Some great reasons to use Canonical Tags

When your work is posted in multiple places online, canonical tags tells search crawlers which version should be considered the authoritative source.

If you cross post and don't use a canonical tag, it can lead to your poor search rankings _everywhere_ for your work. This means that even if you get a boost initially from sharing on Hashnode, Medium, or Dev.to, it can actually _hurt_ your chances to rank well in the long run.

In theory, this means that the signals search crawlers use to rank your articles (like backlinks and traffic statistics) should be attributed to the original source on your site. That's great news, because more backlinks and clicks through to your work _should_ increase visibility on search engine results pages (SERPs).

### Another benefit: Protection Against Content Theft

Eventually, your high-traffic articles will copied and republished without your permission by spammy content aggregator sites looking to build traffic for themselves.

By having a canonical tag _on your site_ from the start, and having it indexed by search engines, you ensure that these spam sites don't win by stealing your content. The canonical tag helps search engines recognize your original work and prioritize it in search results.

---

## Implementing Canonical Tags on your site

Thankfully, it's not particularly complicated to add canonical tags to your site. The long and short of it is that you need to add a `<link>` tag to the `<head>` section of your HTML pages, specifying the canonical URL of the content.

As an example here's a simple, step-by-step guide to implementing canonical tags in a Next.js site using the pages router:

### Create a New Next.js project

If you haven't already, you can create a new Next.js project by running the following commands in your terminal:

```bash
npx create-next-app@latest my-nextjs-site
cd my-nextjs-site
```

### Install the Next.js Head Component

Next.js provides a built-in `<Head />` component to help you manage the `<head>` section of your HTML. You don't need to install anything additional for this; it's already included with Next.js.

_A word of caution:_ Using a `<Head />` tag on any page in your site gives you a way to add content to the `<head />` section rendered on the final page. This is super convenient, but that also makes it easy to unintentionally include more than one of these puppies per page -- and you don't want to do that.

### Add the Canonical Tag to Your Pages

Adding the tag to a single page is straightforward - toss it between `<Head>` tags, and make sure the `href` attribute has the _exact_ same URL as this page will. **If your site pages have a trailing slash `example.com/hello/`, make sure to include it!**

```jsx
import Head from 'next/head';

export default function Home() {
  return (
    <div>
      <Head>
        <title>My Next.js Site</title>
        <link rel="canonical" href="https://www.yoursite.com/" />
      </Head>
      <h1>Welcome to My Next.js Site</h1>
    </div>
  );
}
```

You can add the canonical tag to other pages in the same way - just make sure to replace the href value with the correct, specifc URL for each page.

### Set the Canonical URL for article pages

For more complex sites, especially those with pages generated from Markdown or a CMS, you'll likely want to set the canonical URL dynamically. Here's a simplified example of how you might accomplish this using `next/navigation`:

```jsx
import Head from 'next/head';
import { useRouter } from 'next/navigation';

export default function BlogPost() {
  const router = useRouter();

  // ƒor https://example.com/articles/my-good-article,
  // this will contain something like "/articles/my-good-article"
  const path = router.asPath;

  /*
    Dynamically set the canonical URL - this needs to be an absolute URL
    so make sure to include the domain
    For example, if your site is https://www.yoursite.com
    and the path is /blog/my-post, the canonical URL would be
    https://www.yoursite.com/blog/my-post
  */
  const canonicalUrl = `https://www.yoursite.com${path}`;

  return (
    <div>
      <Head>
        <title>Blog Post Title</title>
        <link rel="canonical" href={canonicalUrl} />
      </Head>
      <h1>Blog Post Content</h1>
    </div>
  );
}
```

### Verify the Implementation

After adding canonical tags, it's essential to verify their implementation. You can use tools like [Google's URL Inspection Tool](https://support.google.com/webmasters/answer/9012289?hl=en) in Search Console to check if your pages are being indexed correctly with the canonical tag.

<Image
  publicId="posts/own-your-work-with-canonical-tags/google-search-console"
  alt="Google Search Console showing the URL Inspection Tool"
  caption="Use Google's URL Inspection Tool to verify that your pages are being indexed correctly with the canonical tag"
/>

By following these steps, you'll ensure that search engines recognize your original content, helping you build your personal brand and protect your work from content theft.

## Bonus points: set canonical URLs in places where you crosspost

Many community blogging platforms contain tools that will let you set a canonical URL on your posts. This is a step you should absolutely take when it is available - it's a way to explicitly tell crawlers that if they're crawling your article on some other site, they should consider your original site the owner.

In other words, when you post on Dev.to, you should add metadata to your post _there_ to indicate that it was _originally_ posted on `yoursite.com`.

<Image
  publicId="posts/own-your-work-with-canonical-tags/canonical-dev-to"
  alt="A recent post of mine on Dev.to showing that it is a crosspost"
  caption="If you do it right, dev.to will point right back to your original article"
/>

### FWIW: Adding canonical tags with Next.js App router

If your Next.js app is built using the App Router, implementation is slightly different, but also pretty straightforward. Next provides an API called [Dynamic Metadata](https://nextjs.org/docs/app/building-your-application/optimizing/metadata) on each page, which slurps up the output of a function called `generateMetadata` on your pages, and sticks the result in nicely formatted tags in the `<head />` of your document.

To add a canonical tag with this method, you'll do something like this:

```tsx
import type { Metadata, ResolvingMetadata } from 'next'

type Props = {
  params: { id: string }
  searchParams: { [key: string]: string | string[] | undefined }
}

export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  // read route params
  const slug = params.slug

  return {
    metadataBase: new Url('https://yoursite.com'), // Next will use this to make complete URLs from relative paths
    alternates: {
      canonical: `/articles/${slug}`,
    },
  }
}

export default function Page({ params, searchParams }: Props) {
  /* etc */
}

```

### Setting a canonical URL on Dev.to

To [set the canonical URL of a post on Dev.to](https://dev.to/p/editor_guide#front-matter), add `canonical_url` to the frontmatter of your post:

```md
---
title: Hello this is a post
canonical_url: https://yoursite.com/article/some-article`
---
```

### Setting a canonical URL on Medium

To [set the canonical URL of a post on Medium](https://help.medium.com/hc/en-us/articles/360033930293-Set-a-canonical-link), you'll use the three dot button `...` on your post and select "This story was originally published elsewhere" from the menu

### Setting a canonical URL on Hashnode

In the Hashnode editor, there's a helpful menu under _Draft Settings_ for "Are you republishing?", where you can [specify your post's canonical URL](https://support.hashnode.com/en/articles/6556971-how-to-set-a-canonical-link).

### Setting a canonical URL on LinkedIn

LinkedIn _desperately_ wants you to use their "write an article" feature to share long form content on their site. In my opinion, this is a bad idea - **LinkedIn articles do not support canonical tags** -- and IMO, this means they're trying to take credit for your work.

Instead, just share a link to your article in a regular post - it may not do as well in their feed algorithm, but at least there they'll honor your canonicals.

## Protect your work and boost your SEO with canonical tags

All told, this is a tiny amount of work to protect your IP, send search traffic your way, and build your brand. It's one of those things that many devs overlook. Building SEO traffic for your site has compounding value over time - and learning the fundamentals goes a long way.

Now get out there and add `<link rel="canonical">` to your articles, before I claim them as my own 😘

## More reading on SEO

I have [written _gobs_ about SEO for developers](https://mikebifulco.com/tags/seo) - if you liked this article, you may want to out these as well:

- [How to set up self-healing URLs in Next.js for better SEO](https://mikebifulco.com/posts/self-healing-urls-nextjs-seo)
- [3 Tiny Tips for better SEO](https://mikebifulco.com/newsletter/tiny-tips-for-better-seo)
- [SEO tools I used to grow my sites to 20k+ visitors/month](https://mikebifulco.com/posts/seo-tools-for-new-web-projects)
- [The correct semantic HTML for adding subtitles to h1 tags](https://mikebifulco.com/posts/semantic-html-heading-subtitle)

SEO for Devs: Own your work with canonical tags

Another benefit: Protection Against Content Theft

Bonus points: set canonical URLs in places where you crosspost

FWIW: Adding canonical tags with Next.js App router

Protect your work and boost your SEO with canonical tags


<small>

_note: This post is inspired by an article that my pal Josh Finnie wrote, showing [how he added JSON-LD to his Astro.js site](https://www.joshfinnie.com/blog/adding-json-ld-to-my-blog/): If you're an Astro-naut - give that a read. It's great!_

</small>

## SEO is the growth hack you're overlooking

Many devs overlook the value of SEO for their work.

I've long contended that learning a little bit about SEO can go a long way. It's in your best interest to configure your site so that Google, Duck Duck Go, and Bing know what your site is about, and what you're expert on.

In this brief tutorial, I'll share some information about Structured Data and JSON-LD, and how you can add it to your Next.js site to improve your site's SERP (Search Engine Results Page) presentation, with just a little bit of code and configuration.

## What is JSON-LD?

**JSON-LD (JSON Lightweight Linked Data format) is a metadata format** which can be added to your site to tell Google and other search engines what type of content is on each page. This can help search engines understand your content better, and can lead to better search results for your site. In reality, JSON-LD is _just_ a specific format for JSON which is human readable, and is meant to describe the content on a page in a way that search engines can understand. You can read more about it here: [https://json-ld.org/](https://json-ld.org/)

JSON-LD looks like this:

```json
{
  "@context": "https://json-ld.org/contexts/person.jsonld",
  "@id": "http://dbpedia.org/resource/John_Lennon",
  "name": "John Lennon",
  "born": "1940-10-09",
  "spouse": "http://dbpedia.org/resource/Cynthia_Lennon"
}
```

### What is Structured Data?

**Structured Data is a set of search-engine specific JSON-LD templates** that search crawlers look for to understand more about the information you're sharing online. It is _optional_ for your site, but can help bring more traffic to your site by increasing the chances that your site will show up in search results.

Adding the _right_ type of Structured data to your site means that when your pages come up in someone's search results, the search engine can display more information about your site, like reviews, ratings, and other rich snippets. Ever seen a recipe or a product review in a search result? That's because of structured data.

<Image
  publicId="posts/structured-data-json-ld-for-next-js-sites/apple-cobbler"
  alt="A search result featuring apple cobbler recipes, with a star rating, time to complete, a short ingredients list, and a photo"
  caption="Structured Data can help your site show up in search results with rich snippets like this one"
/>
<br />

### Types of Structured Data

There are many types of Structured Data you can embed on your site - [Google Search Central has a list of structured data features](https://developers.google.com/search/docs/appearance/structured-data/search-gallery) which that is worth a good look. Some examples of Structured Data include:

- **Article**: For news, blog, and other article pages
- **Events**: Showcases events like concerts, festivals, and other happenings
- **FAQ**: Make your FAQ page more discoverable
- **Product**: Details and information about a product you're selling
- **Recipe**: Ingredients, cook time, and other details about a recipe
- **Review Snippet**: A review of a product, service, or other item
- **Video**: For pages that showcase video content

Each of these formats are slightly different in content, but they use JSON-LD to describe the content in a way that search engines can understand. By way of example, this is the Structured Data for a post on my site about a livestream I did demonstrating [how to build a site with Astro, TypeScript, and React](https://mikebifulco.com/posts/live-astro-content-driven-website-rebuild):

```html
<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "VideoObject",
    "name": "Rebuilding an open source content-rich site with Astro, TypeScript, and React",
    "description": "A YouTube live coding stream, learning to build content-driven sites with the Astro Web Framework.",
    "thumbnailUrl": "https://i.ytimg.com/vi/wyJYInvZya8/hqdefault.jpg",
    "uploadDate": "2024-03-23T00:00:00.000Z",
    "contentUrl": "https://www.youtube.com/watch?v=wyJYInvZya8",
    "embedUrl": "https://www.youtube.com/embed/wyJYInvZya8",
    "duration": "PT1M33S"
  }
</script>
```

Not too bad, right? This JSON-LD tells Google that this page is a video, and gives Google some information about the video, like the title, description, and thumbnail. In theory, if someone searches for the title of the video, Google might show this video in the search results, with a thumbnail and a link to the video.

Once you've got Structured Data embedded on your site, you can verify that it's working using [Schema.org's Structured Data Testing Tool](https://validator.schema.org/):

<Image
  publicId="posts/structured-data-json-ld-for-next-js-sites/schema-org-validator"
  alt="Schema.org's Structured Data Testing Tool showing that my video structured data is valid"
/>

Similarly, you can use [Google's Rich Results Test](https://search.google.com/test/rich-results):

<Image
  publicId="posts/structured-data-json-ld-for-next-js-sites/rich-results-test"
  alt="Google's Rich Results Test showing that my video structured data is valid"
/>

If you want to poke around yourself, check out the [results for the video example above](https://search.google.com/test/rich-results/result?id=K92cqPpaYa6TcdmYuVrIzQ).

Pretty cool! So - now let's talk about how it's done.

## Adding Structured data to your Next.js site with JSON-LD

My site is built with Next.js - the articles you read here are written in an extension of Markdown called [MDX](https://nextjs.org/docs/pages/building-your-application/configuring/mdx), and the site is statically generated.

When I publish an article that features a YouTube video, I add frontmatter to the MDX file for the article that contains the ID of the video, and then I use that ID to generate the JSON-LD for the video.

Again, for the page above, that looks like this:

```mdx
---
title: 'Rebuilding an open source content-rich site with Astro, TypeScript, and React'
excerpt: A YouTube live coding stream, learning to build content-driven sites with the Astro Web Framework.
date: 2024-03-23
tags: [video, nextjs, typescript, astro]
coverImagePublicId: posts/live-astro-content-driven-website-rebuild/cover
path: live-astro-content-driven-website-rebuild
youTubeId: wyJYInvZya8
---

OpenApi.tools is an Open Source yada yada yada
```

Google provides an npm package called [schema-dts](https://www.npmjs.com/package/schema-dts) which contains types and helpers for generating JSON-LD. Start by installing this package:

```sh
npm install schema-dts
# or with pnpm
pnpm install schema-dts
# or with yarn
yarn add schema-dts
# or with bun
bun add schema-dts
```

Then, import the package and use it to generate a typed variable to contain a VideoObject's schema:

```tsx
import type { VideoObject, WithContext } from 'schema-dts';

let videoStructuredData: WithContext<VideoObject> | undefined = undefined;
```

<small className="text-xs">

**Shout out** to redditor [/u/AdrnF](https://www.reddit.com/r/nextjs/comments/1ccr79j/comment/l172n31/) for the tip. I didn't know this npm package existed!

</small>

Next, we'll need to populate this variable with the appropriate data for the schema. In my case, I'm using the `youTubeId` from the frontmatter to generate the JSON-LD for the video, like this:

```tsx
  let videoStructuredData: VideoStructuredData | undefined = undefined;

  if (youTubeId) {
    videoStructuredData = {
      '@context': 'https://schema.org',
      '@type': 'VideoObject',
      name: title,
      description: excerpt,
      thumbnailUrl: `https://i.ytimg.com/vi/${youTubeId}/hqdefault.jpg`, // this is the thumbnail for the video straight from youtube
      uploadDate: new Date(date).toISOString(),
      contentUrl: `https://www.youtube.com/watch?v=${youTubeId}`, // this is the URL for the video on youtube
      embedUrl: `https://www.youtube.com/embed/${youTubeId}`, // this is the URL for the video embed on youtube
      duration: 'PT1M33S', // this is the duration of the video

      /*
        note that I'm not using the entire VideoObject schema here, but
        you could add more fields if you wanted to, like interactionStatistic
        and regionsAllowed:
      */

      // interactionStatistic: {
      //   '@type': 'InteractionCounter',
      //   interactionType: { '@type': 'http://schema.org/WatchAction' },
      //   userInteractionCount: 0,
      // },
      // regionsAllowed: ['US'],
    };
  }
```

Once this object is created, I serialize it to a string and add it to a `<script>` tag on the page - depending on when and where you generate it, you can stick this in the `<head>` of your page, or right in the body of the document, like I do:

```tsx

 // snip -

  return (
    <>
      {videoStructuredData && (
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{
            __html: JSON.stringify(videoStructuredData),
          }}
        />
      )}
      <article>
        {/* page content goes here */}
      </article>
    </>
  );

```

When the page is generated, you can inspect the source and see the JSON-LD embedded in the page - as in the example above.

You can double-check that your Structured data is valid using one the [Schema.org Structured Data Testing Tool](https://validator.schema.org/) before publishing by copy/pasting the generated HTML for your pages into the "code snippet" tab. Once you're happy with it, you can publish your article and you're good to go!

Job done. Google's crawler will see this JSON-LD and use it to understand the content on your page better, and you'll be on your way to better search results.

## Embed your Structured data server-side for best results

Embedding this information on in your articles in Next.js only takes a few steps, but it's critical that you do this _server-side_ to give google the best chances of seeing it. I'm using the Next.js `/pages` directory for my site -- articles are generated statically using `getStaticPaths` and `getStaticProps`, which means that the JSON-LD is generated at build time.

If you use the _App Router,_ you'll want to make sure that you embed your JSON-LD using a React Server Component (RSC), not using a client-side script.

If you're using a CMS, you'll want to make sure that the JSON-LD is generated when the page is statically rendered, and not when the page is loaded in the browser.

## Challenges with structured data

It's worth mentioning here that even if the schema validators can read your JSON-LD, it doesn't guarantee that Google will use it in search results. Google's search algorithms are complex, and they use many signals to determine what to show in search results.

I've been tweaking the implementation of Video structured data on posts like the one above, because the Google Search Console has been showing me that the structured data is valid, but it's not showing up in search results as a video:

<Image
  publicId="posts/structured-data-json-ld-for-next-js-sites/search-console-hates-me"
  alt="Google Search Console showing that my video structured data is valid, but not showing up in search results"
  caption="Google's crawler thinks my video isn't the main content of the page."
/>

There's still some work to do here, but I'm confident that with some more tweaking, I'll be able to get this working. If you know more about this, I'd love to hear from you! Drop me a line on [Threads @irreverentmike](https://threads.net/@irreverentmike) or email me <a href="mailto:hello@mikebifulco.com">hello@mikebifulco.com</a>.

These rules are always changing, and keeping up with them is a fulltime job in itself. Nonetheless, adding structured data to your site is a good practice, and can help your site show up in more search results -- even if you can't control exactly how it shows up.

## Keep adding Structured Data to your site

Now's your turn - go give it a shot. You may want to start with something like the [Profile Page](https://developers.google.com/search/docs/appearance/structured-data/profile-page) structured data format, or by adding one for [Articles](https://developers.google.com/search/docs/appearance/structured-data/article) to your posts.

For the amount of effort required, the payoff is worth it. Every little SEO boost you build into your site pays off in the long run. Think of it as an investment in the passive value of your content - the more you can do to make your content discoverable, the more likely it is to be found.

## Resources on SEO and Structured Data

As I mentioned above, this tutorial was inspired by [Josh Finnie's article on adding JSON-LD to his Astro.js site](https://www.joshfinnie.com/blog/adding-json-ld-to-my-blog/). Josh is a great developer and a good friend, and I recommend you check out his work.

I've written a few articles on SEO that you may find helpful:

- [3 Tiny tips for better SEO](https://mikebifulco.com/newsletter/tiny-tips-for-better-seo)
- [How to set up self-healing URLs in Next.js for better SEO](https://mikebifulco.com/posts/self-healing-urls-nextjs-seo)
- [SEO tools I used to grow my sites to 20k+ visitors/month](https://mikebifulco.com/posts/seo-tools-for-new-web-projects)
- [How to reset your Open Graph embed on LinkedIn, Twitter, and Facebook](https://mikebifulco.com/posts/reset-your-open-graph-embeds-on-linkedin-twitter-facebook)

And here are some tools that can help you get started with Structured Data:

- [Google's Structured Data Testing Tool](https://search.google.com/structured-data/testing-tool)
- [Google's Rich Results Test](https://search.google.com/test/rich-results)
- [Schema.org's Structured Data Testing Tool](https://validator.schema.org/)

If you found this helpful I'd love it if you shared the article with a friend.

I'm also keen to hear from you. Drop me a line on [Threads @irreverentmike](https://threads.net/@irreverentmike) or email me <a href="mailto:hello@mikebifulco.com">hello@mikebifulco.com</a> if you think I missed anything, or if you have any questions!


Add Structured Data to your Next.js site with JSON-LD for better SEO

SEO is the growth hack you're overlooking

Adding Structured data to your Next.js site with JSON-LD

Embed your Structured data server-side for best results



<small>

_note: This post is inspired by a great video from YouTuber Aaron Francis: [Make self-healing URLs with Laravel](https://www.youtube.com/watch?v=a6lnfyES-LA). For all my PHP homies - go check that video out. It's great!_

</small>

<Image
  publicId="posts/self-healing-urls-nextjs-seo/demo"
  alt="A demo of a self-healing URL made in Next.js"
  caption="Ever wonder how Amazon and Medium create self-healing URLs?"
/>

Building sites with human-readable URLs is helpful for a few reasons: it gives users a better understanding of what they're getting when they click on a link to your site, it's better for SEO, and it's more accessible (screen readers can read out the URL to the user and they can understand where they are on the site). It's also just a nice thing to do for your users... by way of example, these two URLs _feel_ dramatically different:

`https://example.com/posts/c61sca0`

vs

`https://example.com/posts/how-to-set-up-self-healing-urls-in-nextjs-for-better-seo`

The first one is a bit of a mystery box. You have no idea what you're going to get when you click on it. The second one is much more descriptive, and _hopefully_ the contents of the page match the URL.

...but, what happens if you change the title of the post? The human-readable URL is now misleading. If you're using a static site generator like Next.js, you can use the file system to create self-healing URLs that will always point to the correct page, even if the title changes.

Or, what if you're managing a larger site, where it's possible that two posts may have the same title?

These are both issues that self-healing URLs are attempting to solve.

## What are self-healing URLs?

**Self-healing URLs are URLs that allow for human-readable text, but also include a unique identifier that will always point to the correct page**, even if the human-readable text changes, or gets removed entirely.

In this post, we'll learn **how to set up self-healing URLs in Next.js.** This is something used on sites like Amazon and Medium to make sharing links a little more robust. These are URLs that allow for human-readable text, but also include a unique identifier that will always point to the correct page, even if the human-readable text changes, or gets removed entirely.

Here's the URL-pattern we're to build: `https://example.com/posts/${POST_TITLE}-${POST_ID}`.

Ultimately, we'll use the `id` of a post to identify which content to render on a page, and we'll use the `title` of the post to create a human-readable portion in the URL. As long as the URL ends with a hyphen followed by the `id`, we will redirect to the correct page, with a nicely formatted, human-readable URL.

## Self-healing URLs in Next.js with the App router

To create self-healing URLs for blog posts with the [Next.js App router](https://nextjs.org/docs/api-reference/next/router), we'll start with a fresh react app from the cli:

```bash
# with npm
npx create-next-app

# or, with yarn
yarn create next-app

# or, with pnpm
pnpm create next-app
```

Give your project a name, and select the options you want to use. I used all the defaults for this example:

```
✔ What is your project named? … next-self-healing-urls-app-router
✔ Would you like to use TypeScript? Yes
✔ Would you like to use ESLint? Yes
✔ Would you like to use Tailwind CSS? Yes
✔ Would you like to use `src/` directory? Yes
✔ Would you like to use App Router? (recommended) Yes
✔ Would you like to customize the default import alias (@/*)? No
```

You'll also need to install the `slugify` package, which we'll use to create a URL-safe slug from the post's title:

```bash
npm install slugify

# or, with yarn
yarn add slugify

# or, with pnpm
pnpm add slugify
```

### Set up dynamic routing

We'll need to add a few files to the default setup. Using the App directory, create the following directories and files:

```
app
├── posts
│   └── [slug]         // note that this is a _folder_ called [slug]. This is how dynamic routes are set up in the app router
│        └── page.tsx  // render one post
├── not-found.tsx      // this will render if someone tries to visit a post page with an id that doesn't exist in the url
├── sitemap.ts         // generate a dynamic sitemap with the _correct_ canonical URL for each post
└── utils
    └── post.ts        // types and helper functions to load posts and format URLs
```

Let's start with `post.ts`. This file contains a type definition and helper functions to load posts and format URLs.

```ts
import slugify from 'slugify';

export type Post = {
  userId: number;
  id: number;
  title: string;
  content: string;
};

export const getAllPosts = async () => {
  // fetch all posts from an example API.
  // this is just a placeholder, replace with your own data
  // shout out to https://jsonplaceholder.typicode.com/ - what a great service!
  const postsResponse = await fetch(
    'https://jsonplaceholder.typicode.com/posts',
  );
  const posts = (await postsResponse.json()) as Post[];

  return posts;
};

export const getPostById = async (id?: string | number) => {
  if (!id) {
    throw new Error('No ID provided');
  }

  if (typeof id === 'string') {
    id = parseInt(id);
  }

  const allPosts = await getAllPosts();

  const post = allPosts.find((post) => post.id === id);

  if (!post) {
    // we'll use a try/catch block around this function later
    // to redirect if a post doesn't exist with this id,
    // so make sure to throw an error here.
    throw new Error('Post not found');
  }

  return post;
};

/**
 * Converts input to a URL-safe slug
 * @param {string} title - the title of the post
 * @returns {string} a URL-safe slug based on the post's title
 */
const titleToSlug = (title: string) => {
  const uriSlug = slugify(title, {
    lower: true, // convert everything to lower case
    trim: true, // remove leading and trailing spaces
  });

  // encode special characters like spaces and quotes to be URL-safe
  return encodeURI(uriSlug);
};

// given a post, return its slug
export const getPostSlug = (post: Post) => {
  return `${titleToSlug(post.title)}-${post.id}`;
};

// given any slug, try to extract an id from it
export const getIdFromSlug = (slug: string) => slug.split('-').pop();

```

### Generate a sitemap with the correct canonical URL for each post

Let's talk SEO for a moment: Google (and other search engines) use your site's sitemap file to understand the structure of your site. This helps them index your site more accurately, and it helps them understand which pages are the most important. Next.js supports static and dynamic sitemap generation, which you can read about in their [docs on sitemap.xml](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap). Your sitemap should contain the canonical URL for every page in your site.

When Google and other search engines crawl your site, they use the Sitemap as an address book, and then visit each page found in the sitemap to analyze the content on the page, and deciding how to rank it in search results. If the URL in the address bar doesn't match the URL that Google has indexed for that page, it can cause problems with SEO. For example, if you have a page with the URL `https://example.com/foo/bar/some-url-here`, but Google has indexed the page as `https://example.com/foo/bar/some-other-url-here`, Google will think that you have two pages with the same content, and it will penalize you for duplicate content.

This is where the **canonical tag** comes in. The [canonical tag](https://ahrefs.com/blog/canonical-tags/) is a special bit of metadata that you can add to your page's `<head>` tag, which is used to tell search engines which URL is the _original URL for the content onthat page_. Ideally, the canonical URL for our blog posts should _exactly_ match the pattern we've set up for our self-healing URLs: `https://example.com/posts/${POST_TITLE}-${POST_ID}`. This is the URL that we want Google to index for each post. We'll do that by making sure we use this URL in our sitemap, and by adding a canonical tag to each post page.

A canonical tag looks like this:

```html
<link rel="canonical" href="https://example.com/foo/bar" />
```


So, this is what sitemap.ts looks like:

```ts
import { getAllPosts, getPostSlug } from '@/utils/posts';
import { MetadataRoute } from 'next';

export default async function sitemap(): MetadataRoute.Sitemap {
  const allPosts = await getAllPosts();

  let urlPrefix = 'http://localhost:3000';
  if (process.env.NODE_ENV !== 'production') {
    urlPrefix = 'https://example.com';
  }

  return allPosts.map((post) => ({
    url: `${urlPrefix}/posts/${getPostSlug(post)}`, // https://example.com/posts/this-is-a-post-1
    lastModified: new Date(), // ideally, this is the last modified date of the post
    changeFrequency: 'daily', // this will be used to determine how often pages are re-crawled
    priority: 0.7, // the priority of this URL relative to other URLs on your site
  }));
}
```

Now, if you run your app and visit `https://localhost:3000/sitemap.xml`, you should see a sitemap that includes an entry for each post, with the correct canonical URL specified.


### Setting up page.tsx: where the magic happens

In the file `app/posts/[slug]/page.tsx`, we use the [Next.js App Router's `generateStaticParams` function](https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#generating-static-params) to generate URLs for all posts. This function is called at build time, and it returns an array of objects that contain the `slug` for each post. The `slug` is used to generate the URL for each post page.

Then, in the server function which renders the post page, we check whether the current URL's readable portion matches the post's actual slug. If not, we redirect to the correct URL.

We also use the [Next.js App Router's `generateMetadata` function](https://nextjs.org/docs/app/next-script#generating-metadata) to generate metadata for each post. This function is called at build time, and it returns an object that contains the `title` and `alternates` for each post. The `alternates` object contains the `canonical` URL for each post, which is used to tell search engines which URL is the correct one for each post. **This is critical for SEO purposes** - it helps Google verify that when your page loads, the URL in the address bar matches the URL that Google has indexed for that page.


```tsx
import { Metadata, ResolvingMetadata } from 'next';
import { RedirectType, notFound, redirect } from 'next/navigation';
import { isRedirectError } from 'next/dist/client/components/redirect';

import { Post, getAllPosts, getPostById, getPostSlug } from '@/utils/posts';
import { getIdFromSlug } from '@/utils/posts';

// generate URLs for all posts
export async function generateStaticParams() {
  const posts = await getAllPosts();

  return posts.map((post) => {
    const slug = getPostSlug(post);

    return {
      slug,
    };
  });
}

type PostPageParams = {
  params: {
    slug: string;
  };
};

export default async function Post({ params }: PostPageParams) {
  const id = getIdFromSlug(params.slug);

  let post: Post;
  try {
    post = await getPostById(id);
    const correctSlug = getPostSlug(post);

    // check whether the current URL's readable portion matches the post's actual slug
    if (correctSlug !== params.slug) {
      // if not, redirect to the correct URL
      const redirectUrl = `/posts/${correctSlug}`;
      await redirect(redirectUrl, RedirectType.replace);
    }
  } catch (e) {
    // this is a hack to make redirects work from within a try/catch block
    // shout out to @jeengbe on github for the tip
    // https://github.com/vercel/next.js/issues/49298#issuecomment-1537433377
    if (isRedirectError(e)) {
      throw e;
    }

    // if the post doesn't exist, return the "not found" 404 page
    notFound();
  }

  // make your post look nice IRL
  return <div>My Post: {params.slug}</div>;
}

export async function generateMetadata(
  { params }: PostPageParams,
  parent: ResolvingMetadata,
): Promise<Metadata> {
  // read route params
  const id = getIdFromSlug(params.slug);
  // fetch data
  const post = await getPostById(id);

  return {
    title: post.title,
    alternates: {
      canonical: `https://example.com/posts/${params.slug}`,
    },
  };
}
```

Another important note - _entire_ component is rendered server-side - visitors to this page won't see any content flash on screen if they enter an incorrect URL. This is huge for page performance and SEO purposes, and has traditionally been challenging while using Static Site Generation.

Instead of a screen flash, your users get a great experience: they can try to load an incorrect URL, and as long as the URL ends with a hyphen followed by the `id`, they'll be redirected to the correct URL seamlessly, like magic. If the URL doesn't match the pattern, they'll be redirected to the 404 page.



### Not Found: a 404 page for posts that don't exist

In `app/not-found.tsx`, create a 404 page that will render if someone tries to visit a post page with an id that doesn't exist in the url. [Next provides a `notFound` function](https://nextjs.org/docs/app/api-reference/functions/not-found) that will return a 404 page. We used this in page.tsx to return a 404 page if the post doesn't exist. You'll want to make this page look nice and include some helpful text, but for the sake of this example, we'll keep it simple:

```tsx
/*
  redirect to this page by calling the `notFound` function from the App Router in a page's server function:
  import { notFound } from 'next/navigation';
*/

export default function NotFound() {
  return <div>Not Found</div>;
}
```

## Try it out!

That should do it! run `yarn dev` to start the server, and navigate to `http://localhost:3000/posts/1` - you'll see it _automatically_ redirect to a better URL.

<Image
  publicId="posts/self-healing-urls-nextjs-seo/demo"
  alt="A demo of a self-healing URL made in Next.js"
/>

Nice!

Head over to `http://localhost:3000/sitemap.xml` and check out the nicely formatted sitemap, with the correct canonical URL for each post. Now your web app, your readers, _and_ Google are all on the same page. 🔥

## To do: update your redirects when a post's title changes

To be completely thorough there's one more thing we should probably do: if a post's title changes, you should add an entry to your redirects file to redirect the old URL to the new one. Even though this is a self-healing URL, it's still a good idea to add a redirect for the old URL, just in case someone has bookmarked it, or if someone has shared it on social media. This will also help Google understand that the old URL is no longer the correct one, and that it should index the new URL instead.

This is a bit more challenging, but it's worth it.

Because making this work is dependent on your specific setup, I'm not going to include a code example here, but I'll give you a few pointers:

- In your CMS, when a post is saved, check whether the title has changed. If it has, add an entry to your redirects file to redirect the old URL to the new one.
- It's a good to make sure that you don't accidentally create a redirect loop. If the new URL for a given path is the same as any of the prior URLs, don't add a new redirect, and remove any existing redirects for that path.
- You may need to kick off a rebuild of your site to make sure that the new redirect is picked up by your app. If you're using Vercel, you can use their [API to trigger a rebuild](https://vercel.com/docs/api#endpoints/deployments/redeploy-all-deployments) when a post is saved.


## Summary: self-healing URLs in Next.js

In this post, we learned how to set up self-healing URLs in Next.js. We used the App Router to generate URLs for all posts, and we used the App Router's `generateMetadata` function to generate metadata for each post. This function is called at build time, and it returns an object that contains the `title` and `alternates` for each post. The `alternates` object contains the `canonical` URL for each post, which is used to tell search engines which URL is the correct one for each post. **This is great for SEO purposes** - it helps Google verify that when your page loads, the URL in the address bar matches the URL that Google has indexed for that page. It also has usability benefits: if your post's title ever changes, the URL will magically update itself to match the new title. Additionally, people who visit your page while using a screen reader will have a better experience, because the URL will always match the content on the page.

Not too shabby!

## Get the code

You can find the code for this tutorial on [GitHub at mbifulco/next-self-healing-urls-app-router](https://github.com/mbifulco/next-self-healing-urls-app-router). If you enjoyed this post, please consider giving it a star ⭐️ on GitHub!


## PS: What about using the Next.js Pages router?

This post _started_ as a tutorial for using the Next.js Pages router to create self-healing URLs, but I ran into a few issues that would make it really challenging to recommend going down this path if you're using the pages router (which is actually what [mikebifulco.com uses](https://github.com/mbifulco/blog)!). For that reason, I think **this is a feature you should only add if you're using the App Router**. I'm including the draft of my original post here [in a gist](https://gist.github.com/mbifulco/daf23aed0d827ec6317962691cb9cd0d) in case anyone wants to take a stab at it. If you figure it out, please let me know!




How to set up self-healing URLs in Next.js for better SEO

Self-healing URLs in Next.js with the App router

Generate a sitemap with the correct canonical URL for each post

Setting up page.tsx: where the magic happens

Not Found: a 404 page for posts that don't exist

To do: update your redirects when a post's title changes

PS: What about using the Next.js Pages router?


## Adding custom fonts to your website is a typical requirement for most web projects

By default, Next.js sites will add small set of fonts that you can use for your sites (in addition to the default fonts for a given browser). That can be useful to get started quickly, but for most custom site designs, you'll need to add custom fonts and typefaces that fit your site's brand and design guidelines.

In this tutorial, you'll learn how to **add custom fonts to your Next.js site using the `next/font` package and Tailwind CSS**. There's a few configuration steps needed to load fonts from Google Fonts using `next/font`, generate CSS variables for each font, and then use those variables to create custom font families in your Tailwind config.

With this setup, you'll be able to easily use your custom fonts throughout your Next.js app using Tailwind's utility classes.

### SEO Benefits of using custom fonts correctly on your Next.js site

In addition to improving the user experience, implementing custom fonts on your website can also have a [positive impact on your Lighthouse scores](https://web.dev/patterns/web-vitals-patterns/fonts/) and SEO. However, it's important to implement custom fonts carefully to avoid performance issues. Using too many or too large font files can slow down your site's loading time and hurt your Lighthouse performance score. Additionally, using custom fonts in a way that affects the visual stability of the page can result in lower scores for Core Web Vitals, which can impact your SEO. So, it's important to strike a balance between using custom fonts to enhance the design and ensuring that they don't negatively impact performance or user experience.

### About next/font

[`next/font` is an npm package](https://nextjs.org/docs/api-reference/next/font) developed by Vercel, which provides an easy way to load fonts in your Next.js app, while maintaing performance, and minimizing [Cumulative Layout Shift (CLS)](https://web.dev/optimize-cls/). It uses the Font Loading API to asynchronously load local font files stored in your repo, or from popular font providers such as Google Fonts, Typekit, and Fonts.com. The package also generates optimized font subsets to reduce the amount of data transferred over the network, and it provides a convenient way to generate CSS variables for each font, which can be used to create custom font families in your [Tailwind config](https://tailwindcss.com/docs/configuration). This makes it easy to use custom fonts throughout your Next.js app with minimal configuration.

## How to: Add multiple custom fonts to your Next.js site with Tailwind CSS

There are several ways to load custom fonts into your next.js app. If you're using a Google Fonts as your custom font provider, you can use the `next/font/google` package to load fonts from Google Fonts. The process is slightly different for loading font files that are stored locally in your repo, but the basic steps are the same:

### Load custom fonts from Google Fonts

In `_app.jsx/tsx`, load your the fonts you need from `next/font/google`, but use the `variable` configuration prop, which you will use to generate a definition for a CSS `--var` for each font:

```tsx
import { Barlow_Condensed, Inter } from 'next/font/google';
const barlowCondensed = Barlow_Condensed({
  weight: '700',
  subsets: ['latin'],
  variable: '--font-barlow-condensed',
});
const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
});
```

### Load custom fonts from a local file

This next example shows how you would load a font from a local file. It also showcases another feature of the `next/fonts` library - you can map font weights to different files as needed. This also applies for font _styles_ (italic, bold, etc).

In `_app.jsx/tsx`, load your the fonts you need from `next/font/local` using the syntax below. Note that in this case, font files in my repo are also being hosted in `/public/fonts` directory. Again, make sure to use the `variable` configuration prop, which you will use to generate a definition for a CSS `--var` for each font:

```tsx
import localFont from 'next/font/local';

const grosa = localFont({
  src: [
    {
      path: '../../public/fonts/Grosa/Grosa-Regular.woff2',
      weight: '500',
      style: 'normal',
    },
    {
      path: '../../public/fonts/Grosa/Grosa-Medium.woff2',
      weight: '600',
      style: 'normal',
    },
    {
      path: '../../public/fonts/Grosa/Grosa-Bold.woff2',
      weight: '700',
      style: 'normal',
    },
  ],
  variable: '--font-grosa',
});
```

### After loading custom fonts, generate CSS variables for each font

Then, in that same `_app.tsx` component - pass the generated variables into the wrapper class. This will make that variable available to any child of that element in the DOM (in other words, your whole app):

```tsx
export default function MyApp({ Component, pageProps }) {
  return (
    <main
      className={`${inter.variable} ${barlowCondensed.variable} ${grosa.variable}`}
    >
      <Component {...pageProps} />
    </main>
  );
}
```

Behind the scenes, next is generates unique css classes for each font permutation. These classes do one thing: they define a [css custom property](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (sometimes called a css variable) for each font.

By adding the resulting CSS classes to the root of your Next.js app, these variables are made available to any child of the `App` component - essentially all pages and components on your site.

<Image
  publicId="posts/custom-fonts-with-next-font-and-tailwind/classes"
  caption="is a screenshot from Chrome Browser tools for Craftwork.com, which is built using this setup"
  alt="screenshot of chrome browser tools showing the resulting CSS classes"
/>

### Use these variables your Tailwind config to create font families

Up to this point, we've loaded our custom fonts into our Next.js app, and we've made those fonts available to our entire app using CSS variables. Now, we need to tell Tailwind how to use these variables, by assigning them to specific font-family classes.

In your Tailwind config, add an entry to your `theme.extend`, to create a new font family that uses the google fonts you just imported - that will look something like this:

```tsx
// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        "barlow-condensed": "var(--font-barlow-condensed)", // note: you can call the left side of this whatever you want - barlow-bold or title-font or foo-bar, this is what you'll use in your Tailwind css classes to use this font
        "inter-medium": "var(--font-inter)", // note: the bit that goes inside the var() function is the same variable name we defined in app.tsx
      }
    }
  }
```

Then, whenever you want to use the fonts you've added, ask for that font-family in your tailwind classnames by prefixing the font-family with "font-", like this:

```tsx
const myComponent: React.FC = () => (
  <p className="font-barlow-condensed">
    This should be rendered with the Barlow font family
  </p>
);

export default myComponent;
```

That should do the trick!

If you're wondering where these steps came from, it is essentially a combination of the instructions provided in [Next's docs for Font Optimization](https://nextjs.org/docs/basic-features/font-optimization). My team is using this very configuration setup for our Next.js site on [Craftwork.com](https://craftwork.com) to load custom fonts both locally and from Google Fonts, and it's been working great.


Add custom fonts to Next.js sites with Tailwind using next/font

Adding custom fonts to your website is a typical requirement for most web projects

SEO Benefits of using custom fonts correctly on your Next.js site

How to: Add multiple custom fonts to your Next.js site with Tailwind CSS

After loading custom fonts, generate CSS variables for each font

Use these variables your Tailwind config to create font families


## SEO & analytics help grow site traffic

Whether you're working on your own blog, a news site, or building a product, you _absolutely must_ care about your site's SEO. If your site is not optimized for search engines, it is harder to find, leading to fewer visitors and potential customers. SEO tools can help you improve the usability of your site, making it easier for users to find the information they are looking for.

These are the tools that I use to monitor and enhance my sites' performance. The can help you build a site that is easier to find and use, too.

## ahrefs webmaster tools

You only need to spend a few moments researching SEO online before ahrefs pops up _somewhere_ in your results. In addition to their incredible [blog](https://ahrefs.com/blog/) and [studies](https://ahrefs.com/blog/category/data-studies/) on how search works on the web, they provide a fantastic suite of free tools for monitoring and improviing the SEO on your sites.

<Image
  publicId="posts/seo-tools-for-new-projects/ahrefs-audit"
  alt="Screenshot of a weekly audit email from ahrefs - showing a 100 SEO score for mikebifulco.com, with a few warnings."
  caption="There's always room to improve SEO, and ahrefs webmaster tools makes it easy to digest"
/>

I have found [ahrefs webmaster tools](https://ahrefs.com/webmaster-tools) to be absolutely invaluable in keeping an eye on my sites' content. Once you register a free account and verify that you have control of the sites you want to monitor, ahrefs will kick off a weekly audit of all the pages on your domain. It will check for common pitfalls, and give your site a health score from 0-100. If you're a dev, it may be helpful to think of it as a linter for SEO.

I've used it to find and fix countless problems with my sites, from broken links to missing Canonical URLs, removing unnecessary redirects and finding opportunities to link existing articles to one another.

You will get weekly audit reports in email, which let you know when things change - this can be helpful in situations where things out of your control end up affecting your site. Ever had someone take down an article that you link to? Ahrefs will find it.

## Google Search Console

My adoption of [Google Search Console](https://search.google.com/search-console/about) come from what I learned taking Monica Lent's [Blogging for Devs](https://bloggingfordevs.com) course.

Google Search Console gives you reports on how and when people see your site pop up in Google Search results. Note that it won't track people _on your site_ like Google Analytics and Fathom do - just your performance in search. This is a useful litmus for your site's organic growth and authority. If you're investing in sharing your expertise and building a searchable site, your performance on Google Search Console should grow over time. In other words, you can see whether you're gaining traction via SEO or not.

To get started, you'll need to register your site with the Google Search Console. Verifying your ownership takes a few quick steps, and doesn't require you to add Google Analytics (which is helpful if, like me, you've chosen [Fathom](https://mikebifulco.com/posts/why-fathom-analytics) for its privacy-first features).

Best of all, it's free! Just register and follow instructions to add a DNS record, or upload a file to a specific place to verify that you own the site you're interested in monitoring. You should make sure to have a sitemap on your site - they're easy to generate, and worth the time to get right. This is what Google's crawlers primarily use to index your articles for search results.

I use the Search Console to make decisions about things to write about next, and track the progress of my site over time. At the moment, Google will keeps 16 months of your site's traffic history around for you to analyze, but that history starts once you've registered you site with the Search Console. So, the sooner you get set up, the better!

## Fathom Analytics

[Fathom](https://usefathom.com) is privacy first analytics for the web. According to their site, _Fathom is a Google Analytics alternative that doesn’t compromise visitor privacy for data. We revolutionized website analytics by making them easy to use and respectful of privacy laws (like GDPR and more)._

If you've never paid attention analytics for your web properties, Fathom will be a revelation - it's super useful to have an understanding of which pages on your site are getting traffic, where that traffic is coming from, and what times of day are most busy.

If you've used Google Analytics in the past, you may be surprised just how freeing it is to use an analytics tool that prioritizes analytics. You _really_ don't need to know _who_ is on a given page - instead, focusing on the content on your site which is being visited, and the journey readers take to get there is a super useful tool to have when you're researching and writing new articles.

It's great, and puts your readers' privacy first. Google's advantage is quickly vanishing due to new regulations, and privacy tools that are being built into browsers and operating systems. Fathom does a great job of providing value without fishing for every minute detail about your readers.

Fathom is lightweight and ridiculously easy to use. The Fathom team provides docs for a variety of platforms and JAMstack site builders, including [Gatsby](https://usefathom.com/docs/integrations/gatsby), [ConvertKit](https://usefathom.com/docs/integrations/convertkit), [Next.js](https://usefathom.com/docs/integrations/next), [Vue](https://usefathom.com/docs/integrations/vue), [Webflow](https://usefathom.com/docs/integrations/webflow), [Wordpress](https://usefathom.com/docs/integrations/wordpress), and quite a few more.

I've written a bit about my experiences with Fathom before. You may want to check out my other articles, including: [Why I switched to Fathom for Analytics](https://mikebifulco.com/posts/why-fathom-analytics) and [How to add Fathom Analytics to your Remix.run app](https://mikebifulco.com/posts/add-fathom-analytics-to-remix)

### Self-host Fathom for free - Fathom Lite

If you're hesitant to pay for Fathom, they do also provide an open source version called [Fathom Lite](https://github.com/usefathom/fathom) - you'll need to configure and host it yourself, but it should give you an idea of what Fathom's premiums service is like.

If you're interested in trying out Fathom's paid service, use my [**referral link**](https://usefathom.com/ref/DPSSYB) for a discount to get you started.

## Cloudflare

I use [Cloudflare](https://cloudflare.com) to manage the DNS records for all of my sites. In addition to having a _really_ straightforward UI for DNS management, they offer a host of other features to keep your sites running well. This includes automated protection for DDoS attacks, maintenance mode, and performance enhancements such as origin server optimization and caching.

Cloudflare provides a [Free Tier](https://www.cloudflare.com/plans/) that will work for most personal sites. You'll need to set up an account, look for the instructions to add your domain to your Cloudflare account, and then update your DNS settings as needed.

Because I own domains from a variety of registrars, it's really nice to be able to manage DNS for all of them in one place. They also provide a ton of other great dev tools, like [Cloudflare Workers](https://workers.cloudflare.com/), which you can use to add interactivity to your site.

## F5Bot

<Image
  publicId="posts/seo-tools-for-new-projects/f5bot"
  alt="Screenshot of f5bot.com - get an email for when you're mentioned online!"
  caption="F5bot is free, and dead simple to set up. "
/>

The pitch for [f5bot](https://f5bot.com) is simple - as they say, it is a service that will help you to "Get an email when you're mentioned online!".

It's completely free, and takes just moments to set up - you just need to create an account, and set up keywords for the service to track. When your keywords are mentioned on [Reddit](https://reddit.com), [Hackernews](https://news.ycombinator.com), or [Lobste.rs](https://lobste.rs), you'll get a tidy little email in your inbox.

<Image
  publicId="posts/seo-tools-for-new-projects/f5bot-notification "
  alt="screenshot of a notification from f5bot in my gmail inbox. It's a simple plaintext email with a link to an article on mikebifulco.com that was mentioned on Reddit."
  caption="This is what typical notification from f5bot looks like."
/>

Notifications come _very_ quickly - in my experience, I see them within minutes of my sites being mentioned online. This is hugely helpful because it allows you to respond quickly, strike up a conversation, and make a connection with the people who are sharing your work. Those connections are the backbone of building a great personal brand online.

You can set up any search keyword you want, so if there's a competitor or topic that you're hoping to keep an eye on, it's great for that, too.

Overall, I highly recommend [f5bot](https://f5bot.com) - it's an incredibly useful tool, it's free, and it couldn't be easier to set up.

## Related reading

If you're going on the SEO-improvement journey for your sites, you might find these helpful:

- [Why I switched to Fathom for Analytics](https://mikebifulco.com/posts/why-fathom-analytics)
- [How to add Fathom Analytics to your Remix.run app](https://mikebifulco.com/posts/add-fathom-analytics-to-remix)
- [Don't center-align paragraph text](https://mikebifulco.com/posts/dont-center-paragraph-text) - this is utterly unrelated to SEO, but c'mon, do better.
- [SEO for Devs](https://seofordevs.com) - I absolutely cannot recommend this **free course** enough. Monica Lent has a masterful understanding of SEO, and I've learned a ton from her over the years.


SEO tools I used to grow my sites to 20k+ visitors/month


## Semantic HTML makes your sites better

Semantic HTML is important because it helps improve the accessibility of a web page and makes the code more readable. Semantic elements are those that clearly describe their meaning in a way that is easy for both humans and machines to understand.

Search engines can more easily parse and understand semantic HTML, [which can help improve your website's SEO](https://developers.google.com/style/semantic-tagging). Semantic HTML uses tags to describe the meaning of content on a page, rather than just its presentation. This can help search engines better understand the content of a page and index it appropriately.

### Using h2 as a subtitle for an h1 is incorrect

According to the [html spec](https://html.spec.whatwg.org/multipage/dom.html#heading-content-2), `h1` through `h6` tags are meant to indicate the structure of a document. In other words, each page should have at most 1 `<h1>` tag, and `<h2>` elements should be _sub-sections_ of that `h1` - not additional descriptions for it.

This [warning from the HTML spec](https://html.spec.whatwg.org/multipage/dom.html#sectioning-content) does a great job of explaining it:

> For example, the following snippet, intended to represent the heading of a corporate site, is non-conforming because the second line is not intended to be a heading of a subsection, but merely a subheading or subtitle (a subordinate heading for the same section).
>
> ```html
> <body>
>   <h1>ACME Corporation</h1>
>   <h2>The leaders in arbitrary fast delivery since 1920</h2>
>   ...
> </body>
> ```

(07/05/2022) As of the time of this writing, whatwg goes on to recommend use of `hgroup` in its solution. [According to MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup#usage_notes), hgroup should not be used, as it is not supported by assistive technologies needed for accesible reading of HTML sites.

## Use this code to add subtitles to headings

The correct semantic structure of HTML for a heading with a subtitle is straightforward - nest your `<h1>`, etc with in a `<header>` tag, and include a `<p>` tag with an appropriate class name as a sibling to that `h1`:

```html
<header>
  <h1>How to bootstrap a product as a solo founder</h1>
  <p class="tagline">
    Important lessongs learned from building 10 products on my own in 2 years
  </p>
</header>
```

For more details on this, check out [MDN docs on the header tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header), and their [semantics section](https://developer.mozilla.org/en-US/docs/Glossary/Semantics).

### 🚨 UPDATE: I was wrong! 🚨

The first version of this article was wrong! I previously recommended using the `<hgroup>` tag as per the whatwg spec, but I was corrected by [@AnalyticsEqv](https://twitter.com/AnalyticsEqv) on twitter:

<blockquote class="twitter-tweet">
  <p lang="en" dir="ltr">
    MDN specifically recommends against &lt;hgroup&gt; because assistive
    technologies don&#39;t support it.
  </p>
  &mdash; EQV Analytics 🇺🇦 (@AnalyticsEqv) <a href="https://twitter.com/AnalyticsEqv/status/1544328749272993792?ref_src=twsrc%5Etfw">July 5, 2022</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8" />

Thanks for the correction! I definitely get things wrong sometimes, and I'm always happy to correct myself when appropriate.

## Did you find this helpful?

You might also like these other articles I've written:

- [How to run dependabot locally on your projects](https://mikebifulco.com/posts/run-dependabot-locally)
- [No Floating Promises: an eslint rule to prevent async code errors](https://mikebifulco.com/posts/eslint-no-floating-promises)
- [JavaScript tips: nullish coalescing](https://mikebifulco.com/posts/nullish-coalescing-javascript)

If you want to hear more from me, consider subscribing to my newsletter 👇🏼


The correct semantic HTML for adding subtitles to h1 tags

Using h2 as a subtitle for an h1 is incorrect

Use this code to add subtitles to headings


## Earlier today, we had a problem at [Gymnasium](https://thegymnasium.com).

We released a [new 5 minute tutorial on Making Headings and Lists more Accessible](https://thegymnasium.com/courses/take5/making-headings-and-lists-more-accessible) - which is great news! If you build things for the web, and you've got 5 minutes to spare in your day (you do), you should give it a look.

After the course was made public, our marketing wizard did her magic and started posting to our various social media pages: [Facebook](https://www.facebook.com/aquentgymnasium), [Twitter](https://twitter.com/AquentGymnasium), and [LinkedIn](https://www.linkedin.com/school/gymnasium/).

It was immediately apparent that something was off. During our course release process, we missed the fact that Open Graph metadata for that course page wasn't correctly included. Unfortunately, that meant that _none_ of our posts on social media had the beautiful image previews that we'd expect to see (and by extension would likely see far less engagement).

<Aside>
  <em>Open Graph</em> metadata tells other services what kind of information is
  shown when a URL loads, so that they can create a preview of the URL that
  makes sense. Read more at{' '}
  <a href="https://ogp.me" target="_blank" rel="noopener noreferrer">
    ogp.me
  </a>
  .
</Aside>

Fast forward a short while, and we updated our CMS with the necessary metadata for Open Graph Shares to work correctly. Newly shared links in our team Slack now looked great!

<Image
  publicId="posts/open-graph-cache-reset/slack-after"
  alt="screenshot of a post in slack"
  caption="Screenshot from slack after the fix - our new course was shared with the correct image"
/>
.

## Social networks cache link previews

Rather than redownload the preview image and metadata for a given link every time it's shared, your entire open graph preview is often cached. Depending on the site, that cache may be cleared regularly throughout the day.

Because we had _already_ posted links to our courses, every site we had shared to had cached our shared links with the bare defaults. The result was relatively plain, and not relevant to the content on the page - something like:

`Free online courses on design and web development | Gymnasium`

With Gymnasium's logo beside it. Just defaults! Not a great look.

Because we were working on a concerted marketing push to announce our new courses, these extremely plain previews were bad news. We've seen from experience that having an attractive (and differentiated) share image helps gain traction during the initial publicity of new content.

## _You_ can trigger a cache reset on each of these sites!

After some brief research, we found that there are tools to reset the cache on each of the major social networking sites. They're each extremely easy to use - paste your URL in a box, click a button, and reset the cache if necessary. Here's the ones we found to be useful:

### Use these links

- **Facebook Sharing Debugger**: [https://developers.facebook.com/tools/debug/](https://developers.facebook.com/tools/debug/)
- **LinkedIn Post Inspector**: [https://www.linkedin.com/post-inspector/](https://www.linkedin.com/post-inspector/)
- **Twitter Card Validator**: [https://cards-dev.twitter.com/validator](https://cards-dev.twitter.com/validator)

That's all there is to it! Hit reset, re-share your link, and you should see your latest Open Graph preview shared. Phew! 😅


How to reset your Open Graph embed on LinkedIn, Twitter, and Facebook

Earlier today, we had a problem at [Gymnasium](https://thegymnasium.com).

_You_ can trigger a cache reset on each of these sites!

#seo: 9 posts tagged