Fix: HTML leaking into meta description tags

[daniellefrappier18]

What are the relevant tickets?

Fixes https://github.com/mitodl/hq/issues/12700

Description (What does it do?)

Resource descriptions can contain HTML (e.g. <p>, <a>, &), which was leaking directly into <meta name="description">, og:description, and twitter:description. The previous approach only stripped closing tags via regex, leaving opening tags and HTML entities intact.

• Adds htmlToPlainText (frontends/main/src/common/utils.ts), which inserts a space at block-level boundaries (<p>, <div>, <li>,<h1>-<h6>, <br>) before stripping all tags via DOMPurify, so adjacent paragraphs/list items aren't mashed together, and decodes entities via .textContent.
• Wires it into standardizeMetadata so all description-based meta tags get plain text.
• Removes the old regex-only stripping in getMetadataAsync, now handled centrally by standardizeMetadata.

Screenshots (if appropriate):

• Desktop screenshots
  BEFORE

AFTER

• Mobile width screenshots

How can this be tested?

Using the same two examples from #3721

• For example: /podcast/15925/trash-talking — "&" should render properly instead of &
• For example: /podcast/17779/lock-the-quill — paragraphs should render as formatted text instead of showing literal

  tags

• Manually verify a resource with an HTML description renders clean text in page source <meta name="description">, og:description, and twitter:description

Additional Context

[github-actions]

OpenAPI Changes

No changes detected

View full changelog

Unexpected changes? Ensure your branch is up-to-date with main (consider rebasing).

[Copilot]

Pull request overview

This PR prevents HTML markup and entities from leaking into SEO/social meta description fields by converting description content to plain text during metadata standardization.

Changes:

• Added htmlToPlainText helper to strip tags, preserve block boundaries with spacing, and decode HTML entities.
• Updated standardizeMetadata to apply htmlToPlainText so description, og:description, and twitter:description are consistently plain text.
• Removed the previous regex-only stripping from getMetadataAsync and added/expanded unit tests for the new behavior.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File	Description
frontends/main/src/common/utils.ts	Adds htmlToPlainText (uses DOMPurify + block-boundary spacing) and exports it.
frontends/main/src/common/utils.test.ts	Adds unit tests covering tag stripping, entity decoding, and spacing behavior.
frontends/main/src/common/metadata.ts	Routes all metadata descriptions through htmlToPlainText via standardizeMetadata; removes old regex stripping.
frontends/main/src/common/metadata.test.ts	Adds a test ensuring all description fields are converted to plain text.

[zamanafzal]

BLOCK_BOUNDARY_TAGS covers p / div / li / h1-6 / br but not table cells (</td>, </th>), </blockquote>, or </pre>
How about adding them to the regex?

const BLOCK_BOUNDARY_TAGS =
  /<\/(?:p|div|li|h[1-6]|td|th|tr|blockquote|pre)>|<br\s*\/?>/gi

[daniellefrappier18]

Good catch, added those. Also threw tr in there too just in case, and added a couple tests to cover table cells and blockquote/pre.

[zamanafzal]

LGTM