p2p.wrox.com Forums

p2p.wrox.com Forums (http://p2p.wrox.com/index.php)
-   BOOK: Beginning ASP.NET 4 : in C# and VB (http://p2p.wrox.com/forumdisplay.php?f=560)
-   -   How to add Meta Tags to Master Pages/Content Pages (http://p2p.wrox.com/showthread.php?t=87626)

Pdesignz May 27th, 2012 04:18 PM

How to add Meta Tags to Master Pages/Content Pages
 
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


All times are GMT -4. The time now is 07:09 PM.

Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.