How does SEO works? Facebook Open Graph Markup, Twitter Card Markup and and Google meta tags for SEO.
Search Engine Optimization, or SEO, is the process of optimizing a website to rank higher in search engine results pages (SERPs) for specific keywords or phrases. In simple terms, SEO is the art and science of getting your website to show up at the top of search engine results pages when people search for keywords related to your business or industry. In this blog post, we will explain how SEO works and what you can do to improve your website’s ranking.
Every search engine have it’s own crawler. The crawler scraps the website that is live on the internet. Like Facebook, Twitter, Google have it own crawler. The Crawler gets data from server-side render, which we can see by clicking on the right button of the mouse View Page Source option. The Crawler store all data of the website on his Database. Let’s add some meta data on the website master layout head to help the crawler to scrap your website data.
Open Graph Markup for Facebook | Facebook Meta Tag
For example, here’s how to mark up an article, news story or blog post with og:type="article" and several additional properties:
<meta property="og:url" content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
<meta property="og:type" content="article" />
<meta property="og:title" content="When Great Minds Don’t Think Alike" />
<meta property="og:description" content="How much does culture influence creative thinking?" />
<meta property="og:image" content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />
Visit: https://developers.facebook.com/docs/sharing/webmasters/
The properties include descriptive meta-data about the article that we specifically want to present when someone shares the article.
Twitter Card Markup | Twitter Meta Tag
The example below uses a mix of Twitter and Open Graph tags to define a summary card:
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@nytimesbits" />
<meta name="twitter:creator" content="@nickbilton" />
<meta property="og:url" content="http://bits.blogs.nytimes.com/2011/12/08/a-twitter-for-my-sister/" />
<meta property="og:title" content="A Twitter for My Sister" />
<meta property="og:description" content="In the early days, Twitter grew so quickly that it was almost impossible to add new features because engineers spent their time trying to keep the rocket ship from stalling." />
<meta property="og:image" content="http://graphics8.nytimes.com/images/2011/12/08/technology/bits-newtwitter/bits-newtwitter-tmagArticle.jpg" />
Google Meta Tag
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Tags
Have any questions? Contact Me or left your comment below.
Category
Latest Posts
-
How to block a site from your PC hosts
-
How to install Vue js in your machine
-
Contact form 7 to new post on your custom post type
-
Maximize Your Site's Potential: How to Increase WordPress Maximum Upload File Size
-
Solve All-In-One WP Migration Stuck While Importing with These Easy Simple Steps
-
Boost Your Website Design with Elementor Pro: Free Download Available Now!
Stay Connected
About Me
Khalid Bin Ahsan
Full Stack Web Developer
Recent Comment
Email: developer@khalidbinahsan.com