@lucywang129,
Assuming that your basepage component has a resourceSuperType of the WCM Core v2 Page Component, you can simply overwrite head.html, and include new meta tag fields such as Facebook OpenGraph, Twitter, Linkedin, etc... to be server-side rendered, apart of the page.
Steps can be followed for the solution:
1. Overlay the head.html script, https://github.com/adobe/aem-core-wcm-components/blob/master/content/src/content/jcr_root/apps/core/..., with:
<meta property="og:type" content="${properties.ogType}"/>
<meta property="og:url" content="${currentPage.path}"/>
<meta property="og:title" content="${properties.pageTitle}"/>
<meta property="og:description" content="${properties.description}"/>
2. Add a new tab in page properties to allow the content authors to configure these settings on the page properties. When extending the WCM Core v2 Page Component, you can utilise the Sling Resource Merger to add a new " SEO" tabs to the existing page properties touch UI dialogue.
3. Configure the page with the new page properties and test.