Appfarm Documentation
Getting startedDocumentationCommunityAppfarm Create
  • Overview
  • Getting Started
    • What is Appfarm?
    • Key concepts
    • Quickstart
      • Speed intro
      • Step-by-step guide
    • Appfarm Showroom
    • FAQ
  • Appcademy
    • Learning paths
    • Appfarm Fundamentals
      • Intro Course
        • 1. Intro to No-Code and Appfarm
        • 2. Navigation in Appfarm Create
        • 3. What is Apps?
        • 4. Intro to UI Editor
        • 5. Data Model
        • 6. App Data
        • 7. Actions
        • 8. Tips and Tricks
        • 9. Intro to practical walkthrough
        • 10. Create a details view of a Project
        • 11. Create a Custom List
        • 12. Swipe and Delete
        • 13. Functionality for simple Create of Data
        • 14. Upload and Download Photos
        • 15. Input Dialog with Validation and Save
        • 16. Dashboard
        • 17. Summary
        • Quiz
      • User Interface Fundamentals
        • Container - Sectioning, Styling and Repeating
        • Conditional Styles
        • Motions
        • Responsive Design
        • Step-by-step workflow
        • Featured UI Components
        • Quiz
      • App Data Fundamentals
        • Data Source Filtering
        • App Variables and Runtime Properties
        • URL Parameters
        • Quiz
      • Actions & Logic Fundamentals
        • Event Handlers
        • Featured Action Nodes
        • Context Parameters
        • Quiz
      • Services Fundamentals
        • Introduction to Services
        • Setting up a Service
        • Scheduling a Service
      • Integration Fundamentals
        • The web request action node
        • Fetch data from an endpoint
        • Map data to a data source
        • Modify the response
        • Nested data mapping
        • Path parameters
        • Authentication
        • Send data to an endpoint
        • Quiz
      • User handling and permissions
        • Users and roles
        • Permissions
        • Creating users
        • Extending the User object class
        • Updating and deleting users
        • Unauthenticated access
        • Quiz
    • Appfarm Professional
      • User Interfaces
        • Featured UI Components
        • Concepts and Use Cases
      • Data Structures & Data Handling
        • Data Features
        • Search & Filters
        • Featured Action Nodes
        • GraphQL
      • Logic & Flow
        • Logical Concepts
        • Date and Time Handling
        • Featured Action Nodes
        • Exception Handling
      • Login & Configuration
        • Login and Authentication
        • Settings, Configuration and Languages
      • Security & Operations
        • Security and Permissions
        • Deployment
        • Schedules and Logs
        • Debugging and App Health
      • Performance & Optimization
        • Optimizing Performance
        • Enhancing Functionality
    • Appfarm Sales Representative
    • Appfarm Developer Forum
      • Session 1: Data Modeling in Appfarm Create
      • Session 2: App Data in Appfarm Create
      • Session 3: Services in Appfarm Create
      • Session 4: Optimizing Performance
    • Background
      • Databases
        • Data modeling 101
        • Database normalization
  • Library
    • UI components
      • Advanced bar chart
      • Advanced bubble chart
      • Advanced combined chart
      • Advanced gantt chart
      • Advanced heatmap chart
      • Advanced line/area chart
      • Advanced pie chart
      • Advanced scatter plot chart
      • Advanced solid gauge chart
      • Animated component
      • Avatar
      • Avatar group
      • Basic bar chart
      • Basic gauge chart
      • Basic line chart
      • Basic pie chart
      • Bottom navigation
      • Button
      • Checkbox
      • Chip group
      • Circular progress
      • Coded component
        • Coded component examples
      • Container
      • Date & time picker
      • Drawable canvas
      • Floating action button
      • Icon
      • Icon button
      • Iframe
      • Image
      • Linear progress
      • List
      • Map
      • Menu list
      • Multi select
      • PDF reader
      • Popover
      • Radio buttons
      • Rich text editor
      • Rich text
      • Select
      • Slider
      • Speed dial
      • Switch
      • Table
      • Tabs
      • Text
      • Text edit
      • View container
      • Visibility group
    • Action nodes
      • Aggregate data
      • Advanced search
      • Auth operations
      • Block
      • Catch exception
      • Copy to clipboard
      • Create file archive
      • Create file object
      • Create object
      • Create user account
      • Delete objects
      • Delete user account
      • Duplicate objects
      • End execution
      • Exit block
      • Exit loop
      • Export data
      • Foreach
      • Generate document
      • If
      • Import data
      • Invalidate cache
      • Log in
      • Log to console
      • Log out
      • Next iteration
      • Navigate
      • Open/close popover
      • Open confirm dialog
      • Open print dialog
      • Open snackbar
      • Open Unsplash dialog
      • Open URL
      • Persist objects
      • Push notifications
      • Read objects
      • Request permissions
      • Run code
      • Run other action
      • Run service
      • Scan barcode/QR code
      • Send email
      • Send SMS
      • Set client language
      • Set data source attributes
      • Set selection
      • Set theme
      • Set user account image
      • Show install app prompt
      • Sleep
      • Sort objects
      • Throw exception
      • Toggle drawer
      • Update object
      • Update secret
      • Update user account
      • Web request
      • While
  • Reference
    • Appfarm Create
      • Appfarm Commander
      • Blue dots
      • Copy & Paste
      • Farmer's Market
      • Find references
      • Find usage
      • Keyboard shortcuts
      • Undo/Redo
      • User preferences
    • Platform concepts
      • Conditions
      • Data bindings
      • Date and time
      • Event handlers
      • Filters
      • Functions
      • Markdown
      • Objects
      • Operators
      • Value processor
    • Dashboard
    • Apps
      • UI
        • Views
          • Dialog
          • Drawer
        • Layout designer
        • Component properties
        • Shareable UI components
      • Data
        • App variables
        • Data sources
        • Calendar data sources
      • Actions
      • App settings
      • App size
      • App health
    • Services
      • Service Endpoints
      • Service settings
      • Service health
      • API explorer
    • Data model
      • Object classes
      • Object class properties
      • Enumerated types
      • GraphQL
        • Queries
        • Mutations
      • Data Extract API
      • Time series data
    • Operations
      • Deploy
      • Schedules
      • Logs
    • Resources
      • Themes
      • Files
      • Fonts
      • Internationalization
    • Configuration
      • Environments
      • Login
        • Custom auth providers
    • Security
      • Users
      • Service accounts
      • Roles
      • Secrets
      • Permissions
        • Conditional Permissions
    • Appfarm Client
      • Developer tools for Apps
      • Developer tools for Services
      • Warnings and errors
  • How to
    • Data modeling
      • Many-to-many relationships
      • Use naming conventions
      • Offline data handling
      • Data silos and White labelling
    • User interface
      • Manage a many-to-many relationship with a Chip group
      • Configure drag and drop
      • Build a drag-and-drop calendar
      • Design a responsive layout
      • Work with flexbox
      • Use Mapbox as a map layer
      • Understand charts
    • Logic and flow
      • Event Log Design
      • Configure advanced search
    • Themes and styling
      • Change the active theme
      • Add custom email templates
    • Enhance your app
      • Add deep links
      • Add keyboard shortcuts
      • Add link previews for social media
      • Apply SEO best practices
      • Change the active language
      • Generate a PDF from a Container
    • Integrations
      • Integrate with external systems
      • Integrate with OpenAI
      • Integrate with Google Analytics (GA4)
      • Configure a custom email account
      • Integrate with a payment provider
      • Integrate with Signicat
      • Integrate directly with an external database
      • Retrieve a Bearer token from Google Cloud
      • Fetch data from BigQuery
      • Retrieve access token from Microsoft Entra ID
    • Workflow automation
      • Update an OAuth 2.0 access token from a service
    • Authentication and access control
      • Add users and assign roles
      • Configure unauthenticated access
      • Implement third-party authentication
    • Security, testing and deployment
      • Add a custom domain
      • Install an app on a device
      • Get ready for Production
      • Optimize performance
      • Security checklist
      • Test and debug
    • Example apps
      • Create an Instagram clone
        • The end result
        • Designing the feed
        • Create new post
        • Add a like-button
        • Add comment-functionality
  • Solution administration
    • Subscription and billing
    • Dedicated tier benefits
    • Guide to GDPR
      • Key principles
      • How Appfarm protects personal data
      • How you can protect your clients’ data
      • Glossary
    • Appfarm and the EU AI Act
  • Policies
    • Appfarm Policies
    • Data Processors
    • Privacy Policy
Powered by GitBook
On this page
  • Static data
  • Dynamic data
  • Configuration
  • Debugging
  • Loading shared content
  • Creating share links

Was this helpful?

Export as PDF
  1. How to
  2. Enhance your app

Add link previews for social media

PreviousAdd keyboard shortcutsNextApply SEO best practices

Last updated 2 years ago

Was this helpful?

You can configure Appfarm to return Open Graph meta tags when a specific URL is accessed. The metadata in these tags are used by social media platforms and other services when a link is shared to generate rich previews with a title, description, and image.

The metadata can be populated in one of two ways:

  • Static data that applies to your entire app. The same metadata will be returned for any URL under your app's root URL.

  • Dynamic data from the database. The metadata is selected based on a unique identifier specified in the URL. For example, if you have published a number of articles in your app you might wish to populate custom metadata for each article.

Note

When an external service (like Facebook), checks a given app URL for Open Graph meta tags, the app is not loaded. Instead, the Appfarm Platform performs a look up and returns the data directly from the database.

This means that the data you wish to use must already exist in the database.

For best practices and more general information about metadata for social sharing, refer to this .

Static data

To use the same metadata across your entire app you can set static content. Regardless of what URL for your app an external service accesses, the same content will be returned.

Specify the content in under Shareable Link Info.

Setting
Description

Data Source

Leave blank.

Title

App title (required). Matches Open Graph property og:title.

Description

App description. Matches Open Graph property og:description.

Image

App image/logo. Matches Open Graph property og:image.

Site Name

Company name. Matches Open Graph property og:site_name.

The meta tag for the Open Graph property og:url is also generated and populated with your app's root URL.

Dynamic data

To return metadata based on objects in your database you can configure dynamic data. For example, you may have published a number of articles in your app, each with its own title, description, and image. When an article is shared on social media, you want that specific article's metadata to be displayed.

To configure dynamic data you need to specify an object class and the properties that contain the data you wish to use. Additionally, you must specify a query parameter for your URLs that will contain the identifier used to look up the object in the database. A URL that returns metadata based on dynamic data might look as follows: https://thirty50.appfarm.app/handbook/?article=zHHdE0UuaMlJmEanW1kRn

Consider security implications

There are some security considerations to be made when using dynamic data.

  • Consider using a dedicated object class

  • Enable Store Random Identifier on the object class

  • Unauthenticated access must be enabled

We recommend using a dedicated object class to store the metadata. All data in this object class should be considered public and should not contain any sensitive data. Using a dedicated object class helps limit this risk.

Another benefit of using a dedicated object class is that you can use it to store metadata for different types of objects. For example, if you publish events in addition to articles in your app, you might also want to return metadata for those as well. A dedicated object class for metadata allows you to do that.

We also recommend that you enable Store Random Identifier on the object class. This will store a unique, random string on each object when it is created that is separate to the ID property. This string can be safely shared publicly, so it should be used as the identifying property.

Configuration

Setting
Description

Data Source

A runtime data source based on the object class that contains the data you wish to return (required). Note that no data is read into the data source, it is used to establish which object class contains the metadata.

Query Param Name

The name of the query parameter used to specify the object to return (required). Use lower case letters with no spaces, for example "article".

Identificator Property

Set a unique identifying property to be used to look up the correct object in the database. We recommend using the Random Identifier property (see warning above). If not specified, ID will be used.

Title

Object title (required). Matches Open Graph property og:title.

Description

Object description. Matches Open Graph property og:description.

Image

Object image (can be an Image URL or String). Matches Open Graph property og:image.

Site Name

Usually the name of your app or company. Matches Open Graph property og:site_name.

When the app is loaded with a valid value for the specified query parameter, the meta tag for the Open Graph property og:url is populated with a value equal to the loaded URL, including the query string. In any other case, it is populated with your app's root URL.

Debugging

Loading shared content

If a person accesses a shared link you will most likely want to load the relevant data into your app and display it. Using our earlier example with articles, you would open a view with the specified article ready for them to read.

To do this you can add a URL Parameter in App Data with the same name as the Query Param Name specified under Shareable Link Info. Then you can read in, or filter on, that object in an action triggered by On App Load, and display it.

Creating share links

If you want to add functionality within your app to share a particular URL, social media platforms typically provide a way for you to generate a share link. Say you have a button, "Share on LinkedIn", with an action connected to On Click. Within that action you can add an Open URL action node. Then, using the function editor, you can format a URL for the share link. You may have to encode the URL being shared.

LinkedIn example
const url = encodeURIComponent(`https://${hostname}/handbook/?article=${randomIdentifier}`);
return `https://www.linkedin.com/sharing/share-offsite/?url=${url}`;

For dynamic data to function correctly your app must be configured for and the service account used must have a role with read access to the object class used to store the metadata.

Configure dynamic data in under Shareable Link Info.

To verify that dynamic data is configured correctly you can use an Open Graph validator tool, like the . If your app is setup to load shared content, you can also inspect your app's code to see the tags for a given page.

Ahrefs blog post about Open Graph meta tags
App Settings
unauthenticated access
App Settings
Facebook Sharing Debugger