Generate self-closing tags for meta elements

[jscottsf]

Upon generating meta tags for Open Graph Protocol, we ran into a situation where some crawler/parsers may be sensitive to the fact that the generated meta tags are not closed. I am working with a LinkedIn tech on this right now as their crawler is picky and wants closed tags (or self-closing tags)

So this is preferred:

<meta data-n-head="true" content="My content" property="og:description" />

Versus what Nuxt generates:

<meta data-n-head="true" content="My content" property="og:description">

Maybe there is a setting somewhere that I'm missing and this isn't an issue. Let me know. Thx!

_{This question is available on Nuxt.js community (#c786)}

[pi0]

Hi. Thanks for report. I think this problem would be resolved in vue-meta if necessary. Anyway as far as I've found it is stated that:

It depends on the doctype. HTML5 doesn't need the closing. XHTML does.

In HTML5, so-called void elements (elements that can't have content) don't need the closing, as they are self-closing. But it is still valid if you close them..

https://www.w3.org/TR/html5/syntax.html#void-elements

So HTML5 standard accepts void tags not self closing but is only breaking XHTML5 :)

/ping @atinux @declandewet

[jscottsf]

This make total sense, although, it seems I'm getting caught in the middle of a more philosophical discussion since a LinkedIn front end dev would like us to use XHTML as it seems. Just to make their crawler happy? Basically, they seem to be guessing as to "how" the Open Graph meta tags are parsed. Seeing that our Nuxt generated site is using HTML5, not XHTML, they are suspicious - without knowing the real cause. Feel free to close this issue - as I was wondering if there was an easy way to generate XHTML to make LinkedIn less paranoid to the cause of the tags not being recognized. FYI, Facebook finds Nuxt generated Open Graph meta tags VALID!

[pi0]

@jscottsf Being LinkedIn SEO friendly is important for Nuxt too. Are you using any special online tool that fails tests for nuxt + linkedIn ? Or any official way contact their dev for talking on this?
Again thanks for your help.

[jscottsf]

Sadly, LinkedIn has no validator like Facebook does. This is the MAJOR pain point with them. I've actually got a direct line to their dev channel now and they are sending me links to OGP http://ogp.me and saying that the tags should be closed (valid XHTML). I'll look into Vue Meta, tho it seems MAYBE they want an XHTML site. No real idea how to handle this right now.

[pi0]

They are sending me links to OGP http://ogp.me and saying that the tags should be closed (valid XHTML)

That's a shame devs from a big company just insist that we assuming that example as a Standard, while Who made that standard (FB) + W3 are just telling it is valid !!

No real idea how to handle this right now.

If currently you just want adding some static meta tags into head, you may directly curomize app.html by putting it into srcDir like here

After all will try to contact them one some public channel like twitter about that.

PS: Feel free closing this issue & thanks for information

[jscottsf]

Thank you for the tips! Yeah, the jury is still out on a lot of it. They are digging into the guts of their crawler trying to see why it's not picking up the tags. It may be a caching issue on their side. I just had the whole HTML5 versus XHTML discussion and they had some confusion/assumption it seems on whether the meta tags should be closed (since all of the OGP examples show them this way). The fact is, HTML5 can do either, and is the latest and greatest. They seem to be uncertain what is really needed by the crawler, and hence the confusion. Anyway, Nuxt is awesome and appreciated. Thank you so much!

[jscottsf]

Quick update. The LinkedIn support docs were bifurcated and misleading. OGP on LinkedIn is now WORKING!

I took your advice and created an app.html file and customized the meta and html elements. I love Nuxt!

What's known

• You must follow these instructions: https://developer.linkedin.com/docs/share-on-linkedin
• Do NOT follow these instructions: https://www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareable-on-linkedin?lang=en
• You need the meta tags
• You need an HTML prefix attribute prefix="og: http://ogp.me/ns#"
• The site can be HTML5
• LinkedIn does not have any self-service OGP tools, so you must wait for the crawler.

What's not known

(i.e. these require further experimentation.)

• Do the meta tags need to be closed?
• Does removing the data- properties help?

[pi0]

@jscottsf REALLY thanks for helping and your information.

You need an HTML prefix attribute prefix="og: http://ogp.me/ns#"

If that's finally needed, i will include that prefix for nuxt meta module og tags.

Does removing the data- properties help?

You mean that data-n-heads? Think linkedIn should allow us as data-* attributes as are valid for html5 :))

Would be so nice if you've got more information about that informing us :)

[stursby]

@jscottsf (cc @pi0) I just ran into this same issue and was able to get open graph tags and images working for LinkedIn.

I had to add the following config options in nuxt.config.js

module.exports = {
  head: {
    htmlAttrs: {
      prefix: 'og: http://ogp.me/ns#'
    }
  },
  generate: {
    minify: {
      removeOptionalTags: false,
      keepClosingSlash: true
    }
  }
}

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.