Next.js serves files in the public directory using paths that mirror its directory structure. For example, an image at public/images/my-name is available at /images/my-name. The presenter also shows a folder of favicons for different browsers and platforms.
Managing Assets and SEO
Leerob, the presenter of Learn Next.js, explains how to manage assets and improve SEO in a Next.js application.
ImageOptim and ImageAlpha can compress PNG, JPEG, and GIF files, and the presenter runs them through package scripts before committing. Keeping images in the repository can make cloning and updates take longer, while using a CMS may provide image hosting and optimization. Smaller images can improve page load time, which the presenter links to search ranking.
Open Graph and other meta tags in the document head help search engines and social platforms interpret a page. The examples include descriptions, titles, URLs, featured images, dates, and Twitter-specific tags. Facebook's Sharing Debugger, Twitter's Card Validator, and the OG Image Preview extension can show how those tags are parsed.
A custom Next.js Document can include the Google Tag Manager script and a site's tracking ID so analytics runs on server-served pages. SEO Minion can inspect headings, metadata, broken links, and search previews. Accessibility Insights and Lighthouse can check accessibility, performance, best practices, and SEO.
Takeaways
- Use the public directory to serve static assets at predictable URL paths.
- Compress images before committing them, or consider a CMS that handles optimization.
- Set page-specific metadata so search and social previews show the intended title, description, and image.
- Use heading structure and link checks to catch on-page SEO issues.
- Run Lighthouse and accessibility checks to identify improvements in performance and usability.
Mentioned in this talk
Search inside this talk
What was claimed 10
- feature
Next.js: The public directory serves files at URLs matching their directory structure.“Public exposes all of these files in the same directory structure as pages.”
YouTube Unverified1 source· Talk
- featureImageAlpha: Compresses and optimizes image files.
“help you compress and optimize PNGs, JPEGs, and GIFs”
YouTube Unverified1 source· Talk
- featureImageOptim: Compresses and optimizes image files.
“help you compress and optimize PNGs, JPEGs, and GIFs”
YouTube Unverified1 source· Talk
- featureOpen Graph: Provides tags that help control how content is displayed when crawled or shared.
“Open Graph is a standard that lets you insert tags into the head of your HTML document.”
YouTube Unverified1 source· Talk
- featureCard Validator: Previews how content appears when shared on Twitter.
“showing what it will look like when someone shares your tweet”
YouTube Unverified1 source· Talk
- featureSharing Debugger: Previews how a URL appears when shared on Facebook and shows parsed metadata.
“enter any URL and see what it looks like when someone shares it on Facebook”
YouTube Unverified1 source· Talk
- featureOG Image Preview: Shows social previews and the raw tags parsed from a page.
“It shows you Facebook, Twitter, and a couple of other platforms”
YouTube Unverified1 source· Talk
- featureSEO Minion: Checks on-page SEO, Open Graph tags, broken links, and search result previews.
“We can use this to parse the on-page SEO and access the Open Graph tags.”
YouTube Unverified1 source· Talk
