DEV Community

sium_hossain
sium_hossain

Posted on β€’ Edited on

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 😎

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. πŸ˜‰