Is possible to add a <meta> tag for my Lightning application?

Within the Salesforce1 mobile application my iPhone turns a custom-formatted date visualization into a hyperlink to create a native calendar entry. As described here you can prevent this by adding

<meta name="format-detection" content="date=no">

to your webpage, but as I don't have access to the generated HTML <head>-section directly is there another way defining this within a Lightning Component?


you can get the response here

Two Options


If you are building a Community, You can Add it from

All Communities -> Builder -> Settings -> Advanced -> Edit Head Markup


If you are building a Standard Lightning APP, You can Add it from Javascript, but you dont need to use JQuery (I think is your problem).

In a Lightning App you have the following (App Component)

> <aura:application template="c:test_empty_template">
>     <aura:handler name="init" value="{!this}" action="{!c.doInit}" />   <header class="tlf-header">
>     <div class="tlf-header__top"> ...

(App Controller)

> ({
>             doInit : function(component, event, helper) {
>                 var meta = document.createElement("meta");
>                 meta.setAttribute("name", "format-detection");
>                 meta.setAttribute("content", "date=no");
>                 document.getElementsByTagName('head')[0].appendChild(meta);
>     } })

And viewport is injected in the application Head enter image description here


Update - this answer is about adding meta to Visualforce pages, not lightning components as originally asked

This seems to be a limitiation in Visualforce and Apex. Disclosure: I'm new to VF / Apex but very experienced in HTML. There are Apex-approved ways of adding scripts and stylesheets to the head of a document with the <apex:includeScript /> and <apex:stylesheet /> tags.

But there's no equivalent for adding meta as far as I know.

You can, as a type of hack, insert the <meta ... > at the top of the VF page and it may work. I've done a similar quick workaround with the <meta viewport...> element for responsive pages on mobile devices, and it works.

However, this is technically invalid markup.

A related answer at https://salesforce.stackexchange.com/a/5412/27617 has more details about adding meta

  • FYI, your answer is about Visualforce. This question is about Lightning Components. :-)
    – pchittum
    Apr 1 '16 at 17:29
  • Ah, I see. Missed that. I'm not experienced with lighnitng components yet, wish I could help. Will update answer to clarify Apr 1 '16 at 18:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.