How to add Meta Tags to Master Pages/Content Pages

Pdesignz · May 27th, 2012, 04:18 PM

Hello, I am new to asp.net and am going through Beginning ASP.Net 4.0 and I had a question about meta tags for master pages and content pages. In the past my experience with html and asp pages, I would use meta tags in the <head></head> of the html and asp pages. In these new asp.net and master page concepts, I am a little unsure as to how to use or where to place the meta tags I would like to use.

In the Frontend.Master I have this...

<head runat="server">
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>

Would I put the meta data, scripts and css files within the asp:ContentPlaceHolder, but in doing this would then the meta tags be the same for every page that uses this master page?

I then created a new content page to see what is created and I found this contained within the page...

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>

Since I want the meta tags to be different on a page by page basis, would I put the meta tags and any scripts that are specific to this page within this tag and any css files or scripts that I want on every page based on the master page I would then put it in the place holder of the master page?

Thank You

Imar · May 28th, 2012, 03:17 AM

Hi there,

For stuff that you want repeated on all pages (such as global CSS fiels), the master page is a good location. For content that differs for each page, you can use the ContentPlaceHolder head. This enables you to add page specific meta data, CSS file and JavaScript. You could add multiple content controls to the head of the master page for specific content. For example, you could add one called Description in the middle of a meta tag so the content page would only have to supply the value of the description while the master page would take care of the <meta /> element.

Hope this helps,

Imar

Pdesignz · May 28th, 2012, 02:48 PM

Imar- Thanks for the reply, but am not entirely sure as to what you mean...

In the Master Page would I do something like this and this would appear on all pages.

<asp:ContentPlaceHolder id="head" runat="server">
<link href="../Styles/styles.css" rel="stylesheet" type="text/css" />
<script src="../scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
</asp:ContentPlaceHolder>

and in the content pages...

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<meta name="keywords" content="..." />
<meta name="description" content="..." />
</asp:Content>

I am not 100% sure if this is what you meant or not...

Thanks

Imar · May 30th, 2012, 05:16 PM

Hi there,

That wouldn't work. With that code, the CSS in the head control gets overwritten with custom content from content pages that have a Content control for the head ContentPlaceholder.

But my solution wouldn't work either. I was hoping you could embed a ContentPlaceHolder in a meta tag like this:

<meta name="keywords" content='<asp:ContentPlaceHolder id="keywords" runat="server" />' />

Obviously, that doesn't make any sense as the CPH would just be seen as literal content. Not sure why I thought that would work. Must be the warm weather here ;-)

So, I guess your best solution is to use the head CPH as it's added by default to the master page and add the meta tags for each content page to that control.

Hope this helps, and sorry for sending you in the wrong direction.

Cheers,

Imar

Pdesignz · May 30th, 2012, 05:24 PM

Hi Imar, so are you saying to do something like this in the master page...

<asp:ContentPlaceHolder id="head" runat="server">
<link href="../Styles/styles.css" rel="stylesheet" type="text/css" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<script src="../scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
</asp:ContentPlaceHolder>

If the meta tags are in the head of the master page would I then be able to add content for the different meta tags in the content pages that are based off the main master page?

Thanks

Imar · May 30th, 2012, 05:30 PM

No, that would still whipe out the content by the content pages (content in a CPH only serves as a default). I would do this:

Code:

 
<link href="../Styles/styles.css" rel="stylesheet" type="text/css" />
<script src="../scripts/jquery-1.7.2.min.js" type="text/javascript"></script> 
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>

This puts the CSS and JavaScript outside the CPH so it's always added to the page.

Then, in a content page, you add this to the <Content /> control for the Head CPH:

<meta name="keywords" content="" />
<meta name="description" content="" />

Hope this helps,

Imar

Pdesignz · May 30th, 2012, 06:44 PM

Thanks Imar, so I think I am understanding what you are saying...Anything that is in the ContentPlaceHolder on the master page would be overwritten if anything is added to the ContentPlaceHolder on the content page.

Your recommendation is add any css files or script files outside the ContentPlaceHolder on the master page and then to add any meta tags or anything that will change from page to page with the ContentPlaceHolder on the content page

Master...

<link href="../Styles/styles.css" rel="stylesheet" type="text/css" />
<script src="../scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>

Content...

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<meta name="keywords" content="" />
<meta name="description" content="" />
</asp:Content>

Or is it better to have it contained in the ContentPlaceHolder like so...

Master

<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>

Content...

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="../Styles/styles.css" rel="stylesheet" type="text/css" />
<script src="../scripts/jquery-1.7.2.min.js" type="text/javascript"></script>

</asp:Content>

Imar · May 30th, 2012, 06:51 PM

It depends. The first solution is preferred for css and js files you need on all pages. The second option is used for files you only need on some pages, and are therefor added to the content page directly.

Of course you can combine the two for maximum flexibility.

Cheers,

Imar

Pdesignz · May 30th, 2012, 07:02 PM

So anything that I want on all pages would go on the master page outside the ContentPlaceHolder, such as css files, script files or custom scripts, google analytics or anything else...and anything that would change from page to page would go in the ContentPlaceHolder on the content pages, such meta tags, any custom scripts that would only be needed for that page and not on every page and anything else that would be custom would also go within the ContentPlaceHolder

Would the same concept then also apply to the body ContentPlaceHolder, Any navigation or design elements that I wanted on every page would go on the master page outside the ContentPlaceHolder and the content would go inside the ContentPlaceHolder on the content page

Just want to make sure that I understand correctly...

Thanks!

Imar · May 31st, 2012, 07:08 AM

Yes, that's exactly how it is, except that in Content pages the content goes in a Content control that targets a ContentPlaceHolder in the master page.

Imar