search

Plant-for-the-Planet-org / planet-webapp

The Open Source and Commission Free Application that powers the Trillion Tree Campaign. Visit us to meet reforestation Organizations, individuals and companies who are on a journey to plant, monitor and restore a trillion trees.
https://www.trilliontreecampaign.org
Other
36 stars 15 forks source link

Integrate next-seo with og: tags #167

Closed sagararyal closed 4 years ago

sagararyal commented 4 years ago

https://github.com/garmeeh/next-seo

for Main Page:

<meta property="og:site_name" content="Plant-for-the-Planet">
<meta property="og:locale" content="en_US">
<meta property="og:url" content="env url of tenant">
<meta property="og:title" content="Plant trees around the world - Plant-for-the-Planet">
<meta property="og:description" content="No matter where you are, it's never been easier to plant trees and become part of the fight against climate crisis.">
<meta name="description" content="No matter where you are, it's never been easier to plant trees and become part of the fight against climate crisis.">
<meta property="og:type" content="website">
<meta property="og:image" content="image url">
<link rel="alternate" href="android-app://org.pftp/projects"> only if tenant is planet
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Plant trees around the world - Plant-for-the-Planet">
<meta name="twitter:site" content="@pftp_int">
<meta name="twitter:url" content="https://www.trilliontreecampaign.org/">
<meta name="twitter:description" content="No matter where you are, it's never been easier to plant trees and become part of the fight against climate crisis.">

---app settings below also requite iOS icons in meta.

<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="application-name" content="Plant-for-the-Planet">
<meta name="apple-mobile-web-app-title" content="Plant-for-the-Planet">

For /p?project-name

<meta property="og:title" content="{{Name of Project}} by {{org Name}}">
<meta property="og:description" content="ca. 147 character description + ...">
<meta name="description" content="147 character description + ....">
<meta property="og:type" content="website">
<meta property="og:image" content="featured image url">
<meta property="og:video" content="featured video url">

For /t/user-name

<meta property="og:title" content="Define Title">
<meta property="og:description" content="ca. 147 character description + ..."> or Alternative text if not available in the user profile
<meta name="description" content="147 character description + ....">
<meta property="og:type" content="profile">
<meta property="og:image" content="featured image url">

profile:first_name - string - A name normally given to an individual by a parent or self-chosen. profile:last_name - string - A name inherited from a family or marriage and by which the individual is commonly known. profile:username - string - A short unique string to identify them.

sagararyal commented 4 years ago

https://playwright.tech/blog/generate-opengraph-images-using-playwright

This could be a way to generate images automatically however we do want to control the images for users; as in display the image with the map where they have planted trees.