Improve social media thumbnail and title

[thansidwell]

When people share the site on social media, the image and title don't provide a very good introduction to the website.

Make these changes

• Add a new social media image thumbnail attached, that better illustrates the role of the website of being a resource to community groups cleaning properties.
• Add the new title
  • Clean & Green Philly - Helping communities clean vacant properties
• Add the description:
  • The ultimate toolkit to help community groups clean and green vacant properties to reduce gun violence in Philadelphia.

(I don't think this is best, but it seems certainly better than what it is right now. We can revise and improve later as well.)

Here's how it should look in various systems.

Here's the image thumbnail. 👇

You can use a tool like this to preview that it's all being parsed correctly. https://metatags.io

This ticket builds on #180.

[paulhchoi]

@thansidwell should we use this image for all sub-pages on the site, or just the homepage? for example, if someone shared cleanandgreenphilly.org/find-properties, should this image show too? if not, could you identify different images or graphics for some of the subpages as well? probably just the nav links would be good, eg: /find-properties, /get-access, /transform-property, and /about

[thansidwell]

@paulhchoi, good question! I’d recommend this.

• For images use the same thumbnail image
• For titles use page title plus site title
  • “Find Properties — Clean & Green Philly”
• For descriptions perhaps use the page subtitles, the word first body-lg sentence on the page

[AZBL]

I'd like to be assigned this please @thansidwell

[Moylena]

@AZBL Hi is this done?

[AZBL]

@AZBL Hi is this done?

Hi no sorry still working on it. I had less time than I thought last week. I should have it done by the end of the weekend if that's alright.

[AZBL]

@Moylena @thansidwell I have this mostly done.

-I just want to confirm, when you said, "For images use the same thumbnail image" do you mean use the thumbnail you supplied for all pages? -I have the different page titles formatted how you suggested. -As far as the descriptions, some pages don't have subtitles. For a couple I used my best judgement. I'm not sure what you'd prefer for Find Properties and Gentrification pages so I left them blank for now.

Maybe @paulhchoi or @CodeWritingCow can help with this, but it might be a bit tricky to test this. Right now I'm using something called ngrok which basically creates a temporary url which I'm using for testing everything right now. I don't think it'd make sense to open a PR with that temporary url in there. I'm not sure if different environment varibables exist or should be created in Vercel for staging and production and that could be used to determine the url? Or I could just put in the staging url and if everything works for that switch to the production one, but this doesn't sound like the best approach.

Edited to include Gary

[CodeWritingCow]

Hi @AZBL, I'm not familiar with Ngrok. Can you post a screen recording (or some screenshots) to show how you're testing with it? Thanks!

(Meanwhile, I'll read up on Ngrok.)

[CodeWritingCow]

Once we see how you're currently testing your work with Ngrok, that'll give us a better idea of how to test, and which URL to use for testing.

As for whether different environment variables exist in Vercel, the official docs say yes. We can configure environment variables for different environments in Vercel. However, I don't have access to Vercel yet, so let me reach out to Nissim about this.

[AZBL]

@CodeWritingCow I installed the Chrome Extension Ograph Previewer, which I think is a simpler way of testing rather than ngrok. Here are some screen shots. I can open a PR and more detailed explanation and screen shots if you'd like. Right now I have the openGraph url set to the staging url, so that would have to be switched prior to deploying to production.

[CodeWritingCow]

@AZBL this looks great! When you are ready, go ahead and submit a PR. Once it's approved, let's change the openGraph URL from staging to production before we merge the PR.