Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Social Network Metadata | Metadata and the Head Element
Introduction to HTML

book
Social Network Metadata

Facebook uses a set of specific metadata tags that can be included in an HTML document to provide information about the page.

  • og:title specifies the title of the page;

  • og:type specifies the type of content on the page;

  • og:image specifies the URL of an image that represents the page;

  • og:url specifies the URL of the page;

  • og:description provides a brief description of the page.

Including these tags in an HTML document allows Facebook to correctly display a link to the page when it is shared on the platform.

Here is an example of HTML code that includes Facebook-specific metadata tags:

html

index.html

copy
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta property="og:title" content="Page Title" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.example.com/page" />
<meta property="og:image" content="https://www.example.com/image.jpg" />
<meta property="og:description" content="A brief description of the page." />
</head>
<body></body>
</html>

Twitter uses a different set of metadata tags than Facebook.

  • twitter:card specifies the type of card that will be used to display the link on Twitter;

  • twitter:title identifies the page's title;

  • twitter:image tag, which identifies the URL of an image that represents the page.

All the other platforms may have their specific metatags.

html

index.html

copy
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Page Title" />
<meta name="twitter:image" content="https://www.example.com/image.jpg" />
</head>
<body></body>
</html>

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 3. Capítulo 2

Pergunte à IA

expand
ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

We use cookies to make your experience better!
some-alt