twitter:card : works quite similarly with og:type.Since we have to explore the main part of the open graph tags, I am going to be brief and give you the tag names as reference: Let’s explore that in our next section!Īs for Twitter, it is called a “card”. Īs I mentioned earlier, Twitter’s open graph tags look slightly different. og:url : This is where you paste the URL of your website to this meta tag. Here are the common examples that you can put inside the og:type tag:Ģ. og:type : This tells the DOM how you describe the object you are sharing, whether it is a blog post, website, or video, etc. There are two more tags that is not in the picture you also have to include:ġ. It helps people understand what your website does. Og:description : This should contains the description of your website, similar to og:title. At this size, your thumbnail will fit perfectly in both large image thumbnail or small image. The most frequently requested resolution for OG image is 1200px x 627px. This is crucial!Įither you get your image from your CMS(content management system) or any open sources, or you can get it from your local file and replace the with %PUBLIC_URL%/the-name-of-your-image.(whatever source your image is from). Og:image : This is how you ensure the thumbnail of your website shows on social media when you share. In the section, this will look like this: This is how you define your content’s title. Let’s break down what they do and I will be using the example from the picture above to help you understand what’s going on: Here are the few things you have to put in as you saw from the picture above: og:image, og:title, og:description and of course there are more depending on your needs. In the following section, we are going to explore how we are going to use open graph tags.īefore we start, you need to know that for the og tags are different for Twitter and we’ll look at it in a bit! That is why open graph meta tags are important to especially marketers! Think about it, would you click on a link that has neither website preview, title nor descriptions? You might think those are either scam links or you are just simply not interested. In the marketing perspective, the open graph meta tags can have a massive impact on conversions and click-through rates. Why are Open Graph Tags Important?Īs mentioned earlier, open graph meta tags are created to allow information easier to control on social media, like Facebook. It was created to help optimize Facebook posts by providing more control over the information travel from third-party website when shared on Facebook (for instance, when the post is liked or shared).Īll the open graph meta tags should be in the section in HTML to send the information to the DOM. Open graph tag is introduced by Facebook in 2010. SO, hopefully you find your way to this article because you are curious about what “open graph tag” is. I noticed it is not something that are mentioned in tutorials, at least in all the tutorials that I have watched. I always wonder how do people have their website preview display when they share on social media, but not when I share mine? And you know what, turns out the magic is all on this og meta tag. Let me be honest, I just learned this a few days ago. To change an existing rule, double-click on that rule.Today, I would like to introduce the open graph tag.In the styles accordion you will see which style rules are applied to the element and from which line of css they originate.In the right panel you will see a styles accordion, expand it if it is not already.If it is not, mouse over the element again and right click and Inspect Element again, it should now be highlighted. You should see that the misbehaving element is highlighted in blue in the left panel.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |