Below is the small but useful snippet that can customize the Metadata of your Website or Blog.
This is good set of codes if you want your website to have a custom preview image, description and title when sharing your site to giant social network.
I always put this code in every website development projects that I made in my freelance web design service
Be sure to add this code below the <head> tag of your website.
In Blogger, Add this code after the </head> tag of template.
Facebook Metadata
<meta property="fb:page_id" content="YOUR PAGE ID HERE" />
<meta property="og:image" content="YOUR FULL CUSTOM IMAGE URL HERE" />
<meta property="og:description" content="YOUR DESCRIPTION HERE" />
<meta property="og:title" content="YOUR CUSTOM TITLE HERE" />
Google+ Metadata
<meta itemprop="name" content="YOUR CUSTOM TITLE HERE" />
<meta itemprop="description" content="YOUR DESCRIPTION HERE" />
<meta itemprop="image" content="YOUR FULL CUSTOM IMAGE URL HERE" />
<meta itemprop="description" content="YOUR DESCRIPTION HERE" />
<meta itemprop="image" content="YOUR FULL CUSTOM IMAGE URL HERE" />
Here is the example code that I used to this blog.
You can share this blog post to see the working snippet :D.
<!-- Facebook metadata -->
<meta property="og:image" content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5ipnbMFlh_QHfkUzD0IalU0hjwQhXS2MMPfuq7izUK8_cv0J9b6JC1rj0-4fpuzyv-zVrreIvfWw-23J5NRoA9wheAM5CQ6MvtY17prkRoNYZwve82sf8gst1R5FJTFdVjdYo4X2uEyQ/s1600/preview.jpg" />
<meta property="og:description" content="Just a simple blog of Sketch2Pixel.com" />
<meta property="og:title" content="Sketch2pixel.com Blog" />
<!-- Google+ metadata -->
<meta itemprop="name" content="Sketch2pixel.com Blog" />
<meta itemprop="description" content="Just a simple blog of Sketch2Pixel.com" />
<meta itemprop="image" content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5ipnbMFlh_QHfkUzD0IalU0hjwQhXS2MMPfuq7izUK8_cv0J9b6JC1rj0-4fpuzyv-zVrreIvfWw-23J5NRoA9wheAM5CQ6MvtY17prkRoNYZwve82sf8gst1R5FJTFdVjdYo4X2uEyQ/s1600/preview.jpg" />
<meta property="og:image" content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5ipnbMFlh_QHfkUzD0IalU0hjwQhXS2MMPfuq7izUK8_cv0J9b6JC1rj0-4fpuzyv-zVrreIvfWw-23J5NRoA9wheAM5CQ6MvtY17prkRoNYZwve82sf8gst1R5FJTFdVjdYo4X2uEyQ/s1600/preview.jpg" />
<meta property="og:description" content="Just a simple blog of Sketch2Pixel.com" />
<meta property="og:title" content="Sketch2pixel.com Blog" />
<!-- Google+ metadata -->
<meta itemprop="name" content="Sketch2pixel.com Blog" />
<meta itemprop="description" content="Just a simple blog of Sketch2Pixel.com" />
<meta itemprop="image" content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5ipnbMFlh_QHfkUzD0IalU0hjwQhXS2MMPfuq7izUK8_cv0J9b6JC1rj0-4fpuzyv-zVrreIvfWw-23J5NRoA9wheAM5CQ6MvtY17prkRoNYZwve82sf8gst1R5FJTFdVjdYo4X2uEyQ/s1600/preview.jpg" />
After you add the codes change the values (text in bold) of each line with yours.
Debug your site using FB Debugger and see if your metadata is working.
No comments:
Post a Comment