Meta Tags are HTML tags hidden within the header of a web page. These tags contain information about your page. For example: a title, a brief description, and images.
When a social media channel receives a URL, behind the scenes it goes to this URL to try and gather information about this page. While most channels do their best to figure out what title or image to display from the page itself, we can be more explicit by setting up meta tags. If these meta tags are present, the channel will use them first.
We will be using the SEO (Search Engine Optimization) features of Communities to set up meta tags. The Community needs to be public to enable the SEO features.
Start by going into the Community builder. Then choose the Standard page you want to add meta tags to. In the example pictured, we modified the Home page.
- Click the gear to open the properties panel for the page.
- In the SEO section, fill out the Title and Description fields.
- The Title field changes the title shown in a web browser’s tab or window title.
- Click the Edit Meta Tags button to open the editor.
From the editor you’ll want to enter meta tags with the following code:
<meta property="og:title" content="Custom Home Page Title">
<meta property="og:description" content="This is the description text that will appear on this page.">
<meta property="og:image" content="https://na132.lightning.force.com/img/setup/tiles/mys1.png">
<meta name="twitter:card" content="summary_large_image">Make sure you replace the “content” with your own value. The exception is on the “twitter:card” meta tag. That content describes how Twitter should display your image.
Similar to setting up Standard pages, we need to navigate to the Object pages we want to add meta tags to in builder.
- Click the gear to open the properties panel for the page.
- In the SEO section, fill out the Title and Description fields. Use Dynamic Properties so these values auto fill.
- Click the Edit Meta Tags button to open the editor.
From the editor you’ll want to enter meta tags with the following code:
<meta property="og:title" content="{!Record.Subject}">
<meta property="og:description" content="{!Record.Description}">
<meta property="og:image" content="{!Record.ShareImageUrl__c}">
<meta name="twitter:card" content="summary_large_image">Make sure you replace the “content” with your own Dynamic Property values. You can use standard Salesforce fields or Custom fields. For the image meta tag, we have a custom field that points to an image’s URL. This is the image that will show up in Social Channel feeds.
All the meta tag content in Communities is generated on the client side via JavaScript. A lot of Social Media channels do not run JavaScript, so these tags won’t show for them. To fix this, Salesforce makes snapshots of these pages which provide the meta tags. There currently isn’t a way to generate these snapshots on demand (Though Salesforce is planning this feature in the future1). So you may need to wait a couple of days before these meta tags show up on your org in a way that is visible to Social Media Channels. Also worth noting is that snapshots are only available in Production orgs. So we can’t test this in DE or Sandbox orgs.
- Facebook Debugger - https://developers.facebook.com/tools/debug/
- Twitter Card Validator - https://cards-dev.twitter.com/validator
“Those pages need to have snapshots generated for them, which can take time (or if it's on DE/Sandbox, is not possible today). We have a feature already (not shipped) that allows customers to instantly generate/refresh snapshots for individual pages to test features like og tags.
For larger scale production use cases, they can use the route-type based snapshot refresh or they'll just have to wait until all URL snapshots are refreshed.”
Footnotes
-
From David Green [email protected] ↩