Adding Open Graph Meta Tags By Code

Adding Open Graph Meta Tags Dynamically

Getting Started: You can find out what the Open Graph meta tags are for in our HTML lessons.

It is very easy to use twitter or facebook og meta tags on web pages with fixed content. However, on web pages whose content changes according to the request of the user, the og tags will be required to be different each time.

For example, if we examine this page, you will see that this page is lecture.aspx in the address bar. Whichever course you click on, the page is still lecture.aspx, while its content changes. According to the request from the user, information is obtained from the database and the page content is created.

In dynamic web pages using databases like this, our og meta tags will also need to be arranged according to the subject.

It is very easy to create and add a meta tag to the page with Asp.Net. These meta tags can also be og (Open Graph) meta tags.

Asp.Net Adding Meta Tags By Code

In the following lines of code, xyz is a variable. The information to be assigned to this variable, taken from the database or elsewhere, will be added to the page with meta tags.

Adding Description and Keywords with Code

The description and keywords parameters of the meta tags can be created with code and their content can be determined as follows:

HtmlMeta metaDesc = new HtmlMeta();

metaDesc.Name = "DESCRIPTION";

metaDesc.Content = xyz;

Header.Controls.Add(metaDesc);

HtmlMeta metaKeys = new HtmlMeta();

metaKeys.Name = "KEYWORDS";

metaKeys.Content = xyz;

Header.Controls.Add(metaKeys);

Adding Title Tag With Code

Adding a title tag to the page automatically:

Page.Header.Title = xyz;

Adding Facebook Og Meta Tags Using Code

Creating and adding Facebook tags to the page:

HtmlMeta tag1 = new HtmlMeta();

tag1.Attributes.Add("property", "og:title");

tag1.Content = xyz;

Page.Header.Controls.Add(tag1);

HtmlMeta tag2 = new HtmlMeta();

tag2.Attributes.Add("property", "og:description");

tag2.Content = xyz;

Page.Header.Controls.Add(tag2);

HtmlMeta tag3 = new HtmlMeta();

tag3.Attributes.Add("property", "og:url");

tag3.Content = xyz;

Page.Header.Controls.Add(tag3);

HtmlMeta tagimg = new HtmlMeta();

tagimg.Attributes.Add("property", "og:image");

string image_url = "http://www.btdersleri.com/"+folder_name+ "/" + image_name;

tagimg.Content = image_url;

Page.Header.Controls.Add(tagimg);

Adding Twitter Meta Tags With Code

Creating Twitter tags and adding them to the page:

HtmlMeta ttag = new HtmlMeta();

ttag.Name= "twitter:title";

ttag.Content = xyz;

Page.Header.Controls.Add(ttag);

HtmlMeta ttag1 = new HtmlMeta();

ttag1.Name= "twitter:description";

ttag1.Content = xyz;

Page.Header.Controls.Add(ttag1);

HtmlMeta ttagurl = new HtmlMeta();

ttagurl.Name= "twitter:url";

ttagurl.Content = xyz;

Page.Header.Controls.Add(ttagurl);

HtmlMeta ttagimg = new HtmlMeta();

ttagimg.Name= "twitter:image";

string image_url= "http://www.btdersleri.com/"+folder_name+ "/" + image_name;

ttagimg.Content = image_url;

Page.Header.Controls.Add(ttagimg);

Adding Html Link Tag

The link tag and the image_src parameter can also be used to declare the url of the image related to the page. It would be useful to add the link tag with the code.

HtmlLink link1 = new HtmlLink();

link1.Attributes["rel"] = "image_src";

string image_url= "http://www.btdersleri.com/"+folder_name+ "/" + image_name;

link1.Href = image_url;

Page.Header.Controls.Add(link1);

The example below shows how to dynamically redirect the page with the code. Using the link tag and the alternate parameter, the url to which the redirect will be made is declared.

HtmlLink link2 = new HtmlLink();

link2.Attributes["rel"] = "alternate";

link2.Attributes["media"] = "only screen and (max-width: 800px)";

link2.Href = "http://m.btdersleri.com/ders.aspx?id=" + id;

Page.Header.Controls.Add(link2);

Adding Og Meta Tag with Asp.Net Code, Creating Dynamically og Meta Tags, Adding Meta Tag with code, Adding Title with Code

EXERCISES

There are no examples related to this subject.