Make meta titles short

nuxt/content.config.ts

@@ -100,6 +100,7 @@ export default defineContentConfig({
                 date: z.coerce.date(),
                 authors: z.array(z.string()).optional(),
                 issues: z.array(z.string()).optional(),
+                metaTitle: z.string().optional(),
             })
         }),
         // Source files stay at src/blog/ (11ty's historical location) rather than
@@ -113,6 +114,7 @@ export default defineContentConfig({
             schema: z.object({
                 subtitle: z.string().optional(),
                 description: z.string().optional(),
+                metaTitle: z.string().optional(),
                 date: z.coerce.date(),
                 lastUpdated: z.coerce.date().optional(),
                 authors: z.array(z.string()).optional(),

nuxt/content/handbook/marketing/content-strategy/blog.md

@@ -121,6 +121,21 @@ below more
 
 The title of the page can be seen on both the blog index and the articles.
 
+### Meta Title
+
+`metaTitle` is an optional field that overrides the browser tab title and Open Graph (social share) title — it does not change the on-page `title` shown as the article's H1 or on the blog index.
+
+```yaml
+---
+title: "Building Digital Work Instructions Dashboard for the Shop Floor"
+metaTitle: "Digital Work Instructions Dashboard"
+---
+```
+
+Use it when the on-page `title` is written for readers (descriptive, sometimes long) but doesn't make a good search-result or tab title. When set, it renders as `{metaTitle} | FlowFuse` in both places; when omitted, the browser tab and share title fall back to `{title} • FlowFuse Blog`.
+
+Keep `metaTitle` short and keyword-forward — it's for SEO/CTR in search results and social previews, not for readability on the page itself.
+
 ### Subtitle
 
 The subtitle is only shown on the articles.

nuxt/pages/blog/[...slug].vue

@@ -94,7 +94,7 @@ const tldrText = computed(() => typeof page.value?.tldr === 'string' ? page.valu
 const pageTitle = computed(() => page.value?.title || 'Blog')
 provide('blogPostTitle', pageTitle)
 const pageDescription = computed(() => page.value?.description || page.value?.meta?.description || '')
-const fullTitle = computed(() => `${pageTitle.value} • FlowFuse Blog`)
+const fullTitle = computed(() => page.value?.metaTitle ? `${page.value.metaTitle} | FlowFuse` : `${pageTitle.value} • FlowFuse Blog`)
 const canonicalUrl = computed(() => `https://flowfuse.com${route.path}`)
 const absoluteImage = computed(() => heroImage.value.startsWith('http') ? heroImage.value : `https://flowfuse.com${heroImage.value}`)
 

nuxt/pages/changelog/[...slug].vue

@@ -38,7 +38,7 @@ function issueLabel(issue: string): string {
 }
 
 const pageTitle = computed(() => page.value?.title || 'Changelog')
-const fullTitle = computed(() => `${pageTitle.value} • FlowFuse Changelog`)
+const fullTitle = computed(() => page.value?.metaTitle ? `${page.value.metaTitle} | FlowFuse` : `${pageTitle.value} • FlowFuse Changelog`)
 const canonicalUrl = computed(() => `https://flowfuse.com${route.path}`)
 
 useSeoMeta({

src/_includes/layouts/base.njk

@@ -53,7 +53,9 @@ eleventyComputed:
     {% endif %}
 
     <!-- Browser Title -->
-    {% if navTitle %}
+    {% if metaTitle %}
+    <title>{{ metaTitle }} | FlowFuse</title>
+    {% elif navTitle %}
     <title>{{ navTitle }} &#x2022; FlowFuse{% if page.url and page.url.match('\/handbook\/.+') %} Handbook{% endif %}{% if page.url and page.url.match('\/docs\/.+') %} Docs{% endif %}</title>
     {% elif meta and meta.title %}
     <title>{{ meta.title }} &#x2022; FlowFuse{% if page.url and page.url.match('\/handbook\/.+') %} Handbook{% endif %}{% if page.url and page.url.match('\/docs\/.+') %} Docs{% endif %}</title>
@@ -84,7 +86,9 @@ eleventyComputed:
     {%- endif %}
 
     <!-- Open Graph Title -->
-    {% if navTitle %}
+    {% if metaTitle %}
+    <meta property="og:title" content="{{ metaTitle }} | FlowFuse" />
+    {% elif navTitle %}
     <meta property="og:title" content="{{ navTitle }} &#x2022; FlowFuse{% if page.url and page.url.match('\/handbook\/.+') %} Handbook{% endif %}" />
     {% elif meta and meta.title %}
     <meta property="og:title" content="{{ meta.title }} &#x2022; FlowFuse{% if page.url and page.url.match('\/handbook\/.+') %} Handbook{% endif %}" />

src/blog/2022/10/seed-round-bring-node-red-to-enterprise.md

@@ -1,4 +1,5 @@
 ---
+metaTitle: "FlowFuse Raises $7.25M Seed Round"
 title: FlowFuse raises $7.25M Seed Round to bring Node-RED to the Enterprise
 subtitle: Allowing all developers to integrate IT and OT through low-code
 description: "FlowFuse raises a $7.25M Seed Round from Cota Capital and Open Core Ventures to bring Node-RED to the enterprise market."

src/blog/2022/12/flowforge-1-2-0-released.md

@@ -1,4 +1,5 @@
 ---
+metaTitle: "FlowFuse 1.2: Single Sign On & Context Storage"
 title: FlowFuse 1.2 is now available with single sign on and persistent context storage
 subtitle: Our final release for 2022 with some great new features to try out
 description: "FlowFuse 1.2 is now available with single sign-on and persistent context storage, marking the final release for 2022 overall."

src/blog/2023/01/flowforge-1-3-0-released.md

@@ -1,4 +1,5 @@
 ---
+metaTitle: "FlowFuse 1.3: Share Flows via Team Libraries"
 title: FlowFuse 1.3 is now available, share your flows through our new team libraries and much more
 subtitle: Our first release of 2023 with some great new features to try out, happy new year from everyone at FlowFuse!
 description: "FlowFuse 1.3 is now available. Share your flows through the brand new team libraries, plus much more in this latest release."

src/blog/2023/02/flowforge-1-4-0-released.md

@@ -1,4 +1,5 @@
 ---
+metaTitle: "FlowFuse v1.4: Bulk Device Provisioning"
 title: FlowFuse v1.4 with device provisioning in bulk and staged development process
 subtitle: Our second release of 2023 with some great new features to try out.
 description: Deploy Node-RED to many devices quickly, and allow a staged development process with the latest release of FlowFuse v1.4.

src/blog/2023/03/integration-platform-for-edge-computing.md

@@ -1,4 +1,5 @@
 ---
+metaTitle: "Node-RED: Integration Platform for IIoT Edge"
 title: 'Node-RED: The Integration Platform for IIoT Edge Computing & PLCs'
 subtitle: Node-RED's Role in IIoT Edge Computing & PLC Integration
 description: Discover why Node-RED is the go-to integration platform for IIoT edge computing and PLCs, embraced by leading vendors for its versatility and ease of use.

src/blog/2023/05/device-agent-as-a-service.md

@@ -1,4 +1,5 @@
 ---
+metaTitle: "Running the Device Agent on a Raspberry Pi"
 title: Running the FlowFuse Device Agent as a service on a Raspberry Pi
 subtitle: Step by step guide to run the device agent as a service
 description: "Learn how to run the FlowFuse Device Agent as a service on your Raspberry Pi, ensuring uninterrupted operation after restarts."

src/blog/2023/05/flowforge-1-7-released.md

@@ -1,4 +1,5 @@
 ---
+metaTitle: "FlowFuse 1.7: Remote Node-RED Editor Access"
 title: FlowFuse 1.7 Now Available with Remote Node-RED Editor Access
 subtitle: Further improving fleet management and maintenance of remote Node-RED instances
 description: "FlowFuse 1.7 is now available with remote Node-RED Editor access, letting teams edit flows directly on their own devices."

src/blog/2023/05/integrating-modbus-with-node-red.md

@@ -1,4 +1,5 @@
 ---
+metaTitle: "Integrating a Modbus Device With Node-RED"
 title: "Best Practices Integrating a Modbus Device With Node-RED (2026)"
 subtitle: Integrate Modbus with Node-RED
 description: "Modbus is a widely adopted protocol for legacy manufacturing equipment. Learn best practices for integrating it with Node-RED."

src/blog/2023/06/dashboard-announcement.md

@@ -1,4 +1,5 @@
 ---
+metaTitle: "The Successor to the Node-RED Dashboard"
 title: The Next Step in Data Visualization - Announcing the Successor to the Node-RED Dashboard
 subtitle: FlowFuse's Journey Towards a New Node-RED Dashboard
 description: "FlowFuse unveils its plans to build the successor to the Node-RED Dashboard, the next step in industrial data visualization."

src/blog/2023/07/how-to-build-a-opc-client-dashboard-in-node-red.md

@@ -1,4 +1,5 @@
 ---
+metaTitle: "How to Build an OPC UA Client Dashboard - Part 3"
 title: "How to Build an OPC UA Client Dashboard in Node-RED - Part 3 (2026)"
 subtitle: Interactive OPC UA Client dashboard that communicates with a 3rd party OPC UA Server
 description: Building a Dashboard-Driven OPC UA Client to Browse, Read, Write, and Get Events from a 3rd party OPC UA Server

src/blog/2023/07/how-to-deploy-a-basic-opc-ua-server-in-node-red.md

@@ -1,4 +1,5 @@
 ---
+metaTitle: "Deploy a Basic OPC-UA Server in Node-RED - Part 1"
 title: "How to Deploy a Basic OPC-UA Server in Node-RED - Part 1 (2026)"
 subtitle: OPC-UA Server Information Modeling in Node-RED
 description: "An introduction to OPC-UA and how to deploy a Node-RED server flow, Part 1 of a series on building OPC-UA servers with FlowFuse."

src/blog/2023/07/images-in-node-red-dashboards.md

@@ -1,4 +1,5 @@
 ---
+metaTitle: "Add Images to Node-RED Dashboards"
 title: "How to add images to Node-RED dashboards when using FlowFuse (2026)"
 subtitle: Import your images into your Node-RED dashboards, wherever you are running your instances
 description: Learn to enhance Node-RED dashboards with images using FlowFuse. Pull images from URLs, store locally, and serve them in your dashboards.

src/blog/2023/07/influxdb-historical-data.md

@@ -1,4 +1,5 @@
 ---
+metaTitle: "Historical Data Dashboard with InfluxDB"
 title: Creating a Historical Data Dashboard with InfluxDB and Node-RED
 subtitle: Detailed instructions on how to create a Node-RED dashboard that shows historical data.
 description: Discover how to build a Historical Data Dashboard with InfluxDB and Node-RED. Capture, store, and visualize data for insightful analysis.

src/blog/2023/08/flowfuse-1-11-release.md

@@ -1,4 +1,5 @@
 ---
+metaTitle: "FlowFuse 1.11: Easier Node-RED Setup"
 title: FlowFuse 1.11 makes it easier to get started with FlowFuse and Node-RED
 subtitle: Our latest release includes a new starter tier for FlowFuse Cloud, Personal Access Tokens for API access and improvements to device management.
 description: The new FlowFuse 1.11 release includes a new starter tier for FlowFuse Cloud, Personal Access Tokens for API access and improvements to device management.

src/blog/2023/08/isa-95-automation-pyramid-to-unified-namespace.md

@@ -1,4 +1,5 @@
 ---
+metaTitle: "Why the Automation Pyramid Blocks Transformation"
 title: Why the Automation Pyramid blocks digital transformation - The Role of Unified Namespace
 subtitle: A Critical Examination of the Automation Pyramid's Obstruction to Digital Transformation
 description: "This article analyzes the Automation Pyramid's constraints and explains how Unified Namespace can evolve digital transformation."

src/blog/2023/09/bosch-rexroth-announce.md

@@ -1,4 +1,5 @@
 ---
+metaTitle: "FlowFuse Node-RED Stack for ctrlX AUTOMATION"
 title: FlowFuse announces a Node-RED stack for Industry 4.0 applications on ctrlX AUTOMATION
 subtitle: Rexroth ctrlX now have fully supported Node-RED stack available for production use
 description: FlowFuse is now offering Node-RED to customers that want to deploy it on the Rexrtoh ctrlX platform.

src/blog/2023/10/citizen-development.md

@@ -1,4 +1,5 @@
 ---
+metaTitle: "Why Manufacturing Must Embrace Citizen Developers"
 title: Innovate from within - Why manufacturing must embrace Citizen Developers
 subtitle: Empower your Operational Technology teams as Citizen Developers
 description: "Explore the significance of Citizen Developers in manufacturing, bridging the IT-OT gap with low-code platforms like Node-RED."

src/blog/2023/12/ai-use-cases.md

@@ -1,4 +1,5 @@
 ---
+metaTitle: "Beyond Automation: AI Use Cases in Manufacturing"
 title: Beyond Automation - AI Use Cases that are shaping the next manufacturing frontier
 subtitle: In which AI-powered capabilities should one invest to bring about transformative changes in the manufacturing environment?
 description: Discover how AI is revolutionizing manufacturing with citizen development, demand forecasting, and predictive maintenance

src/blog/2023/12/introduction-to-unified-namespace.md

@@ -1,4 +1,5 @@
 ---
+metaTitle: "Introduction to the Unified Namespace (UNS)"
 title: "Introduction to the Unified Namespace (UNS) – 2026 Updated Guide"
 subtitle: "Making data available for Industry 4.0 use-cases"
 description: Explore how the Unified Namespace (UNS) empowers Industry 4.0 with seamless data exchange, maximizing organizational potential.

src/blog/2024/01/dashboard-2-multi-user.md

@@ -1,4 +1,5 @@
 ---
+metaTitle: "Personalised Multi-user Dashboards with Node-RED"
 title: Personalised Multi-user Dashboards with Node-RED Dashboard 2.0!
 subtitle: Explore how to build multi-user Dashboards, secured with FlowFuse Cloud!
 description: "Discover how to create personalized, secured multi-user dashboards with FlowFuse Cloud and the Dashboard 2.0 User Addon."

src/blog/2024/01/how-to-deploy-node-red-with-flowfuse-to-balenacloud.md

@@ -1,4 +1,5 @@
 ---
+metaTitle: "Deploying Node-RED with FlowFuse in balenaCloud"
 title: Step-by-Step Guide to Deploying Node-RED with FlowFuse in balenaCloud
 subtitle: Fleet management made easier with FlowFuse and balena.
 description: Deploy Node-RED with FlowFuse on balenaCloud effortlessly with our step-by-step guide. Simplify fleet management and enhance data processing capabilities.

src/blog/2024/01/unified-namespace-when-not-to-use.md

@@ -1,4 +1,5 @@
 ---
+metaTitle: "Unified Namespace: When to Use It"
 title: "Unified Namespace: When to Use It, and When to Choose Something Else"
 subtitle: Data isn't created equal, some data doesn't fit the UNS 
 description: "Explore when to use the Unified Namespace (UNS) architecture and when to choose alternatives, covering latency and security."

src/blog/2024/02/professional-services-for-node-red.md

@@ -1,4 +1,5 @@
 ---
+metaTitle: "Invest in Node-RED Professional Services?"
 title: Should You Invest in Professional Services for Your Node-RED Development?
 subtitle: Professional Services for Node-RED, When and Why?
 description: "Discover the benefits of investing in professional services for your Node-RED development, from initial setup to full scaling."

src/blog/2024/03/flowfuse-gallarus-strategic-partnership-to-accelerate-industry-4-adoption.md

@@ -1,4 +1,5 @@
 ---
+metaTitle: "FlowFuse and Gallarus Strategic Partnership"
 title: FlowFuse and Gallarus Announce Strategic Partnership to Accelerate Industry 4.0 Adoption
 subtitle: Strategic partnership to empower businesses with low-code development for Industry 4.0 Transformation
 description: "FlowFuse and Gallarus announce a strategic partnership to accelerate Industry 4.0 adoption across manufacturing operations."

src/blog/2024/03/scaling-node-red-devices-vs-flowfuse-instance.md

@@ -1,4 +1,5 @@
 ---
+metaTitle: "FlowFuse Instance vs Device Instance"
 title: "Scaling Node-RED with FlowFuse: Differences between a FlowFuse Instance and a Device Instance"
 subtitle: Managing your Node-RED instances is easier with FlowFuse.
 description: "With FlowFuse, Node-RED instances can be scaled and managed easily. Learn the difference between an Instance and a Device."

src/blog/2024/04/building-an-admin-panel-in-node-red-with-dashboard-2.md

@@ -1,4 +1,5 @@
 ---
+metaTitle: "How to Build an Admin Dashboard with Node-RED"
 title: "How to Build an Admin Dashboard with Node-RED Dashboard 2.0 (2026)"
 subtitle: A guide to building an Admin Dashboard in Node-RED with Dashboard 2.0
 description: "Discover step-by-step instructions for building an admin-only page in Node-RED Dashboard 2.0 using the FlowFuse Multiuser addon."

src/blog/2024/04/how-to-build-an-application-with-node-red-dashboard-2.md

@@ -1,4 +1,5 @@
 ---
+metaTitle: "Build An Application With Node-RED Dashboard 2.0"
 title: "How to Build An Application With Node-RED Dashboard 2.0 (2026)"
 subtitle: A step-by-step guide to building a personalized, secure, and fully functional application with Dashboard 2.0.
 description: "Learn to build custom applications effortlessly with Node-RED Dashboard 2.0 in this step-by-step, secure application guide."

src/blog/2024/05/flowfuse-2-4-release.md

@@ -1,4 +1,5 @@
 ---
+metaTitle: "FlowFuse 2.4: Easier Snapshots & Blueprints"
 title: "FlowFuse 2.4: making it easier to work with Snapshots, Blueprints & Devices"
 subtitle: Our latest release introduces better ways to work with Snapshots, Blueprints, view the content of you flows in FlowFuse, and manage the version of Node-RED running on Devices
 description: "FlowFuse 2.4 introduces better ways to work with Snapshots and Blueprints, and manage the Node-RED version running on Devices."

src/blog/2024/05/node-red-dashboard-2-layout-navigation-styling.md

@@ -1,4 +1,5 @@
 ---
+metaTitle: "Node-RED Dashboard 2.0 Layout & Styling Guide"
 title: "Comprehensive guide: Node-RED Dashboard 2.0 layout, sidebar, and styling"
 subtitle: Explore Dashboard 2.0 Different layouts and sidebars. learn how to style Dashboard 2.0 elements effortlessly.
 description: "Discover Node-RED Dashboard 2.0's three layouts, five sidebar styles, themes, and custom CSS in this complete styling guide."

src/blog/2024/05/understanding-node-flow-global-environment-variables-in-node-red.md

@@ -1,4 +1,5 @@
 ---
+metaTitle: "Node-RED Variables: Flow, Global & Context"
 title: "How to Use Variables in Node-RED: Flow, Global, Context & Environment (2026)"
 subtitle: A complete guide to setting, retrieving, and persisting Node-RED variables for efficient, production-ready flows.
 description: "Learn how to use Node-RED global, flow, context, and environment variables in 2026, with step-by-step examples and an FAQ."

src/blog/2024/06/dashboard-multi-tenancy.md

@@ -1,4 +1,5 @@
 ---
+metaTitle: "Multi-Tenancy in FlowFuse's Dashboard 2.0"
 title: Multi-Tenancy available for everyone with FlowFuse's Dashboard 2.0
 subtitle: With a recent update in Node-RED Dashboard 2.0, we've made some significant changes to the multi-tenancy feature set. Discover what's new and how it can benefit your projects.
 description: "With a recent Dashboard 2.0 update, discover what's new in multi-tenancy and how it can benefit your team's ongoing projects."

src/blog/2024/06/flowfuse-2-5-release.md

@@ -1,4 +1,5 @@
 ---
+metaTitle: "FlowFuse 2.5: Snapshots & LDAP Integration"
 title: "FlowFuse 2.5: New features to visualize snapshots, LDAP integration, and more"
 subtitle: Enhancing security, visualization, and deployment flexibility.
 description: "Discover the new features in FlowFuse 2.5, including LDAP integration, visual snapshot comparisons, and blueprint previews."

src/blog/2024/07/flowfuse-2-6-release.md

@@ -1,4 +1,5 @@
 ---
+metaTitle: "FlowFuse 2.6: AI Infused Node-RED & More"
 title: "FlowFuse 2.6: AI Infused Node-RED, Persistent File Storage & Lots More"
 subtitle: Lowering the barrier to entry for new users, and enhancing the flexibility and functionality of the platform.
 description: Discover the new features in FlowFuse 2.6, and it's focus on improving the Node-RED development experience.

src/blog/2024/08/comparing-dashboard-2-with-uibuilder.md

@@ -1,4 +1,5 @@
 ---
+metaTitle: "FlowFuse Dashboard vs UI-Builder Compared"
 title: "FlowFuse Dashboard vs UI-Builder: A Comprehensive Comparison"
 subtitle: Understanding the Differences Between FlowFuse Dashboard and UI-Builder
 description: Compare FlowFuse Dashboard and UI-Builder. Discover their installation ease, customization, performance, and support to find the best solution for your needs. 

src/blog/2024/08/dashboard-new-layout-widgets-and-gauges.md

@@ -1,4 +1,5 @@
 ---
+metaTitle: "New Layout, Widgets and Gauges in Dashboard"
 title: New Layout, Widget and Gauges Now Available in FlowFuse Dashboard
 subtitle: Our latest update for FlowFuse Dashboard introduces a new layout type, Tabs, a new widget, Number Input, and two fresh gauges, Battery and Tank Level, along with much more.
 description: "FlowFuse Dashboard adds a new Tabs layout, a Number Input widget, and Battery and Tank Level gauges, plus many more updates."

src/blog/2024/08/opentelemetry-with-node-red.md

@@ -1,4 +1,5 @@
 ---
+metaTitle: "Monitoring Node-RED Flows with Open Telemetry"
 title: "Monitoring and Optimizing Node-RED Flows with Open Telemetry (2026)"
 subtitle: Integrating Open Telemetry with Node-RED for Efficient Distributed Tracing
 description: "Learn to integrate Open Telemetry with Node-RED in 2026 to track, monitor, and optimize your flow's overall performance."

src/blog/2024/08/using-mqtt-sparkplugb-with-node-red.md

@@ -1,4 +1,5 @@
 ---
+metaTitle: "MQTT Sparkplug B Implementation Guide"
 title: "MQTT Sparkplug B Implementation: Protocol, Architecture & Best Practices"
 subtitle: "Standardize and manage industrial IoT data with MQTT Sparkplug B"
 description: "Learn how to implement MQTT Sparkplug B with Node-RED for standardized, reliable Industrial IoT data flows and scalable production deployments."

src/blog/2024/09/flowfuse-release-2-9.md

@@ -1,4 +1,5 @@
 ---
+metaTitle: "FlowFuse 2.9: Software Bill of Materials"
 title: "FlowFuse 2.9: Software Bill of Materials & Public Static Assets"
 subtitle: Let's take a look at the new features and improvements in FlowFuse 2.9
 description: "FlowFuse 2.9 introduces a Software Bill of Materials and Public Static Assets, among other new features and improvements."

src/blog/2024/09/node-red-version-control-with-snapshots.md

@@ -1,4 +1,5 @@
 ---
+metaTitle: "Version Control for Node-RED with Snapshots"
 title: "Using Snapshots for Version Control in Node-RED with FlowFuse"
 subtitle: "Effortlessly manage and recover your Node-RED flows with snapshots in FlowFuse."
 description: "Learn how to use snapshots for version control in Node-RED with FlowFuse, from creating to restoring your flow backups fast."

src/blog/2024/10/dashboard-new-group-type-app-icon-and-charts.md

@@ -1,4 +1,5 @@
 ---
+metaTitle: "Dialogs, Icons and Histograms in Dashboard"
 title: Dialogs, Customizable Icons and Histograms Now Available in FlowFuse Dashboard
 subtitle: Our latest update for FlowFuse Dashboard introduces a new group type, Dialog, a new chart variation, Histogram and customization support for the application icon.
 description: "FlowFuse Dashboard adds a new Dialog group type, a Histogram chart variation, and customization support for the app icon."