Skip to content

Instantly share code, notes, and snippets.

@carpas
Last active October 3, 2017 16:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save carpas/8454d91934c19923fdadd5761f48ae19 to your computer and use it in GitHub Desktop.
Save carpas/8454d91934c19923fdadd5761f48ae19 to your computer and use it in GitHub Desktop.
Open Graph Tags
Place these tags between the <head> ... </head> tags:
<!-- Open Graph -->
<meta property="og:title" content="CUSTOM-PAGE-PRODUCT-TITLE" />
<meta property="og:type" content="product" />
<meta property="og:url" content="URL-OF-THE-PAGE" />
<meta property="og:image" content="http://URL-OF-PRODUCT-IMAGE-1200X628-DIMENSION.jpg" />
<meta property="og:description"
content="ENTER CUSTOM TEXT HERE DESCRIBING THE PRODUCT OR PAGE." />
<meta property="og:locale" content="pt_BR" />
<meta property="og:site_name" content="NAME-OF-SITE-HERE" />
<meta property="fb:app_id" content="FACEBOOK-PAGE-ID-HERE" />
<!-- Open Graph Product Details -->
<meta property="og:price:amount" content="00.00-SALE-PRICE" />
<meta property="og:price:standard_amount" content="00.00-FULL-PRICE" />
<meta property="og:price:currency" content="BRL" />
<meta property="og:availability" content="instock" />
<meta property="og:eligibleRegion" content="BR" />
<!-- Twitter card -->
<meta name=”twitter:card” content=”SUMMARY” />
<meta name=”twitter:title” content=”CUSTOM-TITLE” />
<meta name=”twitter:description” content=”Your 200-character description here” />
<meta name=”twitter:url” content=”http://www.yourdomain.com” />
<meta name=”twitter:image” content=”http://www.yourdomain.com /image-name.jpg” />
HOW TO QA SOCIAL TAGS:
Validate Facebook tags: https://developers.facebook.com/tools/debug/
Validate Twitter tags: https://dev.twitter.com/docs/cards/validation/validator
RESOURCES/MORE INFO:
https://developers.facebook.com/docs/sharing/webmasters/
https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started
https://developers.pinterest.com/docs/rich-pins/products/
https://developers.pinterest.com/docs/rich-pins/overview/?
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment