Html codes for Twitter card tag, Language tag, Meta description tag, Html sitemap page, and Html contact us page


 Hi And welcome to everyone!. Blogging makes life simple. 


Today we will see Top important codes for every blogspot blog. Because Blogger is a free platform we need to add codes manually for better performance. 


We are follow today,

 

  1. Twitter card tag 


  1. Language tag


  1. Meta description tag


  1. Html sitemap page


  1. Html contact us page


Let's get started,


#1.TWITTER CARD - code for twitter card

What is a twitter card?

If your website does not have twitter card code, when you share any article in twitter, can not see your post thumbnail by you . I think you Can not understand, please check the below images.





HTML code for twitter card


Go to your website dashboard, under the theme section. Click edit html and find (press cont+f and paste finding code) </head> or find author details and  paste below code in above.


Don't forget to replace your twitter username and your website logo url. Your USERNAME appears 6 times and  YOUR_LOGO_URL also appears 2 times.


  <!--Twitter Card-->
<b:if cond='data:blog.pageType == "index"'> <!--homepage-->
 <meta name="twitter:card" content="summary" />
 <meta name="twitter:description" expr:content='data:blog.metaDescription' />
 <meta name="twitter:title" expr:content="data:blog.pageTitle" />
 <meta name="twitter:site" content="@username" />
 <meta name="twitter:image" content="YOUR_LOGO_URL" />
 <meta name="twitter:creator" content="@username" />
</b:if>
<b:if cond='data:blog.pageType == "static_page"'> 
<!--page-->
 <meta name="twitter:card" content="summary" />
 <meta name="twitter:description" expr:content='data:blog.metaDescription' />
 <meta name="twitter:title" expr:content="data:blog.pageTitle" />
 <meta name="twitter:site" content="@username" />
 <meta name="twitter:image" content="YOUR_LOGO_URL" />
 <meta name="twitter:creator" content="@username" />
</b:if>
<b:if cond='data:blog.pageType == "item"'> <!--blog post-->
 <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:description" expr:content='data:blog.metaDescription' />
 <meta name="twitter:title" expr:content="data:blog.pageName" />
 <meta name="twitter:site" content="@username" />
 <meta name="twitter:image" expr:content="data:blog.postImageUrl" />
 <meta name="twitter:creator" content="@username" />
</b:if>

<!--End Twitter Card-->


#2.LANGUAGE TAG

Language tag is one important tag for every website. From this tag search engines can find your website language. It will make better search results for your website. 


But recently I noticed some Templates don't have language attributes. So please check your Template. If you haven't, please paste code, below the <head>.

If your language is different check out this article. How to change it: simply get your language code and replace en into your language code.


 <element lang='en-IN' />

#3.META DESCRIPTION TAG

Meta description tag is associated for better ranking and search results. It's like a normal description but it's more powerful.


HTML code for meta description tag

Step#1:Find code following code in your Template

 <b:include data='blog' name='all-head-content'/>


Step#2: simply paste below, the following code


Step#3: don't forget to replace your blog title, keywords, description, and your email (if you want).



  <!--- meta tags for my blog-->
<title>your blog title</title>
<meta content='your keywords here' name='keywords'/>
<meta content='your blog description here' name='description'/>
<meta content='global' name='distribution'/>
<meta content='1 days' name='revisit'/>
<meta content='1 days' name='revisit-after'/>
<meta content='all' name='audience'/>
<meta content='general' name='rating'/>
<link expr:href='data:blog.url' hreflang='x-default' rel='alternate'/>
<meta content='the author name here' name='Author'/>
<meta content='your email address here' name='Email'/>
<meta content='All' name='Robots'/>
<meta content='index, follow' name='robots'/>
<meta content='index, follow' name='GOOGLEBOT'/>
<meta content='index, follow' name='yahooBOT'/>
<meta content='index, follow' name='yandexBOT'/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<!--- End of meta tags for my blog-->


#4.Sitemap - code for sitemap page

What is a sitemap?

A site map is a list of pages of a web site within a domain. There are two primary kinds of site map: Human-visible listings, typically hierarchical, of the pages on a site. Structured listings intended for web crawlers such as all' search engines.


A Sitemap page is a hierarchical thing. Your visitors can find all your post link's with the corresponding titles by grid view or list view. 


HTML code for sitemap page


Step#1: First of all create a new page for the sitemap, if already done go to the next step.


Step#2: open the sitemap page in html mode and remove existing code and paste the following code.


Step#3: replace "yourblog.blogspot.com" into your exact website url. See following images


Step#4: just did, what in the following image



  <script type='text/javascript'>
var postTitle = new Array();
var postUrl = new Array();
var postPublished = new Array();
var postDate = new Array();
var postLabels = new Array();
var postRecent = new Array();
var sortBy = "titleasc";
var numberfeed = 0;
function bloggersitemap(a) {
    function b() {
        if ("entry" in a.feed) {
            var d = a.feed.entry.length;
            numberfeed = d;
            ii = 0;
            for (var h = 0; h < d; h++) {
                var n = a.feed.entry[h];
                var e = n.title.$t;
                var m = n.published.$t.substring(0, 10);
                var j;
                for (var g = 0; g < n.link.length; g++) {
                    if (n.link[g].rel == "alternate") {
                        j = n.link[g].href;
                        break
                    }
                }
                var o = "";
                for (var g = 0; g < n.link.length; g++) {
                    if (n.link[g].rel == "enclosure") {
                        o = n.link[g].href;
                        break
                    }
                }
                var c = "";
                if ("category" in n) {
                    for (var g = 0; g < n.category.length; g++) {
                        c = n.category[g].term;
                        var f = c.lastIndexOf(";");
                        if (f != -1) {
                            c = c.substring(0, f)
                        }
                        postLabels[ii] = c;
                        postTitle[ii] = e;
                        postDate[ii] = m;
                        postUrl[ii] = j;
                        postPublished[ii] = o;
                        if (h < 10) {
                            postRecent[ii] = true
                        } else {
                            postRecent[ii] = false
                        }
                        ii = ii + 1
                    }
                }
            }
        }
    }
    b();
    sortBy = "titledesc";
    sortPosts(sortBy);
    sortlabel();
    displayToc();
}
function sortPosts(d) {
    function c(e, g) {
        var f = postTitle[e];
        postTitle[e] = postTitle[g];
        postTitle[g] = f;
        var f = postDate[e];
        postDate[e] = postDate[g];
        postDate[g] = f;
        var f = postUrl[e];
        postUrl[e] = postUrl[g];
        postUrl[g] = f;
        var f = postLabels[e];
        postLabels[e] = postLabels[g];
        postLabels[g] = f;
        var f = postPublished[e];
        postPublished[e] = postPublished[g];
        postPublished[g] = f;
        var f = postRecent[e];
        postRecent[e] = postRecent[g];
        postRecent[g] = f
    }
    for (var b = 0; b < postTitle.length - 1; b++) {
        for (var a = b + 1; a < postTitle.length; a++) {
            if (d == "titleasc") {
                if (postTitle[b] > postTitle[a]) {
                    c(b, a)
                }
            }
            if (d == "titledesc") {
                if (postTitle[b] < postTitle[a]) {
                    c(b, a)
                }
            }
            if (d == "dateoldest") {
                if (postDate[b] > postDate[a]) {
                    c(b, a)
                }
            }
            if (d == "datenewest") {
                if (postDate[b] < postDate[a]) {
                    c(b, a)
                }
            }
            if (d == "orderlabel") {
                if (postLabels[b] > postLabels[a]) {
                    c(b, a)
                }
            }
        }
    }
}
function sortlabel() {
    sortBy = "orderlabel";
    sortPosts(sortBy);
    var a = 0;
    var b = 0;
    while (b < postTitle.length) {
        temp1 = postLabels[b];
        firsti = a;
        do {
            a = a + 1
        } while (postLabels[a] == temp1);
        b = a;
        sortPosts2(firsti, a);
        if (b > postTitle.length) {
            break
        }
    }
}
function sortPosts2(d, c) {
    function e(f, h) {
        var g = postTitle[f];
        postTitle[f] = postTitle[h];
        postTitle[h] = g;
        var g = postDate[f];
        postDate[f] = postDate[h];
        postDate[h] = g;
        var g = postUrl[f];
        postUrl[f] = postUrl[h];
        postUrl[h] = g;
        var g = postLabels[f];
        postLabels[f] = postLabels[h];
        postLabels[h] = g;
        var g = postPublished[f];
        postPublished[f] = postPublished[h];
        postPublished[h] = g;
        var g = postRecent[f];
        postRecent[f] = postRecent[h];
        postRecent[h] = g
    }
    for (var b = d; b < c - 1; b++) {
        for (var a = b + 1; a < c; a++) {
            if (postTitle[b] > postTitle[a]) {
                e(b, a)
            }
        }
    }
}


function displayToc() {
    var a = 0;
    var b = 0;
    while (b < postTitle.length) {
        temp1 = postLabels[b];
        document.write("");
        document.write('<div class="post-archive"><h4>' + temp1 + '</h4><div class="ct-columns">');
        firsti = a;
        do {
            document.write("<p>");
            document.write('<a " href="' + postUrl[a] + '">' + postTitle[a] + "");
            if (postRecent[a] == true) {
                document.write(' - <strong><span>New!</span></strong>')
            }
            document.write("</a></p>");
            a = a + 1
        } while (postLabels[a] == temp1);
        b = a;
        document.write("</div></div>");
        sortPosts2(firsti, a);
        if (b > postTitle.length) {
            break
        }
    }
}
</script>
<script src="https://yourblog.blogspot.com/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=bloggersitemap" type="text/javascript"></script>


#5.CONTACT PAGE - html code for contact us

Contact us page is more important than contact form.  


Html code for contact us page

Step#1: create a new page for contact us. If you are already done. After go to next step


Step#2: find the ]]></b:skin> in blogger template and paste the following code just before it


  div#ContactForm1 {
display: none !important;
}

Step#3: then go to contact us page under the html mode and remove existing codes and paste the following code. Then click publish.



  <div id=”custom_ContactForm1″ class=”widget ContactForm”>
<div class=”contact-form-widget”>
<p>
Get in touch with us by filling out the form below.
</p>
<div class=”form”>
<form name=”contact-form”>
<p>Name</p>
<br>
<input type=”text” value=”” size=”30″ name=”name” id=”ContactForm1_contact-form-name” class=”contact-form-name”>
<p>Email</p>
<span style=”font-weight: bolder;”>*</span>
<br>
<input type=”text” value=”” size=”30″ name=”email” id=”ContactForm1_contact-form-email” class=”contact-form-email”>
<p>Message</p>
<span style=”font-weight: bolder;”>*</span>
<br>
<textarea rows=”5″ name=”email-message” id=”ContactForm1_contact-form-email-message” cols=”25″ class=”contact-form-email-message”></textarea>
<p></p>
<input type=”button” value=”Send” id=”ContactForm1_contact-form-submit” class=”contact-form-button contact-form-button-submit”>
<p></p>
<div style=”text-align: center; max-width: 222px; width: 100%”>
<p id=”ContactForm1_contact-form-error-message” class=”contact-form-error-message”></p>
<p id=”ContactForm1_contact-form-success-message” class=”contact-form-success-message”></p>
</div>
</form>
</div>
</div>
<div class=”clear”></div>
<span class=”widget-item-control”>
<span class=”item-control blog-admin”>
<a title=”Edit” target=”configContactForm1″ onclick=”return _WidgetManager._PopupConfig(document.getElementById(“ContactForm1″));” href=”//www.blogger.com/rearrange?blogID=8799058979810298021&widgetType=ContactForm&widgetId=ContactForm1&action=editWidget&sectionId=sidebar-right-1″ class=”quickedit”>
<img width=”18″ height=”18″ src=”//img1.blogblog.com/img/icon18_wrench_allbkg.png” alt=””>
</a>
</span>
</span>
<div class=”clear”>
</div>
</div>


That's all friends. I think this post is very useful. If you want more, please remind me in the comments section.

Comments

Post a Comment

Popular posts from this blog

How do I start blogging in 2021-full guide for beginners

Image
 In this post, we will see how to create a blog  How to Start a Blog in 6 Easy Steps Step # 1: Select a perfect niche for your blog Step # 2: Choose a blogging platform Step # 3: Pick a domain name Step # 4: Starting a blog on WordPress and blogger Step # 5: Select a theme and design your blog Step # 6: submitting your site to Google, Bing, Yahoo, and so on.
Read more

Top five FeedBurner alternative for Blogger website

Image
  Google Feedburner announced RSS feeds email service will be removed after this July. What are they going to do? The FeedBurner are transitioning FeedBurner into a more stable, modern infrastructure. They will be turning down most non-core feed management features, including email subscriptions. What we can expect? All existing feeds will continue to serve uninterrupted, and you can continue to create new accounts and burn new feeds. Some management functionality will continue to be supported, such as the ability to change the URL, source feed, title, and podcast metadata of your feed. How to download your FeedBurner email subscriber data Click Analyse, and select Subscribers. Under View Subscriber Details, click CSV (next to "Export"). Top five FeedBurner alternative for Blogger website RapidFeeds Feedity  FeedPress Feedblitz RevResponse #1.RapidFeeds The Rapid feeds, RSS feeds, and display RSS feeds on your website with FREE and simple online RSS service. We can also Publ...
Read more

Html Codes for Jump link, Marquee Text, disable copy button, Animating headings, Floating Slide in Banner, Floating Youtube subscribe button for Blogger website

Image
  Welcome back guys. So, in this post, I will guide you on how to create the following things on the Blogger website.  Today we are going to see, Jump link Marquee Text  disable copy button Animating headings Floating Slide in Banner  Floating Youtube subscribe button #1. Jump link  Jump link is one kind of internal linking strategy . By using a jump link, users can skip unnecessary topics or they can jump to the final answers or any other steps as they want. The jump link strategy gave a better experience to the visitors. This will give easy navigation to the visitors. So let's see, How to create a jump link strategy in blogger? STEP:#1 Go to the blog post where you want to add it and switch to HTML mode. STEP:#2 Add span tag before on heading or paragraph(as you want). Like this <span id="step1"> </span> STEP:#3 Then copy the URL of that post and choose the text where you want to link it. Then click link icon and paste URL of that particular ...
Read more