[FEAT] Add Social Media Tags

[311-data]

Overview

We currently don’t have any social media tagging to enable a great site when someone mentions our site.

Action Items

Add todo based on the template below

Resources/Instructions

https://github.com/hackforla/.github/blob/master/.github/ISSUE_TEMPLATE/control-what-appears-when-you-paste-your-sites-link-in-social-media-sites.md

[311-data]

Assigned to @danarchen for initial review for how this should look when we do it.

[pras4u]

Tag	Description	311-data content
og:url	The canonical URL for your page. This should be the undecorated URL, without session variables, user identifying parameters, or counters. Likes and Shares for this URL will aggregate at this URL. For example, mobile domain URLs should point to the desktop version of the URL as the canonical URL to aggregate Likes and Shares across different versions of the page.	https://311-data.org/
og:title	The title of your article without any branding such as your site name.	311-Data Neighborhood Engagement Tool
og:description	A brief description of the content, usually between 2 and 4 sentences. This will displayed below the title of the post on Facebook.	Hack for LA’s 311-Data Team has partnered with the Los Angeles Department of Neighborhood Empowerment and LA Neighborhood Councils to create 311 data dashboards to provide all City of LA neighborhoods with actionable information at the local level.
og:image	The URL of the image that appears when someone shares the content to Facebook. See below for more info, and check out our best practices guide to learn how to specify a high quality preview image.

[pras4u]

please refer last column in table above -- content for the open graph markup fields ( to enable social media share / link decoration). @johnr54321 Have done minor changes to description ( from the marketing one pager). Hope this is fine

[pras4u]

This ticket depends on #711

[pras4u]

@adamkendis We need to go ahead with the existing content in the table below. We will add the social media handles later on in a separate ticket. Request you to take this ticket up next. Please let me know in case of questions. Assigning the ticket to you.

[danarchen]

[adamkendis]

@pras4u Feature implemented in #729 and working for dev site (http://dev.311-data.org). Our description is 250 characters while twitter documentation specifies a max of 200 characters. I made some minor changes to the twitter description (replacing 'Los Angeles' with 'LA') but we're still over the max. I will update the tag with a shorter description once drafted.

Once we obtain our facebook app id and twitter handle, these can be added to the tags as well.

Twitter

Facebook