Skip to content

Commit 4b33a02

Browse files
richiemcilroyrichiemcilroy
committed
Add how-to-screen-record page & SEO updates
1 parent 842cee8 commit 4b33a02

9 files changed

Lines changed: 448 additions & 107 deletions

File tree

‎apps/web/app/(site)/(seo)/how-to-screen-record/page.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import type { Metadata } from "next";
2+
import { HowToScreenRecordPage } from "@/components/pages/seo/HowToScreenRecordPage";
3+
4+
export const metadata: Metadata = {
5+
title: "How to Screen Record on Mac, Windows & Chrome (2026 Guide) | Cap",
6+
description:
7+
"Learn how to screen record with audio on Mac, Windows, and Chrome. Free step-by-step guide covering built-in tools and Cap, the open-source screen recorder.",
8+
openGraph: {
9+
title: "How to Screen Record on Mac, Windows & Chrome (2026 Guide) | Cap",
10+
description:
11+
"Learn how to screen record with audio on any platform. Step-by-step instructions for macOS, Windows, and Chrome with free and paid options.",
12+
url: "https://cap.so/how-to-screen-record",
13+
siteName: "Cap",
14+
images: [
15+
{
16+
url: "https://cap.so/og.png",
17+
width: 1200,
18+
height: 630,
19+
alt: "How to Screen Record — Complete 2026 Guide by Cap",
20+
},
21+
],
22+
locale: "en_US",
23+
type: "article",
24+
},
25+
twitter: {
26+
card: "summary_large_image",
27+
title: "How to Screen Record on Mac, Windows & Chrome (2026 Guide) | Cap",
28+
description:
29+
"Learn how to screen record with audio on Mac, Windows, and Chrome. Free step-by-step guide.",
30+
images: ["https://cap.so/og.png"],
31+
},
32+
alternates: {
33+
canonical: "https://cap.so/how-to-screen-record",
34+
},
35+
};
36+
37+
export default function Page() {
38+
return <HowToScreenRecordPage />;
39+
}

‎apps/web/app/(site)/(seo)/screen-recorder-windows/page.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,31 @@ import type { Metadata } from "next";
22
import { ScreenRecordWindowsPage } from "@/components/pages/seo/ScreenRecordWindowsPage";
33

44
export const metadata: Metadata = {
5-
title: "Best Screen Recorder for Windows: Easy, Powerful & Free (2025)",
5+
title: "Best Free Screen Recorder for Windows 10 & 11 | Cap",
66
description:
7-
"Cap is the best screen recorder for Windows, offering HD quality recording, unlimited free usage, and seamless sharing. A perfect OBS alternative for tutorials, presentations, and more.",
7+
"Record your screen on Windows with Cap — free, open-source screen recorder with HD video, audio, webcam overlay, and instant sharing. No watermarks. Works on Windows 10 & 11.",
88
openGraph: {
9-
title: "Best Screen Recorder for Windows: Easy, Powerful & Free (2025)",
9+
title: "Best Free Screen Recorder for Windows 10 & 11 | Cap",
1010
description:
11-
"Cap is the best screen recorder for Windows, offering HD quality recording, unlimited free usage, and seamless sharing. A perfect OBS alternative for tutorials, presentations, and more.",
11+
"Record your screen on Windows with Cap — free, open-source screen recorder with HD video, audio, webcam overlay, and instant sharing. No watermarks. Works on Windows 10 & 11.",
1212
url: "https://cap.so/screen-recorder-windows",
1313
siteName: "Cap",
1414
images: [
1515
{
1616
url: "https://cap.so/og.png",
1717
width: 1200,
1818
height: 630,
19-
alt: "Cap: Best Screen Recorder for Windows",
19+
alt: "Cap: Best Free Screen Recorder for Windows",
2020
},
2121
],
2222
locale: "en_US",
2323
type: "website",
2424
},
2525
twitter: {
2626
card: "summary_large_image",
27-
title: "Best Screen Recorder for Windows | Cap",
27+
title: "Best Free Screen Recorder for Windows 10 & 11 | Cap",
2828
description:
29-
"Cap is the best screen recorder for Windows, offering HD quality recording, unlimited free usage, and seamless sharing. A perfect OBS alternative for tutorials, presentations, and more.",
29+
"Record your screen on Windows with Cap — free, open-source screen recorder with HD video, audio, webcam overlay, and instant sharing. No watermarks.",
3030
images: ["https://cap.so/og.png"],
3131
},
3232
};

‎apps/web/app/(site)/tools/convert/webm-to-mp4/page.tsx‎

Lines changed: 146 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -4,86 +4,196 @@ import { ToolsPageTemplate } from "@/components/tools/ToolsPageTemplate";
44
import type { ToolPageContent } from "@/components/tools/types";
55

66
export const metadata: Metadata = {
7-
title: "WebM to MP4 Converter | Free Online Video Converter | Cap",
7+
title: "WebM to MP4 Converter — Free Online Video Converter | Cap",
88
description:
9-
"Convert WebM videos to MP4 format directly in your browser with our free online converter. No uploads, no installation, 100% private.",
9+
"Convert WebM to MP4 online free — no upload, no install, 100% in-browser. Fast, private WebM to MP4 conversion with quality preservation.",
1010
openGraph: {
11-
title: "WebM to MP4 Converter | Free Online Video Converter",
11+
title: "WebM to MP4 Converter — Free Online Video Converter | Cap",
1212
description:
13-
"Convert WebM videos to MP4 format directly in your browser. No uploads required, processing happens locally for maximum privacy.",
13+
"Convert WebM to MP4 directly in your browser. No uploads, no installs, no quality loss. Free and private.",
14+
url: "https://cap.so/tools/convert/webm-to-mp4",
15+
siteName: "Cap",
1416
images: [
1517
{
16-
url: "/og.png",
18+
url: "https://cap.so/og.png",
1719
width: 1200,
1820
height: 630,
19-
alt: "Cap WebM to MP4 Converter Tool",
21+
alt: "Cap WebM to MP4 Converter — Free Online Video Converter",
2022
},
2123
],
24+
locale: "en_US",
25+
type: "website",
2226
},
2327
twitter: {
2428
card: "summary_large_image",
25-
title: "WebM to MP4 Converter | Free Online Video Converter",
29+
title: "WebM to MP4 Converter — Free Online Video Converter | Cap",
2630
description:
27-
"Convert WebM videos to MP4 format directly in your browser. No uploads required, processing happens locally for maximum privacy.",
28-
images: ["/og.png"],
31+
"Convert WebM to MP4 directly in your browser. No uploads, no installs, no quality loss. Free and private.",
32+
images: ["https://cap.so/og.png"],
33+
},
34+
alternates: {
35+
canonical: "https://cap.so/tools/convert/webm-to-mp4",
36+
},
37+
};
38+
39+
const faqs = [
40+
{
41+
question: "How do I convert WebM to MP4?",
42+
answer:
43+
"Open the Cap WebM to MP4 converter, drag and drop your WebM file (or click to browse), then hit Convert. The entire process runs in your browser using WebCodecs — your file never leaves your device. Once complete, download the MP4 instantly.",
44+
},
45+
{
46+
question: "Is WebM to MP4 conversion free?",
47+
answer:
48+
"Yes, completely free with no limits on the number of conversions. There are no watermarks, no sign-up required, and no hidden fees. The converter runs entirely in your browser at zero cost.",
49+
},
50+
{
51+
question: "Can I convert WebM to MP4 without losing quality?",
52+
answer:
53+
"Yes. The converter uses browser-native WebCodecs to re-encode the video, preserving the original resolution, frame rate, and audio quality. The output MP4 uses the widely supported H.264 codec for maximum compatibility.",
54+
},
55+
{
56+
question: "What is the difference between WebM and MP4?",
57+
answer:
58+
"WebM is an open-source format developed by Google, primarily used for web video with VP8/VP9 codecs. MP4 is the most universally supported video format, using H.264/H.265 codecs. While WebM offers good compression for the web, MP4 is compatible with virtually every device, media player, and social media platform.",
59+
},
60+
{
61+
question: "Why convert WebM to MP4?",
62+
answer:
63+
"WebM files are not supported by many devices, video editors, and social media platforms. Converting to MP4 ensures your video plays on iPhones, Android phones, Windows, macOS, smart TVs, and can be uploaded to platforms like Instagram, TikTok, and WhatsApp without issues.",
64+
},
65+
{
66+
question: "Is there a file size limit?",
67+
answer:
68+
"The converter supports files up to 500 MB to ensure smooth in-browser performance. For larger files, consider using a desktop application like Cap for screen recording and exporting directly to MP4.",
69+
},
70+
{
71+
question: "Does this converter work on mobile?",
72+
answer:
73+
"The converter works best on desktop browsers (Chrome, Edge, Brave) that support WebCodecs. Mobile browser support for WebCodecs is still limited, so desktop is recommended for reliable conversions.",
74+
},
75+
{
76+
question: "Do I need to install any software?",
77+
answer:
78+
"No. The converter runs entirely in your browser — no downloads, no plugins, no extensions. Just open the page and start converting. Your files are processed locally on your device for maximum privacy.",
79+
},
80+
];
81+
82+
const howToSteps = [
83+
{
84+
name: "Upload your WebM file",
85+
text: "Open the Cap WebM to MP4 converter and drag and drop your WebM file into the upload area, or click to browse your files.",
86+
},
87+
{
88+
name: "Start the conversion",
89+
text: "Click the Convert button. The file is processed entirely in your browser using WebCodecs — nothing is uploaded to any server.",
90+
},
91+
{
92+
name: "Download your MP4",
93+
text: "Once the conversion finishes, click Download to save the MP4 file to your device. The output preserves the original video quality.",
94+
},
95+
];
96+
97+
const faqStructuredData = {
98+
"@context": "https://schema.org",
99+
"@type": "FAQPage",
100+
mainEntity: faqs.map((faq) => ({
101+
"@type": "Question",
102+
name: faq.question,
103+
acceptedAnswer: {
104+
"@type": "Answer",
105+
text: faq.answer,
106+
},
107+
})),
108+
};
109+
110+
const howToStructuredData = {
111+
"@context": "https://schema.org",
112+
"@type": "HowTo",
113+
name: "How to Convert WebM to MP4 Online",
114+
description:
115+
"Convert WebM video files to MP4 format for free using Cap's browser-based converter. No upload required.",
116+
step: howToSteps.map((step, index) => ({
117+
"@type": "HowToStep",
118+
position: index + 1,
119+
name: step.name,
120+
text: step.text,
121+
})),
122+
tool: {
123+
"@type": "HowToTool",
124+
name: "A modern web browser (Chrome, Edge, or Brave recommended)",
29125
},
30126
};
31127

32128
export default function WebmToMp4Page() {
33129
const pageContent: ToolPageContent = {
34130
title: "WebM to MP4 Converter",
35-
description: "Convert WebM videos to MP4 format directly in your browser",
36-
featuresTitle: "Features",
131+
description:
132+
"Convert WebM to MP4 directly in your browser — free, private, and no installation required",
133+
featuresTitle: "Why Use This WebM to MP4 Converter",
37134
featuresDescription:
38-
"Our free online converter offers several advantages over other conversion services:",
135+
"A fast, free, and private way to convert WebM videos to MP4 format — entirely in your browser.",
39136
features: [
40137
{
41-
title: "100% Private",
138+
title: "100% Browser-Based",
42139
description:
43-
"Your files never leave your device. All processing happens right in your browser.",
140+
"The entire conversion runs locally in your browser using WebCodecs. No server uploads, no waiting for processing queues — just instant conversion on your device.",
44141
},
45142
{
46-
title: "No Installation Required",
143+
title: "Complete Privacy",
47144
description:
48-
"No need to download or install any software. Just open the page and start converting.",
145+
"Your files never leave your device. Unlike other online converters that upload your video to their servers, this tool processes everything client-side for maximum privacy and security.",
49146
},
50147
{
51-
title: "High Quality Conversion",
148+
title: "Quality Preservation",
52149
description:
53-
"We use browser technology to ensure high-quality and fast conversion results.",
150+
"The converter maintains the original resolution, frame rate, and audio quality of your WebM file. The output uses H.264 encoding for broad compatibility without sacrificing clarity.",
54151
},
55-
],
56-
faqs: [
57152
{
58-
question: "How does the WebM to MP4 converter work?",
59-
answer:
60-
"Our converter uses Remotion (remotion.dev) directly in your browser. When you upload a WebM file, it gets processed locally on your device and converted to MP4 format without ever being sent to a server.",
153+
title: "No Installation Needed",
154+
description:
155+
"No software downloads, browser extensions, or plugins required. Just open the page and start converting — works instantly on Chrome, Edge, and Brave.",
61156
},
62157
{
63-
question: "Is there a file size limit?",
64-
answer:
65-
"Yes, currently we limit file sizes to 500MB to ensure smooth performance in the browser. For larger files, you might need to use a desktop application.",
158+
title: "Universal Compatibility",
159+
description:
160+
"MP4 with H.264 is the most widely supported video format. Your converted file will play on iPhones, Android, Windows, macOS, smart TVs, and every major social media platform.",
66161
},
67162
{
68-
question: "Why should I use this converter instead of others?",
69-
answer:
70-
"Unlike many online converters that require uploading your files to their servers, our tool processes everything locally. This means your files never leave your device, providing maximum privacy and security.",
163+
title: "Fast Conversion Speed",
164+
description:
165+
"Leverages hardware-accelerated WebCodecs for fast encoding. Most files convert in seconds, not minutes — without the bottleneck of uploading and downloading from a server.",
71166
},
72167
],
168+
faqs,
73169
cta: {
74170
title: "Cap is the open source Loom alternative",
75171
description:
76-
"Record, edit, and share video messages with Cap. 100% open source and privacy focused.",
172+
"Record, edit, and share video messages with Cap. 100% open source and privacy focused. Export directly to MP4 — no conversion needed.",
77173
buttonText: "Download Cap Free",
78174
},
79175
};
80176

81177
return (
82-
<ToolsPageTemplate
83-
content={pageContent}
84-
toolComponent={
85-
<MediaFormatConverter initialConversionPath="webm-to-mp4" />
86-
}
87-
/>
178+
<>
179+
<script
180+
type="application/ld+json"
181+
dangerouslySetInnerHTML={{
182+
__html: JSON.stringify(faqStructuredData),
183+
}}
184+
/>
185+
<script
186+
type="application/ld+json"
187+
dangerouslySetInnerHTML={{
188+
__html: JSON.stringify(howToStructuredData),
189+
}}
190+
/>
191+
<ToolsPageTemplate
192+
content={pageContent}
193+
toolComponent={
194+
<MediaFormatConverter initialConversionPath="webm-to-mp4" />
195+
}
196+
/>
197+
</>
88198
);
89199
}

‎apps/web/components/pages/seo/FreeScreenRecorderPage.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export const freeScreenRecorderContent = {
4747
{
4848
title: "Creating Tutorials",
4949
description:
50-
"Easily record and share tutorials without paying for premium priced recording software.",
50+
"Easily record and share tutorials without paying for premium-priced recording software. Works great as a <a href='/screen-recorder-windows'>free Windows screen recorder</a> and on Mac.",
5151
},
5252
{
5353
title: "Professional Presentations",
@@ -76,7 +76,7 @@ export const freeScreenRecorderContent = {
7676
{
7777
question: "How long can I record for on the free plan?",
7878
answer:
79-
"Cap's free plan allows for unlimited recording time, so you can capture your screen without interruptions. Whether you're on <a href='/screen-recorder-mac'>Mac</a> or Windows, there are no time limits.",
79+
"Cap's free plan allows for unlimited recording time, so you can capture your screen without interruptions. Whether you're on <a href='/screen-recorder-mac'>Mac</a> or <a href='/screen-recorder-windows'>Windows</a>, there are no time limits.",
8080
},
8181
{
8282
question: "Can I store my recordings in the cloud?",

‎apps/web/components/pages/seo/ScreenRecordMacPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export const screenRecordMacContent = {
2626
{
2727
title: "User-Friendly Interface",
2828
description:
29-
"Designed for ease of use on Mac, Cap offers an intuitive setup and simple recording options.",
29+
"Designed for ease of use on Mac, Cap offers an intuitive setup and simple recording options. Follow our <a href='/how-to-screen-record'>step-by-step screen recording guide</a> to start capturing your screen in minutes.",
3030
},
3131
{
3232
title: "Unlimited Recording Time",

0 commit comments

Comments
 (0)