【My Study Note】UX with meta tags
UX with meta tags
Social networks are a great tool to share content with friends and family, and even with coworkers and business partners. When you share a link, most social networks generate a preview of the link to let users know what the linked webpage is about.
By using Meta tags to control what information is displayed to users, you can get more clicks when you share your websites. But the Meta tags web developers use for this purpose are different from the traditional SEO Meta tags. Because traditional SEO Meta tags are oriented towards search results, not direct links.
Open Graph Protocol
Facebook established the Open Graph Protocol in 2010. The Open Graph Protocol is a set of Metadata rules that allow web pages to describe themselves to social networks.
How Open Graph Protocol Metadata is defined
<head>
<meta property = "og:title" content = "My First Web Page" />
</head>The Open Graph Protocol uses Meta tags added to the head element, but they are slightly different than SEO meta tags.
Instead of the name attribute, the Open Graph Protocol uses the property attribute to define the Metadata name. Then, like the regular Meta tags, it uses the content attribute to define the Metadata value.
Each property in the Open Graph Protocol starts with og : as a convention to identify it as an Open Graph Protocol related tag.
The Open Graph Protocol requires that you must always include four properties on a webpage.
- title
- type
- URL
- image
Title
The title property defines the title of the page, this is the text that will appear in the preview.
Type
The type property defines the type of content, such as a website, video, music, or article. Depending on the value you specify as the type, other properties may be required.
URL
The URL property defines the permanent web address that the social network must use for the specific page.
Image
The image property defines a URL to an image that must display when the website is shared.
Together, these Open Graph Protocol properties enables social media platforms to create a preview of the shared web link.
Some other properties
- The description property provides a description of the webpage.
- The locale property describes the language and territory of the webpage’s content. For example, en_US
specifies that the page is in English and the locale is the United States. - The site name property describes the name of the overall website that the webpage belongs to.