diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.jsx b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
index c7dea871b..b84a30080 100644
--- a/client/homebrew/editor/metadataEditor/metadataEditor.jsx
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
@@ -7,6 +7,8 @@ const request = require('superagent');
 
 const SYSTEMS = ['5e', '4e', '3.5e', 'Pathfinder'];
 
+const homebreweryThumbnail = require('../../thumbnail.png');
+
 const MetadataEditor = createClass({
 	getDefaultProps : function() {
 		return {
@@ -18,12 +20,19 @@ const MetadataEditor = createClass({
 				published   : false,
 				authors     : [],
 				systems     : [],
-				renderer    : 'legacy'
+				renderer    : 'legacy',
+				thumbnail   : ''
 			},
 			onChange : ()=>{}
 		};
 	},
 
+	getInitialState : function(){
+		return {
+			showThumbnail : true
+		};
+	},
+
 	handleFieldChange : function(name, e){
 		this.props.onChange(_.merge({}, this.props.metadata, {
 			[name] : e.target.value
@@ -65,6 +74,17 @@ const MetadataEditor = createClass({
 			});
 	},
 
+	toggleThumbnailDisplay : function(){
+		this.setState({
+			showThumbnail : !this.state.showThumbnail
+		});
+	},
+
+	renderThumbnail : function(){
+		if(!this.state.showThumbnail) return;
+		return <img className='thumbnail-preview' src={this.props.metadata.thumbnail || homebreweryThumbnail}></img>;
+	},
+
 	renderSystems : function(){
 		return _.map(SYSTEMS, (val)=>{
 			return <label key={val}>
@@ -161,6 +181,19 @@ const MetadataEditor = createClass({
 				<textarea value={this.props.metadata.description} className='value'
 					onChange={(e)=>this.handleFieldChange('description', e)} />
 			</div>
+			<div className='field thumbnail'>
+				<label>thumbnail</label>
+				<input type='text'
+					value={this.props.metadata.thumbnail}
+					placeholder='my.thumbnail.url'
+					className='value'
+					onChange={(e)=>this.handleFieldChange('thumbnail', e)} />
+				<button className='display' onClick={this.toggleThumbnailDisplay}>
+					<i className={`fas fa-caret-${this.state.showThumbnail ? 'right' : 'left'}`} />
+				</button>
+				{this.renderThumbnail()}
+			</div>
+
 			{/*}
 			<div className='field tags'>
 				<label>tags</label>
diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.less b/client/homebrew/editor/metadataEditor/metadataEditor.less
index 4a43158d0..cd6c535b3 100644
--- a/client/homebrew/editor/metadataEditor/metadataEditor.less
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.less
@@ -24,6 +24,33 @@
 			flex           : 1 1 auto;
 			min-width      : 200px;
 		}
+		&.thumbnail{
+			height      : 1.4em;
+			label{
+				line-height: 2.0em;
+			}
+			.value{
+  				overflow: hidden;
+  				text-overflow: ellipsis;
+			}
+			button{
+				border: 1px solid #999;
+				color: white;
+				padding: 0px 5px;
+				background-color: black;
+				&:hover{
+					background-color: #777;
+				}
+			}
+			.thumbnail-preview{
+				position    : relative;
+				width       : 80px;
+				height      : min-content;
+				border      : 2px solid white;
+				margin-left : 5px;
+				max-height  : 115px;
+			}
+		}
 	}
 	.description.field textarea.value{
 		resize      : none;
@@ -78,7 +105,7 @@
 		}
 	}
 	.authors.field .value{
-		font-size: 0.8em;
-		line-height    : 1.5em;
+		font-size   : 0.8em;
+		line-height : 1.5em;
 	}
 }
diff --git a/client/homebrew/thumbnail.png b/client/homebrew/thumbnail.png
new file mode 100644
index 000000000..38b6d9699
Binary files /dev/null and b/client/homebrew/thumbnail.png differ
diff --git a/client/template.js b/client/template.js
index e2e0893e3..0c6e4deae 100644
--- a/client/template.js
+++ b/client/template.js
@@ -1,4 +1,5 @@
 module.exports = async(name, title = '', props = {})=>{
+	const HOMEBREWERY_PUBLIC_URL=(process.env.NODE_ENV == 'local' ? 'localhost:8000' : 'https://homebrewery.naturalcrit.com');
 	return `
 <!DOCTYPE html>
 <html>
@@ -7,6 +8,12 @@ module.exports = async(name, title = '', props = {})=>{
 		<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
 		<link href=${`/${name}/bundle.css`} rel='stylesheet' />
 		<link rel="icon" href="/assets/homebrew/favicon.ico" type="image/x-icon" />
+		<meta property="og:title" content="${props.brew?.title ? props.brew.title : 'Homebrewery - Untitled Brew'}">
+		<meta property="og:url" content="${HOMEBREWERY_PUBLIC_URL}/${props.brew?.shareId ? `share/${props.brew.shareId}` : ''}">
+		<meta property="og:image" content="${props.brew?.thumbnail ? props.brew.thumbnail : `${HOMEBREWERY_PUBLIC_URL}/thumbnail.png`}">
+		<meta property="og:description" content="${props.brew?.description ? props.brew.description : 'No description.'}">
+		<meta property="og:site_name" content="The Homebrewery - Make your Homebrew content look legit!">
+		<meta property="og:type" content="website">
 		<title>${title.length ? `${title} - The Homebrewery`: 'The Homebrewery - NaturalCrit'}</title>
 	</head>
 	<body>
diff --git a/server/googleActions.js b/server/googleActions.js
index 72059cb2d..fd4ca5914 100644
--- a/server/googleActions.js
+++ b/server/googleActions.js
@@ -127,7 +127,8 @@ GoogleActions = {
 				tags        : '',
 				published   : file.properties.published ? file.properties.published == 'true' : false,
 				authors     : [req.account.username],	//TODO: properly save and load authors to google drive
-				systems     : []
+				systems     : [],
+				thumbnail   : file.properties.thumbnail
 			};
 		});
 	  return brews;
@@ -164,7 +165,8 @@ GoogleActions = {
 						renderer  : brew.renderer,
 						tags      : brew.tags,
 						pageCount : brew.pageCount,
-						systems   : brew.systems.join()
+						systems   : brew.systems.join(),
+						thumbnail : brew.thumbnail
 					}
 				},
 				media : {
@@ -203,7 +205,8 @@ GoogleActions = {
 				'title'     : brew.title,
 				'views'     : '0',
 				'pageCount' : brew.pageCount,
-				'renderer'  : brew.renderer || 'legacy'
+				'renderer'  : brew.renderer || 'legacy',
+				'thumbnail' : brew.thumbnail
 			}
 		};
 
@@ -246,7 +249,8 @@ GoogleActions = {
 			published   : brew.published,
 			renderer    : brew.renderer,
 			authors     : [],
-			systems     : []
+			systems     : [],
+			thumbnail   : brew.thumbnail
 		};
 
 		return newHomebrew;
@@ -258,7 +262,7 @@ GoogleActions = {
 
 		const obj = await drive.files.get({
 			fileId : id,
-			fields : 'properties, createdTime, modifiedTime, description, trashed'
+			fields : 'properties, createdTime, modifiedTime, description, trashed, thumbnail'
 		})
 		.catch((err)=>{
 			console.log('Error loading from Google');
@@ -314,6 +318,7 @@ GoogleActions = {
 				views      : parseInt(obj.data.properties.views) || 0, //brews with no view parameter will return undefined
 				version    : parseInt(obj.data.properties.version) || 0,
 				renderer   : obj.data.properties.renderer ? obj.data.properties.renderer : 'legacy',
+				thumbnail  : obj.data.properties.thumbnail ? obj.data.properties.thumbnail : '',
 
 				gDrive   : true,
 				googleId : id
diff --git a/server/homebrew.model.js b/server/homebrew.model.js
index acc78a624..be6b2f6cd 100644
--- a/server/homebrew.model.js
+++ b/server/homebrew.model.js
@@ -17,6 +17,7 @@ const HomebrewSchema = mongoose.Schema({
 	renderer    : { type: String, default: '' },
 	authors     : [String],
 	published   : { type: Boolean, default: false },
+	thumbnail   : { type: String, default: '' },
 
 	createdAt  : { type: Date, default: Date.now },
 	updatedAt  : { type: Date, default: Date.now },
