Revitalizing BlogCfc was a part of my orginal inspiration that prompted me to design this site. Portions of Galaxie Blog are powered on the server side by BlogCfc, an open source blog developed by Raymond Camden. If an image is not part of the "Galaxie Blog" open sourced distribution package, and instead is part of a personal blog post or a comment, please contact us and the author of the post or comment to obtain permission if you would like to use a personal image or photograph found on this site. Today several other social medias and web services use this protocol, such as Twitter/Google+ etc. Gregory Alexander either owns the copyright, or has the rights to use, all images and photographs on the site. Open Graph protocol was introduced by Facebook to enable any page becoming a rich object in a social graph in simpler words, to display your website in a prettier way when sharing via social media. Finally, style the social media buttons using the following CSS and done. imageheight: The height of the image in pixels. imagealt: A description of what's in the image (not a caption) imagewidth: The width of the image in pixels. Social metadata is passed to Twitter, Facebook, Facebook Messenger, iMessage, WhatsApp, Google+, and. After that, create the HTML structure for the social media buttons as follows: 3. A meta object created by meta() or asmeta(), or returned by a meta() object. Image ( si ): (URL to image) The image should be at least 300x200 px, and less than 300 KB. Then we’re moving from the left to the right in our diagram. So, load the Font Awesome CSS by adding the following CDN link into the head tag of your HTML page. When someone shares that page on twitter, facebook, or other social media, the preview image will be displayed. If you have an idea, BlogCfc based code, or a theme that you have built using this site that you want to share, please contribute by making a post here or share it by contacting us! This community can only thrive if we continue to work together. These social media buttons use Font Awesome 5 CSS for icons. Your input and contributions are welcomed! In the next article, I will go over some useful validation tools and share some tips and tricks with that I found. Use 'summary_large_image' if you're following along with this article Facebook will correctly determine the proper image size as long as you stay within the Facebook recommendations. The og:image:height and og:image:width tags are helpful, but not necessary. The following open graph tags are essential for Facebook
Facebook prefers open graph tags, Twitter can use the open graph tags, but it has a slew of its own proprietary tags, and Google +, LinkedIn, and Pinterest prefer schema markup tags, which I will not cover here. If you are using Galaxie Blog, the auto-generation of these tags is done for you.Įach social media site has its own rules for generating the meta tags. I have made several passes at improving the logic that Galaxie Blog uses to auto-generate the tags, and will share my experience with you.
#SOCIAL MEDIA META IMAGE HTML HOW TO#
How to make the perfect social media sharing image - part 5 Essential Meta Tags
0 kommentar(er)
