Social Meta Tags

Q&A about the latest versions
Post Reply
adamfox
Posts: 3
Joined: Mon Aug 17, 2020 9:59 am

Sun Sep 27, 2020 5:07 pm

Hi everyone,

I have been playing around with the normal HTML template so that more meta tags are generated automatically to create rich previews when sharing via social media i.e WhatsApp, Facebook, Twitter etc.

Here is the code I have added/amended within the normal.ggt template (amended file attached).

Code: Select all

	Create the form in the HTML dialog box
*/
	form.addLineEdit("htmltitle","HTML Page Title",0,"$(upt)");
    	form.addLineEdit("htmldescription","HTML Page Description",0,"$(upd)");
	form.addLineEdit("urlinfo","Page URL",0,"$(upi)");
	form.addLineEdit("twittercomment","Twitter Handle",0,"$(upo)");

Code: Select all

		<link rel="icon" type="image/png" href="/favicon.png"/>

		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 

		<title><?ggs document.write(document.encode(document.removeTags(document.expandVariables(formvalue["htmltitle"])))); ?></title>
		<meta name="description" content="<?ggs document.write(document.encode(document.removeTags(document.expandVariables(formvalue["htmldescription"])))); ?>"
		/>
		
		<meta property="og:title" content="<?ggs document.write(document.encode(document.removeTags(document.expandVariables(formvalue["htmltitle"])))); ?>" />
		<meta property="og:description" content="<?ggs document.write(document.encode(document.removeTags(document.expandVariables(formvalue["htmldescription"])))); ?>" />
		<meta property="og:type" content="website" />
		<meta property="og:url" content="<?ggs document.write(document.encode(document.removeTags(document.expandVariables(formvalue["urlinfo"])))); ?>" />
		<meta property="og:image" content="<?ggs document.write(document.encode(document.removeTags(document.expandVariables(formvalue["urlinfo"])))); ?>/preview.jpg"
		/>

        <meta name="twitter:card" content="summary" />
		<meta name="twitter:site" content="<?ggs document.write(document.encode(document.removeTags(document.expandVariables(formvalue["twittercomment"])))); ?>" />
		<meta name="twitter:title" content="<?ggs document.write(document.encode(document.removeTags(document.expandVariables(formvalue["htmltitle"])))); ?>" />
		<meta name="twitter:description" content="<?ggs document.write(document.encode(document.removeTags(document.expandVariables(formvalue["htmldescription"])))); ?>" />
		<meta name="twitter:image" content="<?ggs document.write(document.encode(document.removeTags(document.expandVariables(formvalue["urlinfo"])))); ?>/preview.jpg"
		/>

		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="mobile-web-app-capable" content="yes"
		/>
Note: I have also added html for a favicon to be displayed.

Currently I am using the boxes for Information and Comment within the Edit Project User Data section. Would if be possible to have an dedicated box for Page URL and Twitter Handle in a later version?

Image

Also does ticking "Create files for external embedding" do anything other than create a preview.jpg image and add <meta property="og:image" content="preview.jpg"> to index.htm?

Image

Here are the results.

Twitter

Image

Facebook

Image

WhatsApp

Image

Thank you for your help in advance.
Attachments
normal_social.ggt
(8.33 KiB) Downloaded 23 times
KMiddelkoop
Posts: 33
Joined: Thu May 30, 2019 1:47 pm

Mon Sep 28, 2020 7:16 am

This looks great, thank you for sharing.
adamfox
Posts: 3
Joined: Mon Aug 17, 2020 9:59 am

Thu Oct 01, 2020 2:52 pm

Did any know the answer to these two questions? Thanks in advance!
adamfox wrote:
Sun Sep 27, 2020 5:07 pm
Currently I am using the boxes for Information and Comment within the Edit Project User Data section. Would if be possible to have an dedicated box for Page URL and Twitter Handle in a later version?

Image

Also does ticking "Create files for external embedding" do anything other than create a preview.jpg image and add <meta property="og:image" content="preview.jpg"> to index.htm?
Neal
Posts: 177
Joined: Thu Dec 12, 2013 11:14 am
Contact:

Thu Oct 01, 2020 4:09 pm

In the skin editor, you can create variables that are shown in the config menu.
While you are at it, I would also add a cardinal URL statement.
Post Reply