Meta-Tag, Twitter Card and OpenGraph Generator
This tool helps you generate Twitter Card and Facebook OpenGraph meta-tags. These headers are invisible, but they make sure your page looks as you'd like it to on Twitter, Facebook and other social media. If you are using a content management system such as WordPress, there will be plugins to add these for you, but if you are hand coding your page, you need to add these to the <head> section of your page yourself.
Simply add your page details in the form below and you can see a Twitter card review and copy the tags from the output area at the end of the page.
Twitter preview
When your page is ready use the official Twitter Card validator
OpenGraph meta-tags
Copy the following into the <head> section of your web page. If you are not sure how, do "view source" for this page and look at the top.
Finally ... on the technology
I've used this as an opportunity to try out JsViews/JsRender. I've played with AngularJS before, but found it becoming hard work when I wanted to do things that were slightly outside it's model of the world. I've been doing simpler things here than when I used AngularJS, but I'm certainly happy with JsViews so far. There is also a new version of Angular since I last tried, so maybe I ougt to have another go sometime!
I also used some Javascript domain parsing code by Kory Becker.
The MetaTag Generator icon is composed of SVG gears by Xander - (self-made - Image:Cog-scripted-svg.svg, Public Domain), overlaid on the OpenGraph web logo.