Skip to content

Commit af97519

Browse files
moonrailgunmoonrailgun
committed
refactor: refactor JSON-LD components for improved localization and SEO
1 parent 90b4bd9 commit af97519

5 files changed

Lines changed: 203 additions & 99 deletions

File tree

‎apps/web/src/app/[locale]/page.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Features } from "@/components/landing/features";
33
import { FAQSection } from "@/components/landing/faq-section";
44
import { CTASection } from "@/components/landing/cta-section";
55
import { StarField } from "@/components/landing/starfield";
6-
import { HomepageJsonLd } from "@/components/landing/json-ld";
6+
import { HomepageJsonLd } from "@/components/landing/homepage-json-ld";
77
import { Header } from "@/components/header";
88
import { Footer } from "@/components/footer";
99
import type { Metadata } from "next";
@@ -32,10 +32,16 @@ export const metadata: Metadata = {
3232
],
3333
};
3434

35-
export default async function Home() {
35+
export default async function Home({
36+
params,
37+
}: {
38+
params: Promise<{ locale: string }>;
39+
}) {
40+
const { locale } = await params;
41+
3642
return (
3743
<main className="min-h-svh">
38-
<HomepageJsonLd />
44+
<HomepageJsonLd locale={locale} />
3945
<StarField />
4046
<Header />
4147
<Hero />

‎apps/web/src/app/[locale]/why-not-capcut/json-ld.tsx‎

Lines changed: 62 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,61 @@
1-
"use client";
2-
31
import { SITE_URL } from "@/constants/site-constants";
4-
import { useComparisonFaqItems } from "./comparison-faq";
2+
import { getTranslation } from "@i18next-toolkit/nextjs-approuter/server";
53

6-
export function ComparisonJsonLd() {
7-
const faqItems = useComparisonFaqItems();
4+
export async function ComparisonJsonLd({ locale }: { locale: string }) {
5+
const { t } = await getTranslation(locale);
6+
7+
const faqItems = [
8+
{
9+
question: t("Is Cutia a good alternative to CapCut?"),
10+
answer: t(
11+
"Yes. Cutia is designed as a free, open-source, privacy-first alternative to CapCut. It offers AI-native editing, multi-track timeline, MP4/WebM export, and runs entirely in your browser — no account, no uploads, no watermarks.",
12+
),
13+
},
14+
{
15+
question: t("Does Cutia have the same features as CapCut?"),
16+
answer: t(
17+
"Cutia covers the core editing features most creators need: multi-track timeline, text and sticker overlays, AI image generation, audio transcription, and caption generation. CapCut offers additional advanced features like effects templates and more export formats, but Cutia is rapidly growing as an open-source project.",
18+
),
19+
},
20+
{
21+
question: t("Is Cutia really free with no watermarks?"),
22+
answer: t(
23+
"Yes. Cutia is 100% free with no premium tiers, no subscriptions, and no watermarks on exported videos. It is open-source software that you can use without any restrictions.",
24+
),
25+
},
26+
{
27+
question: t("Does CapCut upload my videos to servers?"),
28+
answer: t(
29+
"Yes. CapCut requires uploading your media files to remote servers for processing and storage. Cutia takes the opposite approach — all media processing happens locally in your browser and your files never leave your device.",
30+
),
31+
},
32+
{
33+
question: t("Can I use Cutia without creating an account?"),
34+
answer: t(
35+
"Yes. Cutia requires no sign-up or login. Just open the website and start editing immediately. Your projects are saved locally in your browser.",
36+
),
37+
},
38+
{
39+
question: t("Is Cutia open source?"),
40+
answer: t(
41+
"Yes. Cutia is fully open source and available on GitHub. You can inspect the code, contribute, fork it, or self-host it on your own server.",
42+
),
43+
},
44+
{
45+
question: t(
46+
"What AI features does Cutia offer compared to CapCut?",
47+
),
48+
answer: t(
49+
"Cutia is AI-native with a built-in AI agent that can edit videos from natural language prompts, AI image generation for creating visuals, and audio transcription for automatic caption generation. These features are integrated into the core editing workflow.",
50+
),
51+
},
52+
{
53+
question: t("Can I use Cutia on a Chromebook?"),
54+
answer: t(
55+
"Yes. Cutia runs entirely in your browser and works on any platform including Chromebooks, shared computers, and tablets — no installation or plugins required.",
56+
),
57+
},
58+
];
859

960
const articleSchema = {
1061
"@context": "https://schema.org",
@@ -82,17 +133,14 @@ export function ComparisonJsonLd() {
82133
],
83134
};
84135

136+
const schemas = [articleSchema, faqSchema, comparisonSchema];
137+
85138
return (
86139
<>
87-
<script type="application/ld+json">
88-
{JSON.stringify(articleSchema)}
89-
</script>
90-
<script type="application/ld+json">
91-
{JSON.stringify(faqSchema)}
92-
</script>
93-
<script type="application/ld+json">
94-
{JSON.stringify(comparisonSchema)}
95-
</script>
140+
{schemas.map((schema, index) => (
141+
// biome-ignore lint: JSON-LD requires dangerouslySetInnerHTML
142+
<script key={index} type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }} />
143+
))}
96144
</>
97145
);
98146
}

‎apps/web/src/app/[locale]/why-not-capcut/page.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,13 +48,19 @@ export const metadata: Metadata = {
4848
},
4949
};
5050

51-
export default function WhyNotCapcutPage() {
51+
export default async function WhyNotCapcutPage({
52+
params,
53+
}: {
54+
params: Promise<{ locale: string }>;
55+
}) {
56+
const { locale } = await params;
57+
5258
return (
5359
<BasePage
5460
title="Why not CapCut?"
5561
description="Cutia is a free, open-source, privacy-first alternative to CapCut. Here's how they compare."
5662
>
57-
<ComparisonJsonLd />
63+
<ComparisonJsonLd locale={locale} />
5864

5965
<section className="flex flex-col gap-4">
6066
<h2 className="text-2xl font-semibold">

‎apps/web/src/components/landing/homepage-json-ld.tsx‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
import { SITE_URL, SOCIAL_LINKS } from "@/constants/site-constants";
2+
import { getTranslation } from "@i18next-toolkit/nextjs-approuter/server";
3+
4+
export async function HomepageJsonLd({ locale }: { locale: string }) {
5+
const { t } = await getTranslation(locale);
6+
7+
const faqItems = [
8+
{
9+
question: t("What is Cutia?"),
10+
answer: t(
11+
"Cutia is an AI-native, open-source video editor that runs entirely in your browser. It is a free, privacy-first alternative to CapCut — no installation or sign-up required, just open the website and start editing.",
12+
),
13+
},
14+
{
15+
question: t("Is Cutia free to use?"),
16+
answer: t(
17+
"Yes, Cutia is completely free. It is open-source software licensed under a permissive license. There are no hidden fees, subscriptions, or premium tiers.",
18+
),
19+
},
20+
{
21+
question: t("Does Cutia upload my files to a server?"),
22+
answer: t(
23+
"All your media files and editing operations stay on your device. However, AI-related features (such as AI image generation) may send data to third-party AI services or Cutia's temporary relay server for processing.",
24+
),
25+
},
26+
{
27+
question: t("What export formats does Cutia support?"),
28+
answer: t(
29+
"Cutia supports exporting videos in MP4 and WebM formats with adjustable quality settings (low, medium, high, and very high).",
30+
),
31+
},
32+
{
33+
question: t("Does Cutia work offline?"),
34+
answer: t(
35+
"Cutia runs in your browser and requires an initial page load. Once loaded, most editing features work without an active internet connection since all processing is done locally.",
36+
),
37+
},
38+
{
39+
question: t("Is Cutia open source?"),
40+
answer: t(
41+
"Yes, Cutia is fully open source and community-driven. You can inspect the source code, contribute, or fork it on GitHub.",
42+
),
43+
},
44+
{
45+
question: t("How is Cutia different from CapCut?"),
46+
answer: t(
47+
"Unlike CapCut, Cutia is fully open source and runs entirely in your browser. Your media files stay on your device — only AI features may communicate with external services. Cutia is AI-native with built-in AI agent, image generation, and audio transcription, with no account or subscription required.",
48+
),
49+
},
50+
];
51+
52+
const webApplicationSchema = {
53+
"@context": "https://schema.org",
54+
"@type": "WebApplication",
55+
name: "Cutia",
56+
url: SITE_URL,
57+
description: t(
58+
"Cutia is an AI-native, open-source video editor that runs entirely in your browser. A free, privacy-first alternative to CapCut with AI-powered editing, multi-track timeline, and MP4/WebM export — no uploads, no tracking.",
59+
),
60+
applicationCategory: "MultimediaApplication",
61+
operatingSystem: "Any (Browser-based)",
62+
browserRequirements: t(
63+
"Requires a modern web browser with WebCodecs support",
64+
),
65+
offers: {
66+
"@type": "Offer",
67+
price: "0",
68+
priceCurrency: "USD",
69+
},
70+
featureList: [
71+
t("AI-native video editing workflow"),
72+
t("AI agent for automated video editing"),
73+
t("AI image generation"),
74+
t("Audio transcription and caption generation"),
75+
t("Multi-track video timeline"),
76+
t("Browser-based video editing"),
77+
t("Privacy-first local processing"),
78+
t("MP4 and WebM export"),
79+
t("Text and sticker overlays"),
80+
t("Drag-and-drop media import"),
81+
],
82+
alternativeFor: "CapCut",
83+
screenshot: `${SITE_URL}/icon.svg`,
84+
softwareVersion: "1.0",
85+
author: {
86+
"@type": "Organization",
87+
name: "Cutia",
88+
url: SITE_URL,
89+
},
90+
};
91+
92+
const organizationSchema = {
93+
"@context": "https://schema.org",
94+
"@type": "Organization",
95+
name: "Cutia",
96+
url: SITE_URL,
97+
logo: `${SITE_URL}/logos/cutia/svg/logo.svg`,
98+
sameAs: [SOCIAL_LINKS.github, "https://x.com/moonrailgun"],
99+
};
100+
101+
const faqSchema = {
102+
"@context": "https://schema.org",
103+
"@type": "FAQPage",
104+
mainEntity: faqItems.map((item) => ({
105+
"@type": "Question",
106+
name: item.question,
107+
acceptedAnswer: {
108+
"@type": "Answer",
109+
text: item.answer,
110+
},
111+
})),
112+
};
113+
114+
const schemas = [webApplicationSchema, organizationSchema, faqSchema];
115+
116+
return (
117+
<>
118+
{schemas.map((schema, index) => (
119+
// biome-ignore lint: JSON-LD requires dangerouslySetInnerHTML
120+
<script key={index} type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }} />
121+
))}
122+
</>
123+
);
124+
}

‎apps/web/src/components/landing/json-ld.tsx‎

Lines changed: 0 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
"use client";
22

3-
import { SITE_URL, SOCIAL_LINKS } from "@/constants/site-constants";
43
import { useTranslation } from "@i18next-toolkit/nextjs-approuter";
54

65
export function useLocalizedFaqItems() {
@@ -51,82 +50,3 @@ export function useLocalizedFaqItems() {
5150
},
5251
];
5352
}
54-
55-
export function HomepageJsonLd() {
56-
const { t } = useTranslation();
57-
const faqItems = useLocalizedFaqItems();
58-
59-
const webApplicationSchema = {
60-
"@context": "https://schema.org",
61-
"@type": "WebApplication",
62-
name: "Cutia",
63-
url: SITE_URL,
64-
description: t(
65-
"Cutia is an AI-native, open-source video editor that runs entirely in your browser. A free, privacy-first alternative to CapCut with AI-powered editing, multi-track timeline, and MP4/WebM export — no uploads, no tracking.",
66-
),
67-
applicationCategory: "MultimediaApplication",
68-
operatingSystem: "Any (Browser-based)",
69-
browserRequirements: t(
70-
"Requires a modern web browser with WebCodecs support",
71-
),
72-
offers: {
73-
"@type": "Offer",
74-
price: "0",
75-
priceCurrency: "USD",
76-
},
77-
featureList: [
78-
t("AI-native video editing workflow"),
79-
t("AI agent for automated video editing"),
80-
t("AI image generation"),
81-
t("Audio transcription and caption generation"),
82-
t("Multi-track video timeline"),
83-
t("Browser-based video editing"),
84-
t("Privacy-first local processing"),
85-
t("MP4 and WebM export"),
86-
t("Text and sticker overlays"),
87-
t("Drag-and-drop media import"),
88-
],
89-
alternativeFor: "CapCut",
90-
screenshot: `${SITE_URL}/icon.svg`,
91-
softwareVersion: "1.0",
92-
author: {
93-
"@type": "Organization",
94-
name: "Cutia",
95-
url: SITE_URL,
96-
},
97-
};
98-
99-
const organizationSchema = {
100-
"@context": "https://schema.org",
101-
"@type": "Organization",
102-
name: "Cutia",
103-
url: SITE_URL,
104-
logo: `${SITE_URL}/logos/cutia/svg/logo.svg`,
105-
sameAs: [SOCIAL_LINKS.github, "https://x.com/moonrailgun"],
106-
};
107-
108-
const faqSchema = {
109-
"@context": "https://schema.org",
110-
"@type": "FAQPage",
111-
mainEntity: faqItems.map((item) => ({
112-
"@type": "Question",
113-
name: item.question,
114-
acceptedAnswer: {
115-
"@type": "Answer",
116-
text: item.answer,
117-
},
118-
})),
119-
};
120-
121-
return (
122-
<>
123-
<script type="application/ld+json">
124-
{JSON.stringify(webApplicationSchema)}
125-
</script>
126-
<script type="application/ld+json">
127-
{JSON.stringify(organizationSchema)}
128-
</script>
129-
<script type="application/ld+json">{JSON.stringify(faqSchema)}</script>
130-
</>
131-
);
132-
}

0 commit comments

Comments
 (0)