My collection of SEO and meta tags for web development.

meta-tags.html

<!-- DON'T FORGET TO EDIT THESE FOR YOUR WEBSITE. -->
<!-- 
    Meta descriptions can be any length, but Google generally truncates snippets to ~155–160 characters. It's best to keep 
    meta descriptions long enough that they're sufficiently descriptive, so we recommend descriptions between 50–160 characters.
 -->
<meta name="description" content="This is exactly 155 characters long. Lorem pisicing elit. Repellat, aspernatur quam? Dignissimos error, eum labore officia quibusdam aliquid, totam laborum." />

<!-- 
    READ MORE ABOUT THE OPENGRAPH PROTOCOL HERE: https://ogp.me/
    https://developers.facebook.com/docs/sharing/webmasters
    https://developers.google.com/web/fundamentals/discovery/social-discovery?hl=en
    https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started
 -->
<meta property="og:title" content="HERE YOU PUT THE TITLE WHICH YOU WANT TO BE DISPLAYED WHEN YOUR PAGE IS LINKED TO" />
<meta property="og:type" content="article" />
<meta property="og:url" content="YOUR PAGES URL" />

<!-- THE SUGGESTED SIZE FOR A FACEBOOK OPEN GRAPH IMAGE IS ABOUT 1200 PIXELS BY 630 -->
<meta property="og:image" content="./assets/images/og-image-facebook-1200x630.png" />
<!-- INCLUDE THE WIDTH AND THE HEIGHT SO FACEBOOK CAN RENDER THE IMAGE WITH SPEED -->
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<!-- THESE ARE OPTIONAL BUT GENERALLY RECOMMENDED -->
<meta property="og:site_name" content="SITE NAME" />
<meta property="og:locale" content="en_US" />
<meta property="og:description" content="YOUR PAGE’S DESCRIPTION. REMEMBER THAT FACEBOOK WILL DISPLAY ONLY ABOUT 300 CHARACTERS OF DESCRIPTION" />

<!-- TWITTER CARD IMAGE SIZE SHOULD BE 1024 PIXELS BY 512 PIXELS -->
<meta name="twitter:image" content="./assets/images/og-image-twitter-1024x512.png" />
<meta name="twitter:title" content="TITLE OF POST OR PAGE" />
<meta name="twitter:description" content="DESCRIPTION OF PAGE CONTENT" />
<meta name="twitter:site" content="@USERNAME" />
<meta name="twitter:creator" content="@USERNAME" />

<!-- DECLARE YOUR COOL SVG FAVICON - HERE WITH A STANDARD FAVICON.ICO FALLBACK FOR OLDER BROWSERS. -->
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="alternate icon" href="/favicon.ico">
<!--
    LEAVE IT TO APPLE TO HANDLE THINGS DIFFERENTLY 😠 
    https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/pinnedTabs/pinnedTabs.html
 -->
<link rel="mask-icon" href="/favicon.svg" color="#ff8a01">