DEV Community

sium_hossain
sium_hossain

Posted on • Edited on

6 1

Vue-Nuxt remove html tags from rendered text for SEO

I am trying to add description in <head> tag which is come from backed server via API. But in backend i have rich text editor which is generate text with html tag.
text with html

But i want to add only plain text in description for improving SEO performance. So here is the solution, i think you need it also 😏

In computed section we can declare a function which will responsible for generate plain text from mixed with html tag.



computed:{

        strippedHtml() {
            let regex = /(<([^>]+)>)/ig;

        return this.description.replace(regex, "");
    }


Enter fullscreen mode Exit fullscreen mode

now display it in your template by {{strippedHtml}} 😎
and you can add it also in



 head: {
    title: 'your title',
    meta: [
      {
        hid: 'description',
        name: 'description',
        content: this.strippedHtml
      }
    ],
  }


Enter fullscreen mode Exit fullscreen mode

Thank You 😎

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (3)

Collapse
 
kissu profile image
Konstantin BIFERT

At the end, this one should probably be handled by the backend itself (if possible).
Thanks for the idea tho!

Collapse
 
siumhossain profile image
sium_hossain

you are absolutely right.. But it's fun doing some experiment. right ?

Collapse
 
kissu profile image
Konstantin BIFERT

Regex is always fun. 😉

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more