@@ -7,6 +7,7 @@ import { __, _n, sprintf } from '@wordpress/i18n';
 import { home, link, seen } from '@wordpress/icons';
 import { useSearch } from '@wordpress/route';
 import { Button, Card, CollapsibleCard, Link, Notice, Stack, Text } from '@wordpress/ui';
+import clsx from 'clsx';
 import CardTitleIcon from '../../components/card-title-icon';
 import StatusIndicator from '../../components/status-indicator';
 import UpsellBanner from '../../components/upsell-banner';
@@ -54,9 +55,9 @@ const platformManagedHelp = __(
 	'This setting is managed by your hosting platform and cannot be changed here.',
 	'jetpack-seo'
 );
-// Figures are what search *displays*, not a limit we enforce — the field is
-// deliberately uncapped. Google measures a pixel width (920px desktop / 680px
-// mobile), which works out around 155 and 120 characters.
+// Figures are what search *displays*, not a limit we enforce. Google measures a
+// pixel width (920px desktop / 680px mobile), which works out around 155 and 120
+// characters.
 //
 // No social figure is quoted on purpose. `functions.opengraph.php` truncates
 // `og:description` at 197, but that happens *before* the `jetpack_open_graph_tags`
@@ -67,6 +68,9 @@ const frontPageHelp = __(
 	'Shown under your site name in search results and social shares. About the first 155 characters display in search, or 120 on mobile.',
 	'jetpack-seo'
 );
+// Keep in step with the 155 quoted in `frontPageHelp`.
+const descriptionSearchLength = 155;
+const descriptionMaxLength = 300;
 
 interface Props {
 	form: SettingsForm;
@@ -159,6 +163,13 @@ const SettingsScreen: FC< Props > = ( { form } ) => {
 	// Count code points, not UTF-16 units, so an emoji or an astral character
 	// counts once rather than twice.
 	const descriptionLength = [ ...local.front_page_description ].length;
+	// `maxLength` caps UTF-16 units, so test the cap in those: an emoji spends two.
+	const descriptionAtMax = local.front_page_description.length >= descriptionMaxLength;
+	const descriptionCount = sprintf(
+		/* translators: %d: number of characters currently in the front-page description. */
+		_n( '%d character', '%d characters', descriptionLength, 'jetpack-seo' ),
+		descriptionLength
+	);
 
 	// Single toggles and single fields are binary — they have no partial state,
 	// so they move straight from not-started to complete.
@@ -200,20 +211,28 @@ const SettingsScreen: FC< Props > = ( { form } ) => {
 						help={ frontPageHelp }
 						value={ local.front_page_description }
 						onChange={ next => setField( { front_page_description: next } ) }
-						maxLength={ 300 }
+						maxLength={ descriptionMaxLength }
 						rows={ 3 }
 						disabled={ isSaving }
 						__nextHasNoMarginBottom
 					/>
-					{ /* Count and Save share a row, matching the title-structure footer. The
-					     count is informational only — nothing here is capped. */ }
+					{ /* Count and Save share a row, matching the title-structure footer. */ }
 					<Stack direction="row" justify="space-between" align="center" gap="sm">
-						<Text variant="body-sm" className={ styles.charCount }>
-							{ sprintf(
-								/* translators: %d: number of characters currently in the front-page description. */
-								_n( '%d character', '%d characters', descriptionLength, 'jetpack-seo' ),
-								descriptionLength
-							) }
+						<Text
+							variant="body-sm"
+							className={ clsx( styles.charCount, {
+								[ styles.charCountWarn ]:
+									descriptionLength > descriptionSearchLength && ! descriptionAtMax,
+								[ styles.charCountMax ]: descriptionAtMax,
+							} ) }
+						>
+							{ descriptionAtMax
+								? sprintf(
+										/* translators: %s: the character count, e.g. "300 characters". */
+										__( '%s — Maximum characters reached.', 'jetpack-seo' ),
+										descriptionCount
+									)
+								: descriptionCount }
 						</Text>
 						<Button
 							onClick={ () => commitFields( [ 'front_page_description' ] ) }
 
@@ -27,6 +27,15 @@
 	font-variant-numeric: tabular-nums;
 }
 
+// Past what search displays, then at the field's cap.
+.charCountWarn {
+	color: var(--wpds-color-foreground-content-warning-weak);
+}
+
+.charCountMax {
+	color: var(--wpds-color-foreground-content-error-weak);
+}
+
 // The "while it's off" list in the Advanced module. Body text, not the muted
 // explainer style — these are consequences to read, not hints about a field.
 // wp-admin's `ul { list-style: none; }` (common.css) strips the markers. It's
 
@@ -218,9 +218,6 @@ describe( 'Settings module completion status', () => {
 		} );
 	} );
 
-	// The count is purely informational — the field is deliberately uncapped,
-	// because the real limits differ per surface (search truncates for display,
-	// Jetpack's own og:description cuts at 197) and none is enforced on this save path.
 	describe( 'Front-page description character count', () => {
 		it( 'counts an empty description as zero, pluralized', () => {
 			render( <SettingsScreen form={ buildForm() } /> );
@@ -237,6 +234,21 @@ describe( 'Settings module completion status', () => {
 			render( <SettingsScreen form={ buildForm( { front_page_description: description } ) } /> );
 			expect( screen.getByText( `${ description.length } characters` ) ).toBeInTheDocument();
 		} );
+
+		it.each( [
+			{ name: '299 letters', description: 'x'.repeat( 299 ), count: 299, atMax: false },
+			{ name: '300 letters', description: 'x'.repeat( 300 ), count: 300, atMax: true },
+			{
+				name: '10 emoji and 280 letters',
+				description: '😀'.repeat( 10 ) + 'x'.repeat( 280 ),
+				count: 290,
+				atMax: true,
+			},
+		] )( 'says whether the maximum is reached with $name', ( { description, count, atMax } ) => {
+			render( <SettingsScreen form={ buildForm( { front_page_description: description } ) } /> );
+			const text = screen.getByText( new RegExp( `^${ count } characters` ) );
+			expect( text.textContent?.includes( 'Maximum characters reached.' ) ).toBe( atMax );
+		} );
 	} );
 
 	describe( 'Site verification — one service is enough', () => {
 
@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Settings: Warn when the front-page description runs longer than search results display, and say when it reaches the maximum length.
@@ -0,0 +1,4 @@
+Significance: patch
+Type: enhancement
+
+SEO: Warn when the front-page description runs longer than search results display, and say when it reaches the maximum length.