Media meta html how to#

og:locale: If you want to localize your tags, it would probably make sense to include locale.Similarly to og:title, this may be the same as your websiteвЂ™s tag, unless youвЂ™d like to present it differently.

og:description: A description of your page.

Though youвЂ™ll generally be okay with the basics, here are a few more that would be worth adding: You can find the most common open graph website types on the open graph webpage: Some other open graph tags that are worth adding When navigating to a blog post, it would look like: So if I were to create an open graph type for my website, it might look like the following on my homepage: So if your homepage is 'website,вЂќ you could always have another page of type вЂњvideoвЂќ. Similar to the others, this is unique for each page. If itвЂ™s a general website with no specific vertical, you would probably just want to use the type вЂњwebsiteвЂќ. If your page is focused on a single video, it probably makes sense to use the type вЂњvideoвЂќ. When setting up your open graph tags, youвЂ™ll want to have an idea of which type will make more sense for your website.

This includes types like website, article, or video. The open graph protocol has a few variations of the вЂњtypeвЂќ of website it supports. So if I were to create a set four basic open graph tags for my website,, it might look like: The tag used will be a tag and should look like this pattern: When placing a tag on your website, you should place it in the along with any other metadata. og:url: This should be the URL of the current page.It should be a high resolution image that the social networks will use in their feeds. og:image: This should be a link to an image that youвЂ™d like to represent your content.IвЂ™ll explain more in the next section, though a generic вЂњtypeвЂќ is вЂњwebsiteвЂќ. og:type: The вЂњtypeвЂќ of website you have.This is typically the same as your webpage's tag unless youвЂ™d like to present it differently. While it should be pretty straightforward, hereвЂ™s a breakdown of what each of the tags mean: Anatomy of a Twitter Card using Open Graph tags These tags should be unique for each page you serve, meaning your homepageвЂ™s tags should all be different from your blog post articleвЂ™s page. The four basic open graph tags that are required for each page are og:title, og:type, og:image, and og:url. So what happens if you donвЂ™t have open graph tags? Nothing bad will happen, but you wonвЂ™t be taking advantage of some of the features that help make your content stand out next to the loads of other content getting posted on the internet. Example of a Twitter Card with a large image It correctly grabs the title of my page and the description, but it's not the most enticing looking tweet in a feed.Д¬ontrast that to the preview of a single post and we see a different story. This more often than not doesnвЂ™t go so well. Most social networks by default will try to make their best effort in creating a preview of your content. This will help encourage people to check out your content and inevitably click through to your content.

Media meta html how to#

How to Become a Full Stack Web Developer in 2020 #javascript #fullstack - Colby Fayock March 10, 2020 This might not necessarily matter if youвЂ™re just sending it to one friend, but if you want to share it or want it to be shared on any social network or app that utilizes rich previews, youвЂ™ll want that preview to be as effective as possible. Why do I need it?Д¬ontent on the internet is typically created with at least one goal in mind - to share it with others. These pieces all fit together to form a representation of each individual page of the internet. Within it, you can provide details as simple as the title of a page or as specific as the duration of a video. Open Graph is an internet protocol that was originally created by Facebook to standardize the use of metadata within a webpage to represent the content of a page.

Twitter and other social media networks using open graph.

Some other open graph tags that are worth adding.

How can we make sure our content stands out when getting shared on social feeds around the internet? It can take a lot of time to build content and maintain a website.