300x250 AD TOP

Showing posts with label Setup. Show all posts
Showing posts with label Setup. Show all posts

Saturday, March 25, 2023

Tagged under: , , , ,

How To Add Custom Robots.txt File in Blogger

The robots.txt file is a simple text file that is placed in the root directory of a website and is used to communicate with web robots, also known as crawlers or spiders, about which pages or files on the site they can or cannot access. In this blog post, we will discuss the importance of robots.txt file, its syntax and how to use it effectively.

The Importance of robots.txt File


Robots.txt file is an essential tool for website owners and webmasters who want to control how their website is crawled and indexed by search engines. It helps search engines like Google, Bing, Yahoo, and others to understand which pages or sections of the website should be indexed and displayed in search results. By using robots.txt, you can prevent search engines from indexing sensitive pages or sections of the website that you do not want to appear in search results.
In addition to search engines, other web robots can also crawl your website, such as web scrapers, which can extract data from your website for different purposes. By using robots.txt, you can prevent these web robots from accessing your website or specific pages, which can help protect your website's content and information.

Syntax of robots.txt File


The robots.txt file uses a simple syntax, which consists of two main parts: user-agent and disallow. The user-agent specifies the web robot that the rule applies to, and the disallow specifies the pages or sections of the website that the robot should not access.

How To Add Custom Robots.txt File in Blogger

Custom Robots.txt is a file that we add to a blog/site to improve SEO. By this file, we can guide search engine crawler which page to crawl or which not to. With this tutorial, you must Setup Custom Header Tags in Blogger. It is also similar to Custom Robots.txt.
  1. Sign in to blogger and choose blog which you want to customize.
  2. Go to "Search Preferences" > "Settings".
  3.  Find "Custom robots.txt" under the "Crawlers and Indexing" section. Click on "Edit" on the right side of the option. Select "Yes". A blank box will appear. Copy the below code and, paste into the box.

User-agent: Mediapartners-GoogleDisallow:User-agent: *Disallow: /searchAllow: /Sitemap: http://YOUR BLOG NAME/feeds/posts/default?orderby=UPDATED       4. After that, click on "Save changes".That's  all 
robots.txt file explanation.

Tara Gnawali (Stellax)write a blog post about robot.txt file
If you have ever worked on a website or used a search engine, you might have come across a file called "robots.txt". The robots.txt file is a simple text file that is placed in the root directory of a website and is used to communicate with web robots, also known as crawlers or spiders, about which pages or files on the site they can or cannot access. In this blog post, we will discuss the importance of robots.txt file, its syntax and how to use it effectively.
The Importance of robots.txt File
Robots.txt file is an essential tool for website owners and webmasters who want to control how their website is crawled and indexed by search engines. It helps search engines like Google, Bing, Yahoo, and others to understand which pages or sections of the website should be indexed and displayed in search results. By using robots.txt, you can prevent search engines from indexing sensitive pages or sections of the website that you do not want to appear in search results.
In addition to search engines, other web robots can also crawl your website, such as web scrapers, which can extract data from your website for different purposes. By using robots.txt, you can prevent these web robots from accessing your website or specific pages, which can help protect your website's content and information.
Syntax of robots.txt File
The robots.txt file uses a simple syntax, which consists of two main parts: user-agent and disallow. The user-agent specifies the web robot that the rule applies to, and the disallow specifies the pages or sections of the website that the robot should not access. Here's an example of a robots.txt file:
User-agent: *Disallow: /admin/Disallow: /private/
In this example, the user-agent (*) specifies that the rules apply to all web robots, and the disallow rules indicate that the /admin/ and /private/ directories should not be accessed by web robots. Note that you can also use the allow directive to specify which pages or sections of the website should be accessed by web robots.

Using robots.txt Effectively

While robots.txt file can be an effective tool to control web robot access to your website, it's important to use it correctly to avoid accidentally blocking legitimate access. Here are some tips to use robots.txt effectively:
  • Use the "Disallow" directive to block access to sensitive pages or directories.
  • Use the "Allow" directive to explicitly allow access to certain pages or directories.
  • Use the "*" wildcard to apply a rule to all web robots.
  • Use the "User-agent" directive to specify a particular web robot to apply a rule to.
  • Test your robots.txt file using the Google Search Console or other tools to ensure that it's working as intended.

Step by Step Blogger Tutorials

  1. Blogger Vs Wordpress: Which one should you choose
  2. Benefits Of Using Blogspot As Blogging Platform
  3. Choosing A Perfect Niche For Your Blog
  4. Creating a Free Blog on Blogger
  5. Add Custom Robots.txt File in Blogger
  6. Most Important Settings You Must Have Set In Your Blogger Blog
  7. How to Create Contact Us page in Blogger
  8. How To Edit or change A Blogger Template - Complete tutorial
  9. Essential Safety Steps To Follow On Editing Blogger Template
  10. Setup MultiTab system on Blogger
  11. Add Facebook(Meta) meta tags in Blogger
  12. All In one seo pack for Blogger Blog
  13. How to make money through blogging
  14. How to get Google AdSense Approval very fast For A New Blog
  15. Earn 10$ Through blogging
  16. Best free AMP blogger Templates 2023
  17. Top 5 Premium AMP templates for blogger blog
I'm working on this series. I will gradually update this list..Keep Blogging ❤❤❤

Conclusion: 

The robots.txt file is a small but powerful tool that can help website owners and webmasters control how their website is crawled and indexed by search engines and other web robots. By using robots.txt, you can prevent sensitive pages or sections of your website from being indexed by search engines or accessed by web robots, which can help protect your website's content and information. Remember to use the syntax correctly and test your robots.txt file to ensure it's working as intended.
Read More
Stellax March 25, 2023  No comment
Tagged under: , ,

How to Create Contact Us page in Blogger



Blogger is very robust and easy to operate blogging platform, you don't have to be a geek to operate the dashboard or settings. But with easiness, there comes some limitations, By default you can't create a Contact us page, you have to either use any third party plugin or have to tweak blogger's official contact widget, so that it can work on static pages. Creating a separate page for contact purpose is very professional and also makes your blog clean by hiding unnecessary widgets and plugins So, Lets move further and see

How to create Contact Us page in Blogger. 


#First Step (Important): Installing  Widget 

Before following the below tutorial we recommend you to install the contact form widget in your blog, it is very easy process and can be done in minutes, with simple click. We have published a tutorial earlier, so you won't face any difficulties.

#Hiding The widget ( Adding CSS ) 

Before Editing we recommend you to make a backup of your template, so that anything goes wrong you still have your blog design safe.


The First thing you need to do is to login into your Blogger account and go to >> Templates >> Edit HTML and search for the ending ]]></b:skin> tag and just above it paste the following code.

.sidebar .widget.ContactForm {

    display: none!important;

}
#Creating A Page ( Adding HTML ) Before Editing we recommend you to make a backup of your template, so that anything goes wrong you still have your blog design safe. The First thing you need to do is to login into your Blogger account and go to >> Templates >> Edit HTML and search for the ending ]]></b:skin> tag and just above it paste the following code.


#Conclusion

Congrats !! You have made it. now you have learned that How to create Contact Us page in Blogger Visit your blog and check the awesome widget live in action, Hope you liked this tutorial, if you enjoyed then please share it with your friends, we are working hard to develop more such awesome widgets please stay tuned with Us. 


Step by Step Blogger Tutorials

  1. Blogger Vs Wordpress: Which one should you choose
  2. Benefits Of Using Blogspot As Blogging Platform
  3. Choosing A Perfect Niche For Your Blog
  4. Creating a Free Blog on Blogger
  5. Add Custom Robots.txt File in Blogger
  6. Most Important Settings You Must Have Set In Your Blogger Blog
  7. How to Create Contact Us page in Blogger
  8. How To Edit or change A Blogger Template - Complete tutorial
  9. Essential Safety Steps To Follow On Editing Blogger Template
  10. Setup MultiTab system on Blogger
  11. Add Facebook(Meta) meta tags in Blogger
  12. All In one seo pack for Blogger Blog
  13. How to make money through blogging
  14. How to get Google AdSense Approval very fast For A New Blog
  15. Earn 10$ Through blogging
  16. Best free AMP blogger Templates 2023
  17. Top 5 Premium AMP templates for blogger blog

I'm working on this series. I will gradually update this list..Keep Blogging ❤❤❤
Read More
Stellax March 25, 2023  No comment
Tagged under: , , ,

How to Create a Free Blog on Blogger : A complete Guide

If you want to create a blog without having to invest money, blogger platform is the number one way of doing so. In my previous post, I discussed how to Make Money through Blogging. You may read that before you start.


This tutorial is the first tutorial in "step by step blogger tutorials" series. In that post, I have provided a list of all tutorials regarding blogger platform that is arranged sequentially. Follow that sequence to avoid any trouble in process of learning.

Major Steps : 

  1. Creating a Google account and signing in to blogger.com
  2. Creating a blog
  3. Customizing blog setting
  4. Designing the blog

How to Create a Free Blog on Blogger


Step 1 - Creating a Google account and signing in to blogger.com

First of all, you need a google account to create a blog on blogger. If you don't have an account, you will have to create one. If you have an account, you can use it. Now, go to blogger.com. Then, click on "SIGN IN" button. Now, it will ask for your email/username and password (google account). 

Step 2 - Creating a blog

  • Next, click on "CREATE YOUR BLOG". 
In the next page, you have to  Create a limited blogger profile. If you want to use a different name or limit exposure to your audience, select limited blogger profile. 
  • Now, in the following page, enter your name (or name you want to use) to the blank field of "Display name" section and click on "continue to blogger".
 Your audience will recognize you by this name. It's better using your personal name. Your audience will like it. 
  • Now it will take you to the following screen. Next, Click on "CREATE YOUR BLOG". A pop-up window will appear. 

Blog Title and url

  1. Enter your blog's name (not your personal name) in "Title" field.
  2. Enter your blog's address/domain in "Address" field
  3. Then, select a "Template" and click on "Create blog" button.

Blogger Dashboard Settings

Now, your blog creation is completed. Blogger will take you to the following page. From now on, if you log in to blogger, you will redirect to this page.But, before start using blogger, complete following 2 steps. 

Step 3 - Customizing blog setting

Blogger title and description change

In this step, we will change some important settings.
  1.  To do that, click on "Settings" from the left sidebar.
  2.  Then click on "Basic". Here you can change your blog Title. 
  3. Again, you can give a blog description to your readers. 
  4. Another important thing is "Privacy". To make change click on "Edit". You can see 2 options. Select "yes" for both options and click on "Save change". 

Blogger posts and comments settings

  •  Go to the next setting called "Posts, Comments, and Sharing". Change if it's  required. 
  • After that, change "Language and formatting" based on your location. 

Step 4 - Designing a blog in Blogger

Our next thought will be about our blog design. Many beginners avoid this step. Some do too much to design a blog. The important thing is the number of your visitors and ranking of your blog in Google search depend on your blog design.

 Question is how?

 The answer is when you do too much. When you surf the net, you may notice that some blog take a lot of time to load. One of the reasons can be blog design.

So , what you should do?

Just don’t make your blog a garbage truck. Your blog should look simple and professional. It should be comfortable to read posts. As an example, you should not use red background behind black post fonts. You should use a whitish background for that. 
  • You can use blogger theme to design your blog. Those themes will not create these kinds of problems. But, if you want to use Theme from outside, you should be careful.
To design your blog in blogger,
  1.  click on "Theme" from the left sidebar of your blog's dashboard.
  2. Next, click on "Customize"
  3. From next page click on "Theme" and select your preferred theme from the list.  Below the lower half your of the page, you can see a preview section where you can check your blog's look. 
  4. Next, click on "Background" to change background image and color.
  5. Then, click on "Adjust Width" to change your blog's and sidebar's width.
  6. After that, click on "Layout" to add or rearrange gadgets of your blog.
  7. From "Advanced" option you can change the color and size of the text of your blog, tabs, posts, etc. But, don't do anything with "Add CSS".
  8. Now, preview the blog before applying changes. At last click on "Apply to Blog" from upper right corner of the screen.
Congratulations  you've  successfully  created a free blog on blogger. Now you can start publishing  your blog posts.

Step by Step Blogger Tutorials

  1. Blogger Vs Wordpress: Which one should you choose
  2. Benefits Of Using Blogspot As Blogging Platform
  3. Choosing A Perfect Niche For Your Blog
  4. Creating a Free Blog on Blogger
  5. Add Custom Robots.txt File in Blogger
  6. Most Important Settings You Must Have Set In Your Blogger Blog
  7. How to Create Contact Us page in Blogger
  8. How To Edit or change A Blogger Template - Complete tutorial
  9. Essential Safety Steps To Follow On Editing Blogger Template
  10. Setup MultiTab system on Blogger
  11. Add Facebook(Meta) meta tags in Blogger
  12. All In one seo pack for Blogger Blog
  13. How to make money through blogging
  14. How to get Google AdSense Approval very fast For A New Blog
  15. Earn 10$ Through blogging
  16. Best free AMP blogger Templates 2023
  17. Top 5 Premium AMP templates for blogger blog
  18. How to Backup and Upload a Blogger Theme
  19. How to create SEO friendly blogger post title
  20. How to Submit Blogger Sitemap To Google Search Console
  21. How to Submit Blogger Sitemap to Bing Webmaster Tools and Yahoo Search
  22. How to Add Google Analytics to Blogger
  23. How to Create a Post in Blogger and Publish
  24. How to add Meta Tag, Search description to blogger post
  25. How to Add the ALT text tag to the blogger images
  26. How to add RSS feed icon to blogger blog using Feedburner
  27. Social like/follower buttons - Facebook like button, Twitter follower button, Google+ Plus one button
  28. Ways to Increase Blog Traffic
  29. Social bookmarking - Reddit, StumbleUpon
I'm working on this series. I will gradually update this list..Keep Blogging ❤❤❤
Read More
Stellax March 25, 2023  No comment
Tagged under: , ,

How to setup a blogger blog(Full Tutorial)



Suppose you have good writing skill or, writing is your hobby. So, why don't you turn it to your earning source? Writing a blog is one of the most popular ways to make money online. But to make your wish fulfill, first of all, you need to make a blog/site. There are many web designing platform to help you. Blogger and WordPress are the most important among them. Now the question is how much it will cost and who will help you to make your blog/site. Don't worry. You can make a blog/site by yourself and it is totally free. So, Gtara Tech is here to help you.In this series, I will discuss how to make a blog/site with help of blogger platform.

Why you should use blogger

If you don't want to pay money for your blog/site, then the blogger is the perfect place for you. If you want your post to get the top page of google search, you can do it with a free ".blogspot" domain/web address. You don't need a top level domain ( e. g " .com" web address) for that. The reason for that is the blogger is Google's own product. If you use other platforms, it won't help you in this purpose. If you don't understand what is the Blogspot, here is the answer - 
  • When you make a free blog/site using the blogger platform, URL/web address of your blog/site will look like "yourblogname.blogspot.com". 
  • If you want to remove ".blogspot" from your URL, you will have to buy a top level domain. Then it will look like "yourblogname.com".

Another advantage of using blogger is you can get Google Adsense approval in a free Blogspot blog/site and make money. But, when you use other platforms, Adsense won't give approval for free blog/site.
People may say blogger has a lack of features and isn't user-friendly. It's true. But, I can assure you that if you follow my tutorials, you can use it easily. I also think blogger's features are enough for you to make a complete blog/site.

Does this post really help ?

When I started blogging, I got confused from where I had to start and how to develop my blog step by step. When I added a feature, I wasn't sure what should be my next feature. Then after adding a few features and publishing my few posts, I came to know that I didn't utilize an important feature and my posts were not effective for that.You can search online and you will get a lot of tutorials. But, you will face problem to find out which step you should complete first. If you want to make a complete blog with all the features, then it will take a lot of times and you won't be able to publish your posts. It's also impossible to use all features and you don't need all of them either. As contents/posts are the main priority of blogging, you should make a blog with all important features at first. Then put your full concentration on your contents or writing. After that, when you get free times, you can add some extra features. So, at the starting of tutorials about "how to make a blog/site using blogger", all tutorials are arranged sequentially in this post. You will understand which features are more important to make a professional looking blog/site. You will also know which feature must be added before publishing the first post. So, follow this sequence to avoid any mistake.

Step by Step Blogger Tutorials

  1. Blogger Vs Wordpress: Which one should you choose
  2. Benefits Of Using Blogspot As Blogging Platform
  3. Choosing A Perfect Niche For Your Blog
  4. Creating a Free Blog on Blogger
  5. Add Custom Robots.txt File in Blogger
  6. Most Important Settings You Must Have Set In Your Blogger Blog
  7. How to Create Contact Us page in Blogger
  8. How To Edit or change A Blogger Template - Complete tutorial
  9. Essential Safety Steps To Follow On Editing Blogger Template
  10. Setup MultiTab system on Blogger
  11. Add Facebook(Meta) meta tags in Blogger
  12. All In one seo pack for Blogger Blog
  13. How to make money through blogging
  14. How to get Google AdSense Approval very fast For A New Blog
  15. Earn 10$ Through blogging
  16. Best free AMP blogger Templates 2023
  17. Top 5 Premium AMP templates for blogger blog
  18. How to Backup and Upload a Blogger Theme
  19. How to create SEO friendly blogger post title
  20. How to Submit Blogger Sitemap To Google Search Console
  21. How to Submit Blogger Sitemap to Bing Webmaster Tools and Yahoo Search
  22. How to Add Google Analytics to Blogger
  23. How to Create a Post in Blogger and Publish
  24. How to add Meta Tag, Search description to blogger post
  25. How to Add the ALT text tag to the blogger images
  26. How to add RSS feed icon to blogger blog using Feedburner
  27. Social like/follower buttons - Facebook like button, Twitter follower button, Google+ Plus one button
  28. Ways to Increase Blog Traffic
  29. Social bookmarking - Reddit, StumbleUpon
I'm working on this series. I will gradually update this list..Keep Blogging ❤❤❤
Read More
Stellax March 25, 2023  No comment

Saturday, August 24, 2019

Tagged under: , ,

All In one seo pack for blogger blog

If you are running a blogger Blogspot then you must make yourself familiar with meta tags and their attachment with Search Engine Optimization. In many topics, I have discussed the importance of blogger meta tags and quality contents but if you are a new visitor to this blog, I will discuss the meta tags just for you. Meta tags are the part of SEO (Search engine optimization) and they present your contents smartly on the web. There are many types of meta tags which perform the different functions in our blogger.

All In one seo pack for blogger blog

Today, I am going to share the most advanced all in one SEO pack that supports both Search Engine Optimization and Social Media. This pack will also resolve the incorrect/wrong thumbnail when sharing on social media. All you need to follow this tutorial interestingly.

Adding All in One SEO Plugin to Blogger

Go to your Blogger Dashboard > Template > Edit HTML
Click anywhere inside the template editor and press Ctrl + F and locate the <head> tag
Now copy all codes and paste them right after the <head> tag
 <!-- 2018 SEO Pack for Blogger by  tarang.com.np  -->
<b:include data='blog' name='all-head-content'/>
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta content='blogger' name='generator'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<link expr:href='data:blog.url' rel='canonical'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>Page Not Found - <data:blog.title/></title>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta content='noindex' name='robots'/>
</b:if>
<b:if cond='data:blog.searchLabel'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.isMobile'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.pageTitle + &quot;, &quot; + data:blog.title' name='keywords'/>
</b:if></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='YOUR, KEYWORDS, HERE' name='keywords'/></b:if>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if>
<meta content='website' property='og:type'/></b:if></b:if></b:if>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/></b:if>
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='https://plus.google.com/GOOGLE+ID/posts' rel='publisher'/>
<link href='https://plus.google.com/GOOGLE+ID/about' rel='author'/>
<link href='https://plus.google.com/GOOGLE+ID' rel='me'/>
<meta content='GOOGLE-WEBMASTER-CODE' name='google-site-verification'/>
<meta content='BING-WEBMASTER-CODE' name='msvalidate.01'/>
<meta content='ALEXA-VERIFY-CODE' name='alexaVerifyID'/>
<meta content='Kathmandu,Nepal' name='geo.placename'/>
<meta content='YOUR-NAME' name='Author'/>
<meta content='general' name='rating'/>
<meta content='Nepal' name='geo.country'/>
<meta content='en_US' property='og:locale'/>
<meta content='english' name='language'/>
<meta content='https://www.facebook.com/USER_NAME' property='article:author'/>
<meta content='https://www.facebook.com/PAGE_USER_NAME' property='article:publisher'/>
<meta content='FACEBOOK-APP-ID' property='fb:app_id'/>
<meta content='FACEBOOK-ADMIN-ID' property='fb:admins'/>
<meta content='@OFFICIAL_TWITTER_HANDLE' name='twitter:site'/>
<meta content='@YOUR_TWITTER_USERNAME' name='twitter:creator'/>
<meta content='all' name='robots'/>
<meta content='index, follow' name='robots'/>
<meta content='snippet' name='googlebot'/>
<meta content='noodp' name='googlebot'/>
<meta content='all' name='audience'/>
<!-- End 2019 All In one SEO Pack for Blogger by tarang.com.np -->
Note: Replace the Orange text with your appropriate USERNAME/NAME/URL/ID.

Finally, click Save theme and you are done.
Read More
Stellax August 24, 2019  No comment

Friday, August 23, 2019

Tagged under: , , ,

Add Facebook Open Graph Meta Tag To Blogger/Wordpress

When it comes to make our blog post popular and to engage more audience with our post we must have to share our content on social media. For that social media platform like facebook, twitter, google+ etc... comes first.
When we share our post on social media, it is very important that our post looks attractive and contains enough information about our post, like images, post-title, post-description, post-url etc... so that people can get basic information about our post.

Every social media platform have their own meta-tags which we can add in our website and take control over how our post contents appears on social media when we share them.

Facebook Open Graph Meta-Tag  

Without these tags, the Facebook Crawler uses internal heuristics to make a best guess about the title, description, and preview image for your content, but some times you might end up with having wrong image or title displayed for your post which is very undesirable.

So, Adding below custom meta-tags will help you to make your post look decent and more informative.

Facebook's open graph tags are prefixed with og: and then continued with specific property.
See following image to know how it works
Add Facebook Open Graph Meta Tag To Blogger/Wordpress


Some basic meta-tags


og:title    -    It represent the title of your article (most important as your title have main keywords of your post).

og:url    -    The canonical url for your page.

og:type    -    Type of media of your content (for example. 'blog', 'website', 'article' etc... For more refer object type).

og:description  -  It will display your post description below the post title when you share post on facebook.

og:image   -   This tag is useful to display high quality image from your post. Since image is the main thing which attracts the more people towards your post. So it is essential that right image showed up for your shared post. This tag will help you for this.


Adding Meta-Tags To Blogger

In order to add these tags you just have to edit HTML code of your site, no coding skill is required.

Now, follow below procedure to add open graph meta-tags


Note that Open Graph recommends specifying the “og” RDFa Core 1.1 CURIE prefix mapping via
<html prefix="og: http://ogp.me/ns#">
, no such markup is required for Twitter cards.

So, before adding actual meta-tags, add below prefix in your <html>

xmlns:og='http://ogp.me/ns#'
Add Facebook Open Graph Meta Tag To Blogger/Wordpress

After adding above prefix, now add below meta-tags...
You have to add these meta-tags between

<head>
add here
</head>

I recommend you to add just above the </head> , so that things don't get messed up.

<!-- Facebook OpenGraph starts-->
<meta content='website' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<!-- Title, URL & Description -->
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl.https' property='og:url'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='data:post.snippet' property='og:description'/>
</b:if>
<!-- Image -->
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta content='1200' property='og:image:width'/>
<meta content='630' property='og:image:height'/>
<b:else/>
<meta content='YOUR-SITE-LOGO-URL' property='og:image'/>
</b:if>
<!-- FB specific -->
<meta content='YOUR-FB-PAGE-ID' property='fb:admins'/>
<meta content='YOUR-FB-APP-ID' property='fb:app_id'/>
<!-- Facebook OpenGraph ends-->

Things to be changed in above tags...

1  -  'YOUR-SITE-LOGO-URL'  --  Here, put url of the image which you want to show up when you share your site's Home Page. (it may be your site logo or other image).

2  -  'YOUR-FB-PAGE-ID'  --  If you have made FB page for your site then put your page id in this field.

3  -  'YOUR-FB-APP-ID'  --  Here goes your FB app id.(if you don't know how to create/get FB app id then read below article).

That's it for today, if you have any query then please do comments and let me know.

Read More
Stellax August 23, 2019  1 comment
Subscribe to: Posts (Atom)