Hi, Lets come back to ASP.NET. It has been long time since we blogged about ASP.NET. Earlier in this topic, we have written an article on Adding Dynamic Meta Tags (Keywords) in Blogger.
Dynamic Meta Tags from Database
As we said in title of article, this article will simplify the process of inserting meta tags in ASP.NET content pages. That can be content page or MasterPage. While creating a dynamic website with ASP.NET, most complicated task is to put meta tags in header. Here we will insert dynamic Meta tags from database in MasterPage.
As we earlier mentioned and announced, we are working on a ASP.NET based CMS which we are currently using for our website networks for multiple purpose and will make it Open Source once all of the parts are fully functional. Till far now, We have created a normal website functionality, a download center with album, artist, lyrics, download and other management features and soon we are starting a news portal.
When we create a web site with multiple pages in asp.net we can define Meta tags separately in each page, but assume when it comes to Blog or News website where, there might be hundreds or thousands of posts and each post has different content, Keywords and Description and we have to display content dynamically based on SQL queries because it is nearly impossible to generate separate page in hard disk for each posts.
These are the correct use cases where we may need to put Dynamic Meta Tags in pages directly from database based on the content.
We have a MasterPage to illustrate here and have saved configuration data in database. Lets get starting towards adding dynamic meta tags.
Database Design:
Source Code for Front-end:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Yellow.master.cs" Inherits="Resources_Storyellow" ClientIDMode="Static" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>New Design for Website : P.Yar.B Complex</title>
<link href="../App_Themes/Yellow/StyleSheet.css" rel="stylesheet" />
<link href="../App_Themes/Yellow/DropDownMenu.css" rel="stylesheet" />
<meta id="metaDesc" name="description" runat="server" />
<meta id="metaKeywords" name="keywords" runat="server" />
<meta name="Generator" content="MyCMS By P.Yar.B Complex." />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<%--Starting Main Display of content for Screen--%>
<table cellpadding="0" cellspacing="0" class="pageArea">
<tr>
<td colspan="2" class="headerRow">
.....
.....
.....
</body>
</html>Now the main lines in above code are two meta tags which have runat="server" and id also. This is our MasterPage so we have used in head section of HTML. If you are putting in content page you have to put inside ContentPlaceHolder of head area as in below code.
Source Code for MasterPage:
<%@ Page Title="Download Center of P.Yar.B Complex" Language="C#" MasterPageFile="~/Templates/Yellow.master" AutoEventWireup="true" CodeFile="DLDefault.aspx.cs" Inherits="DLCenter_Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<meta id="metaDesc" name="description" runat="server" />
<meta id="metaKeywords" name="keywords" runat="server" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainBody" runat="Server">
.....
......
.....
</asp:Content>Now lets come back to backend file. We have used C# in this example.
Source Code for .cs file
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ConToCMS"].ConnectionString);
string Query = "SELECT * FROM Configuration where SectionName='Home'";
SqlDataAdapter adp = new SqlDataAdapter(Query,con);
DataTable dt = new DataTable();
adp.Fill(dt);
if (dt.Rows.Count > 0)
{
lnkHeaderLogo.Text = dt.Rows[0]["SiteName"].ToString();
lblSiteSlogan.Text = dt.Rows[0]["Slogan"].ToString();
lblFooter.Text = Server.HtmlDecode(dt.Rows[0]["FooterText"].ToString());
// Actual job of adding keywords and description is in below two lines
metaDesc.Attributes.Add("content", dt.Rows[0]["MetaDesc"].ToString());
metaKeywords.Attributes.Add("content", dt.Rows[0]["Keywords"].ToString());
}This code is inside Page_Load event of page. This piece of code will get data from database which we have earlier saved in configuration. In above code, we initialized a connection, then write a SQL query to get all information from Configuration Table where section name is Home. Based on your database design, it might be PostID or ArticleID as parameter.
Now simply run the webpage where you put code. As we mentioned, we put code inside MasterPage, lets see the outcome.
Source View of HTML produced
Here you go.
We have added Meta Description and Meta Keywords tags dynamically in our web application and these values are retrieved from database.
Thanks for reading. Make sure to subscribe to our YouTube channel for more technical resources.
