BulkMeta

BulkMeta is a free Webflow Designer extension for editing SEO and Open Graph metadata faster. It's built for page-by-page edits and bulk updates, with dynamic page-name templates, image selection from Webflow Assets, and CSV import/export.

Features

• ✏️ Edit SEO title and meta description for individual Webflow pages
• 🔄 Bulk edit selected pages with dynamic {page} title templates
• ✅ Include or exclude pages before bulk updates
• 🔗 Sync Open Graph title and description from SEO fields
• 🖼️ Choose an Open Graph image from Webflow Assets or paste an image URL
• 🔍 Search pages by page name
• 📊 Sort pages by SEO status, grouped order, A-Z, or Z-A
• 📥 Import and export page metadata as CSV
• 🌓 Light and dark theme support
• ⚡ Inline save status with a warning to keep Webflow Page Settings closed while saving

Requirements

• Webflow account with Designer access
• Modern browser (Chrome, Safari, Firefox, Edge)

Installation

BulkMeta is available as a Webflow Designer Extension. Learn how to install it in your Webflow workspace.

Tech Stack

• React 19 — UI framework
• TypeScript 5.7 — Type safety
• Vite 6 — Build tool
• Webflow Designer Extension API — Extension runtime
• Lucide React — Icon library

Development

Prerequisites

• Node.js 18+
• npm

Local Setup

1. Clone the repository:

   git clone https://github.com/kmbashar/bulkmeta.git
   cd bulkmeta

2. Install dependencies:

   npm install

3. Run the app locally in Webflow Designer:

   npm run webflow:dev

   This builds the app, watches for changes, and serves the Webflow extension locally on port 1337.

Build Commands

Development build with watch mode:

npm run build:watch

Production build:

npm run build

Preview production build:

npm run preview

Create Webflow bundle for distribution:

npm run webflow:bundle

The generated bundle.zip is the file to upload to the Webflow app dashboard.

Project Structure

src/
  main.tsx      Main app component, Webflow API integration, and logic
  styles.css    UI styling, themes, layout, and component states
public/
  bulkseo-free-icon.png  App icon
webflow.json          Webflow extension manifest
package.json          Dependencies and scripts

How It Works

BulkMeta runs as a Designer Extension inside Webflow's Designer interface. When you use the app:

1. Load pages — BulkMeta fetches all pages from your Webflow site
2. Edit metadata — Make changes to SEO and Open Graph fields in BulkMeta
3. Preview — See how bulk edits will apply using the {page} token
4. Save — Click save to write changes directly to Webflow via the Designer Extension API

Important: During saving, keep Webflow's native Page Settings panel closed to avoid conflicts.

Contributing

Contributions are welcome! Please see CONTRIBUTING.md for guidelines on:

• Reporting bugs
• Suggesting features
• Setting up the development environment
• Submitting pull requests

Code of Conduct

This project adheres to the Contributor Covenant. By participating, you are expected to uphold this code.

License

BulkMeta is licensed under the MIT License. See LICENSE for details.

Security

If you discover a security vulnerability, please see SECURITY.md for responsible disclosure.

Support

• 📖 Read the README
• 🐛 Report a bug
• 💡 Request a feature
• 📝 Check the changelog

Acknowledgments

Built with React, TypeScript, and Vite.

---

Made with ❤️ for Webflow users