Skip to content

Commit a23cb2d

Browse files
author
Ondrej Machala
committed
seo: improve page titles, descriptions, and structured data
- Homepage title: 'Screenshot Automation for Documentation | Heroshot' - Add SEO titles to all docs and integration pages - Add keywords meta tags - Expand structured data with author, downloadUrl, keywords - Better descriptions targeting search terms
1 parent 3d24063 commit a23cb2d

File tree

13 files changed

+76
-4
lines changed

13 files changed

+76
-4
lines changed

‎docs/.vitepress/config.ts‎

Lines changed: 43 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,11 @@ import { heroshot } from '../../integrations/shared/vitePlugin';
55

66
const SITE_URL = 'https://heroshot.sh';
77
const SITE_NAME = 'Heroshot';
8+
const SITE_TITLE = 'Heroshot - Screenshot Automation for Documentation';
89
const DEFAULT_DESCRIPTION =
9-
'Free, open-source screenshot automation. Your UI changes constantly. Heroshot updates every screenshot in your docs with a single command.';
10+
'Free, open-source CLI tool that automates documentation screenshots. Define once with a visual picker, regenerate forever with one command. Works with VitePress, Docusaurus, MkDocs, Sphinx, and more.';
11+
const DEFAULT_KEYWORDS =
12+
'screenshot automation, documentation screenshots, automated screenshots, screenshot tool, documentation tool, playwright screenshots, vitepress, docusaurus, mkdocs';
1013
const OG_IMAGE = `${SITE_URL}/screenshots/hero-desktop-light.png`;
1114

1215
export default defineConfig({
@@ -23,6 +26,7 @@ export default defineConfig({
2326
},
2427
},
2528
title: SITE_NAME,
29+
titleTemplate: `:title | ${SITE_NAME}`,
2630
description: DEFAULT_DESCRIPTION,
2731
sitemap: { hostname: SITE_URL },
2832

@@ -33,11 +37,17 @@ export default defineConfig({
3337
.replace(/index\.md$/, '')
3438
.replace(/\.md$/, '.html');
3539

36-
// Get page-specific title and description
40+
// Homepage gets the full branded title, other pages get "Page | Heroshot"
41+
const isHomePage = pageData.relativePath === 'index.md';
3742
const pageTitle = pageData.frontmatter.title || pageData.title;
38-
const fullTitle = pageTitle ? `${pageTitle} | ${SITE_NAME}` : SITE_NAME;
43+
const fullTitle = isHomePage
44+
? pageTitle || SITE_TITLE
45+
: pageTitle
46+
? `${pageTitle} | ${SITE_NAME}`
47+
: SITE_NAME;
3948
const pageDescription =
4049
pageData.frontmatter.description || pageData.description || DEFAULT_DESCRIPTION;
50+
const pageKeywords = pageData.frontmatter.keywords || DEFAULT_KEYWORDS;
4151

4252
// Add dynamic head tags
4353
pageData.frontmatter.head ??= [];
@@ -46,6 +56,8 @@ export default defineConfig({
4656
['link', { rel: 'canonical', href: canonicalUrl }],
4757
// Robots
4858
['meta', { name: 'robots', content: 'index, follow' }],
59+
// Keywords
60+
['meta', { name: 'keywords', content: pageKeywords }],
4961
// Dynamic Open Graph
5062
['meta', { property: 'og:title', content: fullTitle }],
5163
['meta', { property: 'og:description', content: pageDescription }],
@@ -75,16 +87,43 @@ export default defineConfig({
7587
'@context': 'https://schema.org',
7688
'@type': 'SoftwareApplication',
7789
name: SITE_NAME,
90+
alternateName: 'heroshot',
7891
url: SITE_URL,
7992
logo: `${SITE_URL}/favicon-192.png`,
80-
image: `${SITE_URL}/favicon-192.png`,
93+
image: OG_IMAGE,
94+
screenshot: OG_IMAGE,
8195
description: DEFAULT_DESCRIPTION,
8296
applicationCategory: 'DeveloperApplication',
97+
applicationSubCategory: 'Documentation Tools',
8398
operatingSystem: 'Windows, macOS, Linux',
99+
programmingLanguage: 'TypeScript',
100+
runtimePlatform: 'Node.js',
101+
softwareRequirements: 'Node.js 18+',
102+
downloadUrl: 'https://www.npmjs.com/package/heroshot',
103+
installUrl: 'https://www.npmjs.com/package/heroshot',
104+
releaseNotes: 'https://github.com/omachala/heroshot/releases',
105+
keywords:
106+
'screenshot automation, documentation screenshots, automated screenshots, playwright, CLI tool',
84107
offers: {
85108
'@type': 'Offer',
86109
price: '0',
87110
priceCurrency: 'USD',
111+
availability: 'https://schema.org/InStock',
112+
},
113+
author: {
114+
'@type': 'Person',
115+
name: 'Ondrej Machala',
116+
url: 'https://github.com/omachala',
117+
},
118+
maintainer: {
119+
'@type': 'Person',
120+
name: 'Ondrej Machala',
121+
url: 'https://github.com/omachala',
122+
},
123+
sourceOrganization: {
124+
'@type': 'Organization',
125+
name: 'Heroshot',
126+
url: SITE_URL,
88127
},
89128
}),
90129
],

‎docs/docs/cli.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
---
2+
title: CLI Reference - Commands and Options
23
description: Heroshot CLI reference. Commands, options, and flags for screenshot automation from the command line.
34
---
45

‎docs/docs/getting-started.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
---
2+
title: Getting Started - Automated Screenshots in 5 Minutes
23
description: Get started with Heroshot in 5 minutes. Install, pick elements visually, and generate your first automated screenshots.
34
---
45

‎docs/docs/index.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
---
2+
title: What is Heroshot? - Documentation Screenshot Automation
23
description: Heroshot is a free, open-source screenshot automation tool. Define screenshots once with a visual picker, regenerate them forever with one command.
34
---
45

‎docs/docs/integrations/docusaurus.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
---
2+
title: Docusaurus Screenshot Integration
23
description: Use Heroshot with Docusaurus. Auto-refresh screenshots with the Docusaurus plugin integration.
34
---
45

6+
title: Docusaurus Screenshot Integration
7+
58
# Docusaurus
69

710
> Want to see it working? Check out the [full example on GitHub](https://github.com/omachala/heroshot/tree/main/integrations/examples/docusaurus) - a minimal setup you can clone and run.

‎docs/docs/integrations/gitbook.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
---
2+
title: GitBook Screenshot Integration
23
description: Use Heroshot with GitBook. Automated screenshots for GitBook documentation via Git Sync.
34
---
45

6+
title: GitBook Screenshot Integration
7+
58
# GitBook
69

710
[GitBook](https://www.gitbook.com/) is a bit different from the other frameworks here - it's a SaaS platform, not a static site generator. But if you're using Git Sync (where GitBook syncs with your GitHub repo), heroshot works great.

‎docs/docs/integrations/markdown.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
---
2+
title: Markdown Screenshot Integration
23
description: Use Heroshot with plain Markdown. Light/dark mode screenshots for GitHub READMEs and GitLab wikis.
34
---
45

6+
title: Markdown Screenshot Integration
7+
58
# Markdown
69

710
For plain Markdown files (GitHub READMEs, GitLab wikis, or any Markdown renderer), you can use HTML's `<picture>` element to show different images for light and dark modes.

‎docs/docs/integrations/mkdocs.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
---
2+
title: MkDocs Screenshot Integration
23
description: Use Heroshot with MkDocs and Material theme. Generate theme-aware screenshots for Python documentation.
34
---
45

6+
title: MkDocs Screenshot Integration
7+
58
# MkDocs
69

710
> Want to see it working? Check out the [full example on GitHub](https://github.com/omachala/heroshot/tree/main/integrations/examples/mkdocs) - a minimal setup you can clone and run.

‎docs/docs/integrations/react.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
---
2+
title: React Screenshot Component
23
description: Use Heroshot with React. The Heroshot component for automatic light/dark mode and responsive screenshots.
34
---
45

6+
title: React Screenshot Component
7+
58
# React
69

710
React apps using Vite or webpack can use the `<Heroshot>` component to render screenshots with automatic light/dark mode and viewport switching.

‎docs/docs/integrations/sphinx.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
---
2+
title: Sphinx Documentation Screenshots
23
description: Use Heroshot with Sphinx documentation. Theme-aware screenshots that switch with Furo, PyData, and other dark mode themes.
34
---
45

6+
title: Sphinx Documentation Screenshot Integration
7+
58
# Sphinx
69

710
> Want to see it working? Check out the [full example on GitHub](https://github.com/omachala/heroshot/tree/main/integrations/examples/sphinx) - a minimal Furo setup you can clone and run.

0 commit comments

Comments
 (0)