SEO with next13
Answered
Cornish Rex posted this in #help-forum
Cornish RexOP
How am I supposed to make the website SEO-friendly with next13? Static paths are not being generated in the next 13. However, we can use a sitemap as per the docs. But does it serve the purpose? What else ways are there to make a website fully SEO-compatible and friendly?
Answered by alfon
using
export function generateStaticParams() { ... } in your dynamic routes39 Replies
How did you come to the conclusion that static paths are not being generated in Next 13?
Cornish RexOP
didn't find it on docs neither does build logs show static paths as it used to in earlier versions
the build logs should show static paths if you configured them to be static
Cornish RexOP
Route (app) Size First Load JS
┌ ○ / 0 B 0 B
├ ○ /about 4.52 kB 131 kB
├ ○ /activities 5.33 kB 114 kB
├ ○ /blogs 5.81 kB 104 kB
├ λ /blogs/[blogId] 4.79 kB 87.7 kB
├ ○ /careers-and-placements 6.5 kB 112 kB
├ ○ /contact 6.09 kB 105 kB
├ λ /courses/[courseId] 7.18 kB 106 kB
├ ○ /favicon.ico 0 B 0 B
├ λ /mail/admin/api 0 B 0 B
├ λ /mail/user-brochure/api 0 B 0 B
├ λ /mail/user-reply/api 0 B 0 B
├ ○ /robots.txt 0 B 0 B
â”” â—‹ /sitemap.xml 0 B 0 B
+ First Load JS shared by all 82.9 kB
├ chunks/656-924efcb4cb30f232.js 5.18 kB
├ chunks/769-397ddc51ebb7ec39.js 25.2 kB
├ chunks/bce60fc1-0912e685fadcd4b8.js 50.5 kB
├ chunks/main-app-1cf254575ed96233.js 217 B
â”” chunks/webpack-782785e6ab70f931.js 1.82 kB
Route (pages) Size First Load JS
─ ○ /404 182 B 74.9 kB
+ First Load JS shared by all 74.8 kB
├ chunks/framework-8883d1e9be70c3da.js 45 kB
├ chunks/main-8b1905979a888b54.js 27.7 kB
├ chunks/pages/_app-998b8fceeadee23e.js 195 B
â”” chunks/webpack-782785e6ab70f931.js 1.82 kB
λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
â—‹ (Static) automatically rendered as static HTML (uses no initial props)there its stated you have 6 static paths
Cornish RexOP
and what about the dynamic routes?
how do I populate them?
dynamic routes are rendered per request. If you want to make them static, you have to use
generateStaticParams() or force them into static using export const dynamic = "force-static"using
export function generateStaticParams() { ... } in your dynamic routesAnswer
then the symbol should change from λ to â—
Cornish RexOP
ohh yes it did when I had tried what you said... but it did not list down the route so i was in doubt
@Cornish Rex ohh yes it did when I had tried what you said... but it did not list down the route so i was in doubt
it should, maybe the return object is incorrect?
Cornish RexOP
export async function generateStaticParams() {
const courses = await getConfig("CoursePages");
return courses?.pages?.pagesList?.map((course: any) => ({
slug: course.id,
}));
}it should show like this
Cornish RexOP
i see... it did not....
i think i will have to fix return object
@Cornish Rex
export async function generateStaticParams() {
const courses = await getConfig("CoursePages");
return courses?.pages?.pagesList?.map((course: any) => ({
slug: course.id,
}));
}
its not slug, it should be the name of the dynamic route
yeah
Cornish RexOP
yes got it
either courseID or blogID
Cornish RexOP
my bad
aight
no problem
Cornish RexOP
also... any other suggestion on how to go about SEO
what should I look up to?
as long as all the data is visible on initial HTML response, it should be good
Cornish RexOP
great
thanks!
go to the network tab and select the first request upon refreshing/accessing the page
Cornish RexOP
okay..
great thanks...
Original message was deleted
Please create a new thread instead of hijacking people's post with your unrelated problems
Cornish RexOP
sorry i didn't know how to mark answer
how do you do it?